如何在jQuery完整日曆中通過JSON數組動態添加資源

Question

我有一個updateCalendar()函數，它動態添加事件，但我無法爲資源執行此操作。我有一個JSON資源數組，我需要在resources[]中加載，但是我無法做到這一點。我試圖通過URL獲取資源數組，但它也無法正常工作。

這裏是我的一段代碼：

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     header: { 
      left: '', 
      center: 'title', 
      right: '' 
     }, 
     defaultView: 'resourceDay', 
     editable: true, 
     droppable: true, 
     resources: { 
      url: "${pageContext.request.contextPath}/protected/appointment/getResourceList", 
      type: "GET" 
     }, 
     events: [], 
     // the 'ev' parameter is the mouse event rather than the resource 'event' 
     // the ev.data is the resource column clicked upon 
     selectable: true, 
     selectHelper: true, 
     select: function(start, end, ev) { 
      console.log(start); 
      console.log(end); 
      console.log(ev.data); // resources 
     }, 
     eventClick: function(event) { 
      var value = '${scheduleByLocationPage}'; 
      document.getElementById("scheduleByLocation").action = 'FetchAppointmentDetails?id=' + event.id 
       + '&problemAppointment1=' + event.problemCode + '&referredFrom=' + value; 
      document.getElementById("scheduleByLocation").submit(); 
      console.log(event); 
     }, 
     eventDrop: function(event, delta, revertFunc) { 
      console.log(event); 
     } 
    }); 

    updateCalender(); 

    $('#locationID').change(function() { 
     updateCalender(); 
    }); 

    $('#searchDate').datepicker({ 
     onSelect: function() { 
      updateCalender(); 
     } 
    }); 


    function updateCalender() { 
     var selectBox = document.getElementById("locationID"); 
     var selectedValue = selectBox.options[selectBox.selectedIndex].value; 
     var serviceName = selectBox.options[selectBox.selectedIndex].text; 
     var date = document.getElementById("searchDate").value; 
     var eventArray = [ [] ]; 
     var title = ''; 
     var start = ''; 
     var end = ''; 
     var allDay = ''; 
     var date1 = ''; 
     var id = ''; 
     var problemCode = ''; 
     var d = new Date(); 
     var n = d.getTimezoneOffset(); 
     var goCalndarDate = ''; 

     $('#calendar').fullCalendar('removeEvents'); 
     $('#scheduleFor').html('Schedule for ' + serviceName + ' on ' + date); 
     $('#calendar').fullCalendar('removeEvents'); 
     $.ajax({ 
      type: "GET", 
      url: "${pageContext.request.contextPath}/protected/appointment/ScheduleByLocation", 
      data: { 
       locationID: selectedValue, 
       filterDate: date, 
       browserTimeZone: n 
      }, 
      success: function(response, status, xhr) { 
       eventArray = JSON.parse(xhr.getResponseHeader('eventArray')); 
       goCalndarDate = eventArray[0].searchDate; 

       $('#calendar').fullCalendar('gotoDate', goCalndarDate); 

       for (var x = 1; x < eventArray.length; x++) { 
        title = eventArray[x].title; 
        start = new Date(eventArray[x].start); 
        end = new Date(eventArray[x].end); 
        allDay = eventArray[x].allDay; 
        date1 = eventArray[x].date; 
        id = eventArray[x].id; 
        problemCode = eventArray[x].problemCode; 
        offset = eventArray[x].offset; 

        var newEvent = { 
         id: id, 
         problemCode: problemCode, 
         title: title, 
         start: start, 
         end: end, 
         allDay: allDay, 
         resources: ['resource2'], 
         color: '#ffffff', 
         backgroundColor: '#000000' 
        }; 

        $('#calendar').fullCalendar('gotoDate', date1); 
        $('#calendar').fullCalendar('renderEvent', newEvent, 'stick'); 
       } 
      }, 
      error: function(error) { 
       console.log("Ajax error " + eval(error)); 
      } 
     }); 
    } 
}); 

Answer 1

啓動完整的日曆之前，請一個AJAX調用你的資源的URL，然後發起Ajax調用成功功能完整的日曆

$.ajax({ 
    url: 'your resource url here', 
    type 'GET', 
    success: function(data) { 
      $('#calendar').fullCalendar({ 
       header: { 
       left: '', 
       center: 'title', 
       right: '' 
      }, 
      defaultView: 'resourceDay', 
      editable: true, 
      droppable: true, 
      resources: { 
       id: data.id, // Or whatever object properties you need from data 
       title: data.tile 
      }, 
      events: [], 
      // the 'ev' parameter is the mouse event rather than the resource 'event' 
      // the ev.data is the resource column clicked upon 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end, ev) { 
       console.log(start); 
       console.log(end); 
       console.log(ev.data); // resources 
      }, 
      eventClick: function(event) { 
       var value = '${scheduleByLocationPage}'; 
       document.getElementById("scheduleByLocation").action = 'FetchAppointmentDetails?id=' + event.id 
       + '&problemAppointment1=' + event.problemCode + '&referredFrom=' + value; 
       document.getElementById("scheduleByLocation").submit(); 
       console.log(event); 
      }, 
      eventDrop: function(event, delta, revertFunc) { 
       console.log(event); 
      } 
     }); 
    } 
});