2014-02-05 166 views
0

我使用了驚人的FullCalendar JQuery插件,需要顯示Google日曆事件以及我自己的自定義事件。代碼如下。在fullCalendar中顯示Google日曆事件和自定義事件

$('#calendar').fullCalendar({ 
      theme: true, 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      editable: true, 
      events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', 
      events: [ 
       { 
        title: 'All Day Event', 
        start: new Date(y, m, 1) 
       }, 
       { 
        title: 'Long Event', 
        start: new Date(y, m, d-5), 
        end: new Date(y, m, d-2) 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d-3, 16, 0), 
        allDay: false 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d+4, 16, 0), 
        allDay: false 
       } 
      ] 
     }); 
    }); 

現在我知道我不能有兩個events屬性,但我需要顯示的兩個來源的數據。我該如何解決這個問題?

由於提前, 格蘭特

+0

你能給URL中的數據與Ajax調用,然後自己的事件數據添加到它? – Archer

回答

2

感謝您的閱讀,但我已經找到了解決辦法。我只需要在初始化日曆後添加事件源。下面的代碼。

$(文件)。就緒(函數(){

var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     theme: true, 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1) 
      }, 
      { 
       title: 'Long Event', 
       start: new Date(y, m, d-5), 
       end: new Date(y, m, d-2) 
      }, 
      { 
       id: 999, 
       title: 'Repeating Event', 
       start: new Date(y, m, d-3, 16, 0), 
       allDay: false 
      }, 
      { 
       id: 999, 
       title: 'Repeating Event', 
       start: new Date(y, m, d+4, 16, 0), 
       allDay: false 
      } 
     ] 
    }); 

    $('#calendar').fullCalendar('addEventSource', 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'); 
});