在fullcalendar中顯示數據庫事件

Question

我有我的數據庫中的事件列表，我想在我的應用程序的日曆中顯示它。下面是我用來創建日曆的js函數。有沒有什麼辦法顯示我的數據庫事件？

 function init_calendar() { 

      if(typeof ($.fn.fullCalendar) === 'undefined'){ return; } 
      console.log('init_calendar'); 

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

      var calendar = $('#calendar').fullCalendar({ 
       header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay,listMonth' 
       }, 
       selectable: true, 
       selectHelper: true, 
       select: function(start, end, allDay) { 
       $('#fc_create').click(); 

       started = start; 
       ended = end; 

       $(".antosubmit").on("click", function() { 
        var title = $("#title").val(); 
        if (end) { 
        ended = end; 
        } 

        categoryClass = $("#event_type").val(); 

        if (title) { 
        calendar.fullCalendar('renderEvent', { 
         title: title, 
         start: started, 
         end: end, 
         allDay: allDay 
         }, 
         true // make the event "stick" 
        ); 
        } 

        $('#title').val(''); 

        calendar.fullCalendar('unselect'); 

        $('.antoclose').click(); 

        return false; 
       }); 
       }, 
       eventClick: function(calEvent, jsEvent, view) { 
       $('#fc_edit').click(); 
       $('#title2').val(calEvent.title); 

       categoryClass = $("#event_type").val(); 

       $(".antosubmit2").on("click", function() { 
        calEvent.title = $("#title2").val(); 

        calendar.fullCalendar('updateEvent', calEvent); 
        $('.antoclose2').click(); 
       }); 

       calendar.fullCalendar('unselect'); 
       }, 
       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) 
       }, { 
       title: 'Meeting', 
       start: new Date(y, m, d, 10, 30), 
       allDay: false 
       }, { 
       title: 'Lunch', 
       start: new Date(y, m, d + 14, 12, 0), 
       end: new Date(y, m, d, 14, 0), 
       allDay: false 
       }, { 
       title: 'Birthday Party', 
       start: new Date(y, m, d + 1, 19, 0), 
       end: new Date(y, m, d + 1, 22, 30), 
       allDay: false 
       }, { 
       title: 'Click for Google', 
       start: new Date(y, m, 28), 
       end: new Date(y, m, 29), 
       url: 'http://google.com/' 
       }] 
      }); 

     }; 

Answer 1

是的，你可以使用fullCalendar的events選項指定的事件源。