मैं अजाक्स का उपयोग करके कैलेंडर पर सभी घटनाओं को कैसे लोड कर सकता हूं?

Question

मैं अजाक्स का उपयोग करके पूर्ण-कैलेंडर पर सभी ईवेंट लोड करना चाहता हूं, जब मैंने 'एजेंडा-व्यू' में अगली-पिछली-बटन पर क्लिक किया।

मुझे लगता है कि, अगले-पिछले बटन पर कब क्लिक करेगा, तो मैं वर्तमान दिनांक ('ym-d') url पर भेजूंगा: 'fetch-events.php' तो यह ईवेंट {id:, title : शुरू:, अंत:, allday:} प्रारूप डेटा

$('#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 के लिए मेरे मामले

Answer 1

फ्रैंक में काम नहीं कर आप FullCalendar ऑनलाइन दस्तावेज़ में इस सवाल का जवाब है: http://arshaw.com/fullcalendar/docs/event_data/events_function/

Answer 2

पूर्ण कैलेंडर से चालू लाइन प्रलेखन

पूर्ण कैलेंडर इस ईवेंट को जब भी नए ईवेंट डेटा की आवश्यकता होगी, कॉल करेगा। यह तब ट्रिगर होता है जब उपयोगकर्ता पिछली/अगली क्लिक करता है या दृश्यों को स्विच करता है।

इस समारोह शुरू और अंत मानकों, जो कर रहे हैं Moments रेंज कैलेंडर के लिए घटनाओं की जरूरत को संकेतित दिया जाएगा।

टाइमज़ोन एक स्ट्रिंग/बूलियन है जो कैलेंडर के वर्तमान टाइमज़ोन का वर्णन करता है। यह timezone विकल्प का सटीक मान है।

इसे कॉलबैक भी दिया जाएगा, एक फ़ंक्शन जिसे पर कॉल किया जाना चाहिए, कस्टम इवेंट फ़ंक्शन ने अपनी घटनाएं उत्पन्न की हैं। यह फ़ंक्शन की ज़िम्मेदारी सुनिश्चित करने के लिए कॉलबैक Event Objects की एक सरणी के साथ कहा जा रहा है।

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

---

मैं कुछ छोटे परिवर्तन किए:

यहाँ कैसे एक काल्पनिक XML फ़ीड से घटनाओं को लाने के लिए एक घटना समारोह का उपयोग करने के दिखा एक उदाहरण है

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

नोट्स:start और endISO 8601 हो। एक और परिवर्तन formatunix के बजाय का उपयोग करते हैं

Answer 3

अरे मेरा उत्तर पर एक नजर है (यह मेरे कोड-पीछे से निपटने के लिए के लिए आसान बना दिया) था। मुझे एक ही समस्या का सामना करना पड़ा और इसे काम करने के लिए मिला!यहाँ लिंक

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