¿Cómo puedo cargar todos los eventos en el calendario usando Ajax?

Question

Quiero cargar todos los eventos en el calendario completo usando Ajax cuando hice clic en siguiente-anterior-botón en 'agenda-views'.

Supongo que cuando haga clic en el botón siguiente-anterior, enviaré la fecha actual ('ym-d') a la url: 'fetch-events.php' y luego devolverá el evento {id:, título :, empezar:, extremo:, AllDay:} datos de formato para la representación en el 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 no funciona en mi caso

Answer 1

Frank usted tiene la respuesta en el documento en línea FullCalendar: http://arshaw.com/fullcalendar/docs/event_data/events_function/

Answer 2

Desde el FullCalendar en línea Documentación

FullCalendar llamará a esta función cada vez que necesite nuevos datos de eventos. Esto se activa cuando el usuario hace clic en prev/next o cambia de vista.

Esta función se dará inicio y final parámetros, que son Moments que denota el rango necesita el calendario de eventos para.

zona horaria es una cadena/booleano que describe la zona horaria actual del calendario . Es el valor exacto de la opción timezone.

También se le dará callback, una función que se debe invocar cuando la función de evento personalizado ha generado sus eventos. Es la función del evento la responsabilidad de asegurarse devolución de llamada se está llamando con una matriz de Event Objects.

Este es un ejemplo que muestra cómo utilizar una función de eventos en busca de eventos de una hipotética fuente 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

---

he hecho algunos pequeños cambios:

$('#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); 
      } 
     }); 
    } 
}); 

Notas:start y endDEBE ser ISO 8601. Otro cambio fue el uso de format en lugar de unix (esto me hizo más fácil manejar el código subyacente)

Answer 3

Eche un vistazo a mi respuesta. ¡Me enfrenté al mismo problema y lo hice funcionar!Aquí está el enlace

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