Come posso caricare tutti gli eventi sul calendario usando Ajax?

Question

Voglio caricare tutti gli eventi sul calendario completo utilizzando Ajax quando ho fatto clic su pulsante successivo- in "vista-agenda".

Immagino, quando farò clic sul pulsante next-previous, quindi invierò la data corrente ('ym-d') a url: 'fetch-events.php' quindi restituirà l'evento {id:, titolo :, inizio:, end:, AllDay:} formattare i dati per il rendering sul calendario

$('#calendar').fullCalendar({ 

    header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
    }, 
    selectable: false, 
    selectHelper: false, 
    editable: false, 

    events: // on-click next-previous button load events using Ajax 
      // post date using Ajax, then query to fetch all events and return data 

}); 

jSON non funziona nel mio caso

Answer 1

Frank si ha la risposta al documento in linea FullCalendar: http://arshaw.com/fullcalendar/docs/event_data/events_function/

Answer 2

Dal fullCalendar in poi linea Documentazione

FullCalendar chiamerà questa funzione ogni volta che ha bisogno di nuovi dati di evento. Viene attivato quando l'utente fa clic su prev/next o cambia visualizzazione.

Questa funzione sarà dato inizio e fine parametri, che sono Moments denota l'intervallo del calendario deve eventi per.

fuso orario è una stringa/booleana che descrive il fuso orario corrente del calendario . È il valore esatto dell'opzione timezone.

Sarà anche dato richiamata, una funzione che deve essere chiamato quando la funzione di evento personalizzato ha generato i suoi eventi. È compito dell'evento garantire che la richiamata venga chiamata con una serie di Event Objects.

Ecco un esempio che mostra come utilizzare una funzione di evento per recuperare eventi da un ipotetico feed XML:

$('#calendar').fullCalendar({ 
    events: function(start, end, timezone, callback) { 
     $.ajax({ 
      url: 'myxmlfeed.php', 
      dataType: 'xml', 
      data: { 
       // our hypothetical feed requires UNIX timestamps 
       start: start.unix(), 
       end: end.unix() 
      }, 
      success: function(doc) { 
       var events = []; 
       $(doc).find('event').each(function() { 
        events.push({ 
         title: $(this).attr('title'), 
         start: $(this).attr('start') // will be parsed 
        }); 
       }); 
       callback(events); 
      } 
     }); 
    } 
}); 

Source

---

ho fatto alcune piccole modifiche:

$('#calendar').fullCalendar({ 
    events: function(start, end, timezone, callback) { 
     jQuery.ajax({ 
      url: 'schedule.php/load', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       start: start.format(), 
       end: end.format() 
      }, 
      success: function(doc) { 
       var events = []; 
       if(!!doc.result){ 
        $.map(doc.result, function(r) { 
         events.push({ 
          id: r.id, 
          title: r.title, 
          start: r.date_start, 
          end: r.date_end 
         }); 
        }); 
       } 
       callback(events); 
      } 
     }); 
    } 
}); 

Note:start e endDEVE essere ISO 8601. Un altro cambiamento è stato l'uso di format invece di unix (questo ha reso più facile per me gestire il code behind)

Answer 3

Ehi dai un'occhiata alla mia risposta. Ho affrontato lo stesso problema e l'ho fatto funzionare!Ecco il link

Maping Events to FullCalender using JSON

Answer 4

This is perfect way to load data properly. 

// if you want to empty events already in calendar. 
$('#calendar').fullCalendar('destroy'); 

$.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 external events 
-----------------------------------------------------------------*/ 
$('#external-events div.external-event').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 
    }); 
}); 

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