fullcalendar如何添加活動？

Question

我不是一個PHP的怪胎，但可以理解它。

我想用fullcalendar（本例中http://arshaw.com/js/fullcalendar-1.6.4/demos/external-dragging.html）

我已閱讀完整的文檔。 我已閱讀標籤fullcalendar 在這裏完整43頁，但無法找到我的答案。

很簡單， 如何當我拖入日期添加事件。

從JSON文件讀了劇本，但如何寫入JSON？

的JS從fullcalendar

$(function() 
{ 
    /* initialize the external events 
    -----------------------------------------------------------------*/ 
    $('#external-events ul li').each(function() 
    { 
     // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
     // it doesn't need to have a start or end 
     var eventObject = { 
      title: $.trim($(this).text()) // use the element's text as the event title 
     }; 

     // store the Event Object in the DOM element so we can get to it later 
     $(this).data('eventObject', eventObject); 

     // make the event draggable using jQuery UI 
     $(this).draggable(
     { 
      zIndex: 999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0, // original position after the drag, 
      start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); }, 
      stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); } 
     }); 

    }); 

    /* initialize the calendar 
    -----------------------------------------------------------------*/ 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     droppable: true, 
     events: rootPath + "/admin/ajax/calendarEvents.json", 
     drop: function(date, allDay) 
     { 
      // retrieve the dropped element's stored Event Object 
      var originalEventObject = $(this).data('eventObject'); 

      // we need to copy it, so that multiple events don't have a reference to the same object 
      var copiedEventObject = $.extend({}, originalEventObject); 

      // assign it the date that was reported 
      copiedEventObject.start = date; 
      copiedEventObject.allDay = allDay; 

      // render the event on the calendar 
      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

      // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 

     } 
    }); 
}); 

文件，這是HTML

<div class="widget widget-inverse"> 

     <!-- Widget heading --> 
     <div class="widget-head"> 
      <h3 class="heading">Draggable Events</h3> 
     </div> 
     <!-- // Widget heading END --> 

     <div class="widget-body"> 

      <!-- Events list --> 
      <ul class="unstyled"> 
       <li class="glyphicons move"><i></i> My Event 1</li> 
       <li class="glyphicons move"><i></i> My Event 2</li> 
       <li class="glyphicons move"><i></i> My Event 3</li> 
       <li class="glyphicons move"><i></i> My Event 4</li> 
       <li class="glyphicons move"><i></i> My Event 5</li> 
      </ul> 
      <!-- Events list END --> 

      <label for="drop-remove" class="checkbox"> 
       <input type="checkbox" class="checkbox" id="drop-remove" /> 
       remove after drop 
      </label> 

     </div> 
    </div> 

非常感謝

Answer 1

看看這個頁面：draggable events

查找源代碼你會看到放置功能

$('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     droppable: true, // this allows things to be dropped onto the calendar !!! 
     **drop**: function(date, allDay) { // this function is called when something is dropped 

      // retrieve the dropped element's stored Event Object 
      var originalEventObject = $(this).data('eventObject'); 

      // we need to copy it, so that multiple events don't have a reference to the same object 
      var copiedEventObject = $.extend({}, originalEventObject); 

      // assign it the date that was reported 
      copiedEventObject.start = date; 
      copiedEventObject.allDay = allDay; 

      // render the event on the calendar 
      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

      // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 

     } 
    });