jquery fullcalendar 发送自定义参数并使用 JSON 刷新日历

jquery fullcalendar send custom parameter and refresh calendar with JSON

提问by geo

im trying to use the jquery fullcalendar. The event data comes from the server using JSON. My page has a dropdown element and the fullcalendar div.

我正在尝试使用 jquery fullcalendar。事件数据来自使用 JSON 的服务器。我的页面有一个下拉元素和 fullcalendar div。

What i need is to refresh the calendar each time the user changes the dropdown. The selected value of the dropdown should be posted to the server in order to fetch the new event data

我需要的是每次用户更改下拉列表时刷新日历。下拉列表的选定值应发布到服务器以获取新的事件数据

Here is my code

这是我的代码

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

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

    });

The code above however doesnt work. Any help?

但是上面的代码不起作用。有什么帮助吗？

回答by Jairo Cordero

try this:

尝试这个：

$(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');
    });

});

回答by geo

Finally it worked with the following code:

最后它使用以下代码：

$(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);
        });

    });

回答by Shoe

This works on at least 2.0.2. databecomes a function that returns an object populated with dynamic dropdown values. changeis added to refresh the calendar when a new dropdown value is selected.

这至少适用于 2.0.2。data成为一个函数，它返回一个用动态下拉值填充的对象。change添加了在选择新的下拉值值时刷新日历。

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

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

回答by Dan Carter

I refresh this way after an ajax event adds an event using a modal for instance:

例如，在 ajax 事件使用模态添加事件后，我以这种方式刷新：

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

回答by tocallaghan

The problem is that you are changing the value of the dropdown after you have created the event object, which has a copyof the original value of the dropdown. The following is what you need:

问题是您在创建事件对象后更改了下拉列表的值，该对象具有下拉列表原始值的副本。以下是您所需要的：

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

This relies on the event object being created in an area where it can be accessed from the dropdown onchange and the fullcalendar initialisation (e.g. document onload)

这依赖于在一个区域中创建的事件对象，该区域可以从下拉菜单 onchange 和完整日历初始化（例如文档加载）访问

回答by Jairo Cordero

I solved like this

我是这样解决的

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

after modifying the values date_start and date_end, this function gets the new values. In my case i take the dates when the view changes

修改 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');
},

回答by vadim

This can be achieved by using function as event source. On refetchEvents event fullCalendar calls function that returns custom value and will post it to service.

这可以通过使用函数作为事件源来实现。在 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();
{

回答by Kristian H?jklint Schneider

I could not get that to work either. So I ended up with solution similar to this:

我也无法让它发挥作用。所以我最终得到了类似的解决方案：

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

回答by Larry

I just ran into this myself and there is a more dynamic way of doing this since the value is stored when the calendar is initialized and the data object needs modified.

我自己刚刚遇到了这个问题，有一种更动态的方法可以做到这一点，因为该值是在日历初始化和数据对象需要修改时存储的。

 $(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');
        });

    });

回答by Jigs17

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    
});