jquery fullcalendar发送自定义参数和JSON刷新日历

Question

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

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

这里是我的代码

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

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

    }); 

然而以上不工作的代码。 有什么帮助吗？

Answer 1

试试这个：

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

}); 

Answer 2

我无法让它工作。 所以我结束了类似这样的解决方案：

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

    }); 

Answer 3

最后，用下面的代码工作：

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

Answer 4

我刷新这种方式后一个Ajax事件增加了例如使用模态的事件：

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

Answer 5

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

Answer 6

的问题是，你正在改变下拉的价值已创建的事件对象，其中有下拉的原始值的副本后。以下是你需要的东西：

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

这依赖于它可以从下拉的onchange和fullcalendar初始化（如文件的onload）

Answer 7

我解决了类似访问的区域所创建的事件对象这

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

Answer 8

这个工程至少2.0.2。 data成为一个返回填充有动态下拉值的对象的函数。添加change以在选择新的下拉值时刷新日历。

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

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

Answer 9

我只是碰到了这个自己并没有这样做，因为当日历初始化值存储和数据对象需要修改的更具活力的方式。

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

    }); 

Answer 10

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