web-dev-qa-db-ja.com

jquery fullcalendarはカスタムパラメータを送信し、JSONでカレンダーを更新します

jquery fullcalendarを使用しようとしています。イベントデータは、JSONを使用してサーバーから取得されます。私のページには、ドロップダウン要素とfullcalendar divがあります。

ユーザーがドロップダウンを変更するたびにカレンダーを更新する必要があります。ドロップダウンの選択された値は、新しいイベントデータを取得するためにサーバーに送信する必要があります

ここに私のコードがあります

     $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url : '/myfeed',
                data : {personId : $('#personDropDown').val() }
            }
        });

        $('#personDropDown').change(function(){
            $('#calendar').fullCalendar('refetchEvents');
        });

    });

ただし、上記のコードは機能しません。助けがありますか？

jqueryjsonfullcalendar
29
geo

これを試して：

$(document).ready(function () {
    $('#calendar').fullCalendar({
        events: {
            url: '/myfeed',
            data: function () { // a function that returns an object
                return {
                    personId: $('#personDropDown').val(),
                };

            }
        });


    $('#personDropDown').change(function () {
        $('#calendar').fullCalendar('refetchEvents');
    });

});
33
Jairo Cordero

最後に、次のコードを使用しました：

$(document).ready(function() {
        loadCalendar();
        $('#siteSelect').change(function(){
            var selectedSite = $('#siteSelect').val();
            var events = {
                  url: '/myfeed2',
                  type: 'POST',
                  data: {
                    siteid: selectedSite
                  }
            }
            $('#calendar').fullCalendar('removeEventSource', events);
            $('#calendar').fullCalendar('addEventSource', events);
        });

    });
31
geo

たとえば、ajaxイベントがモーダルを使用してイベントを追加した後、この方法で更新します。

$('#cal').fullCalendar('removeEvents');
$('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php")
$('#cal').fullCalendar('rerenderEvents');
3
Dan Carter

これは少なくとも2.0.2で機能します。 dataは、動的なドロップダウン値が入力されたオブジェクトを返す関数になります。 changeは、新しいドロップダウン値が選択されたときにカレンダーを更新するために追加されます。

$("#calendar").fullCalendar({
    events: {
        url: "/myfeed",
        data: function() {
            return {
                dynamicValue: $("#dropdownList").val()
            };
        },
        type: "POST"
    }
});

$("#dropdownList").change(function () {
    $("#calendar").fullCalendar("refetchEvents");
});
3
Shoe

問題は、ドロップダウンの元の値のcopyを持つイベントオブジェクトを作成した後、ドロップダウンの値を変更していることです。必要なものは次のとおりです。

$('#dropdownId').change(function () {
    events.data.customParam = $(this).val();
    $('#calendar').fullCalendar('refetchEvents');
});

これは、ドロップダウンのonchangeとフルカレンダーの初期化（たとえば、ドキュメントのオンロード）からアクセスできる領域で作成されるイベントオブジェクトに依存します

2
tocallaghan

このように解決しました

         data: function() { // a function that returns an object
         return {
                 custom_param1: date_start,
             custom_param2: date_end
            };
         },

date_startおよびdate_endの値を変更した後、この関数は新しい値を取得します。私の場合、ビューが変更される日付を取ります

viewRender: function(view,element){
       date_start = $.fullCalendar.formatDate(view.start,'dd/MM/yyyy');
       date_end   = $.fullCalendar.formatDate(view.end,'dd/MM/yyyy');
},
1
Jairo Cordero

私はこれを使ってそれをやった：

$('#calendar').fullCalendar( 'destroy' );

ドロップダウンで他のオプションを選択すると、エレガントであるが機能するかどうかわかりません！

0
Amber Gondal

私もそれを機能させることができませんでした。だから私はこれに似たソリューションになりました：

$('#personDropDown').change(function () {
            var source = {
                data: {
                    filter: $('#personDropDown').val()
                },
                 url : '/myfeed'
            };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source);
        });
0
Kristian Højklint Schneider

私は自分でこれに遭遇しましたが、カレンダーが初期化されてデータオブジェクトが変更される必要があるときに値が保存されるため、これを行うより動的な方法があります。

 $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url : '/myfeed',
                data : {personId : $('#personDropDown').val() }
            }
        });

        $('#personDropDown').change(function(){
            $('#calendar').data('fullCalendar').options.events.data.personId = $(this).val();
            $('#calendar').fullCalendar('refetchEvents');
        });

    });
0
Larry
This is right way.

$.ajax({
    url: 'ABC.com/Calendar/GetAllCalendar/',
    type: 'POST',
    async: false,
    data: { Id: 1 },
    success: function (data) {
        obj = JSON.stringify(data);
    },
    error: function (xhr, err) {
        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
        alert("responseText: " + xhr.responseText);
    }
});

/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
    //isRTL: true,
    buttonHtml: {
        prev: '<i class="ace-icon fa fa-chevron-left"></i>',
        next: '<i class="ace-icon fa fa-chevron-right"></i>'
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //obj that we get json result from ajax
    events: JSON.parse(obj)
    ,
    editable: true,
    selectable: true    
});
0
Jigs17

これは、関数をイベントソースとして使用することで実現できます。 refetchEventsイベントで、fullCalendarはカスタム値を返す関数を呼び出し、サービスに送信します。

$(document).ready(function() {
        $('#valueSelect').change(function(){
            if ($('#calendar').hasClass('fc'))
            {
                $('#calendar').fullCalendar('refetchEvents');
            }
            else
            {
                $('#calendar').fullCalendar({
                    events: function(start, end, callback) {
                        $.ajax({
                            url: 'web-service-link',
                            type: 'GET',
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: {
                                start: Math.round(start.getTime() / 1000),
                                end: Math.round(end.getTime() / 1000),
                                customValue: GetCustomValue()
                            }
                        });
                    }
                });
            }
        });
});

function GetCustomValue()
{
    return $('#valueSelect').val();
{
0
vadim