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'); }); }); 但上面的代码不起作用。 有帮助吗？
试试这个：
$(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'); }); });
最后，它使用以下代码：
$(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); }); });
在ajax事件使用模式添加事件后，我以这种方式刷新：
$('#cal').fullCalendar('removeEvents'); $('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php") $('#cal').fullCalendar('rerenderEvents');
这适用于至少2.0.2。 data成为一个返回填充了动态下拉值的对象的函数。 添加change以在选择新的下拉列值时刷新日历。
$("#calendar").fullCalendar({ events: { url: "/myfeed", data: function() { return { dynamicValue: $("#dropdownList").val() }; }, type: "POST" } }); $("#dropdownList").change(function () { $("#calendar").fullCalendar("refetchEvents"); });
问题是您在创建事件对象后更改下拉列表的值，该事件对象具有下拉列表原始值的副本 。 以下是您的需求：
$('#dropdownId').change(function () { events.data.customParam = $(this).val(); $('#calendar').fullCalendar('refetchEvents'); });
这依赖于在一个区域中创建的事件对象，在该区域中可以从下拉列表onchange和fullcalendar初始化（例如，文档onload）访问它。
我这样解决了
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'); },
我也无法做到这一点。 所以我最终得到了类似于此的解决方案：
$('#personDropDown').change(function () { var source = { data: { filter: $('#personDropDown').val() }, url : '/myfeed' }; $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', source); });
这可以通过使用函数作为事件源来实现。 在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(); {
我自己也遇到了这个问题，因为在初始化日历并且需要修改数据对象时存储了值，因此有一种更动态的方法。
$(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'); }); });
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: '', next: '' }, 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 });
我是这样做的：
$('#calendar').fullCalendar( 'destroy' );
当我在下拉列表中选择其他选项时，我不知道它是否优雅但是有效！