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