jquery fullcalendar कस्टम पैरामीटर भेजता है और JSON

Question

के साथ कैलेंडर रीफ्रेश करता है I jquery fullcalendar का उपयोग करने का प्रयास कर रहा हूं। इवेंट डेटा JSON का उपयोग कर सर्वर से आता है। मेरे पृष्ठ में एक ड्रॉपडाउन तत्व और fullcalendar div है।

जब भी उपयोगकर्ता ड्रॉपडाउन बदलता है तो कैलेंडर को रीफ्रेश करने के लिए मुझे क्या चाहिए। लटकती के चयनित मूल्य आदेश नई घटना डेटा

लाने के लिए में सर्वर पर पोस्ट किया जाना चाहिए यहाँ मेरी कोड

 $(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      events: { 
       url : '/myfeed', 
       data : {personId : $('#personDropDown').val() } 
      } 
     }); 

     $('#personDropDown').change(function(){ 
      $('#calendar').fullCalendar('refetchEvents'); 
     }); 

    }); 

कोड ऊपर तथापि does not काम है। कोई मदद?

Answer 1

इस प्रयास करें:

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     events: { 
      url: '/myfeed', 
      data: function() { // a function that returns an object 
       return { 
        personId: $('#personDropDown').val(), 
       }; 

      } 
     }); 


    $('#personDropDown').change(function() { 
     $('#calendar').fullCalendar('refetchEvents'); 
    }); 

}); 

Answer 2

मैं इसे काम करने के लिए नहीं मिला।

$(document).ready(function() { 
     loadCalendar(); 
     $('#siteSelect').change(function(){ 
      var selectedSite = $('#siteSelect').val(); 
      var events = { 
        url: '/myfeed2', 
        type: 'POST', 
        data: { 
        siteid: selectedSite 
        } 
      } 
      $('#calendar').fullCalendar('removeEventSource', events); 
      $('#calendar').fullCalendar('addEventSource', events); 
     }); 

    }); 

Answer 3

अंत में यह निम्न कोड के साथ काम किया: तो मैं इस के समान समाधान के साथ समाप्त हो गया:

$('#cal').fullCalendar('removeEvents'); 
$('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php") 
$('#cal').fullCalendar('rerenderEvents'); 

Answer 4

मैं इस तरह से ताज़ा करने के बाद एक ajax घटना उदाहरण के लिए एक मॉडल का उपयोग कर एक घटना जोड़ता है:

$('#personDropDown').change(function() { 
      var source = { 
       data: { 
        filter: $('#personDropDown').val() 
       }, 
       url : '/myfeed' 
      }; 
      $('#calendar').fullCalendar('removeEvents'); 
      $('#calendar').fullCalendar('addEventSource', source); 
     }); 

Answer 5

यह ईवेंट स्रोत के रूप में फ़ंक्शन का उपयोग करके हासिल किया जा सकता है। RefetchEvents ईवेंट पर पूर्ण कैलेंडर कॉल फ़ंक्शन जो कस्टम मान देता है और इसे सेवा पर पोस्ट करेगा।

$(document).ready(function() { 
     $('#valueSelect').change(function(){ 
      if ($('#calendar').hasClass('fc')) 
      { 
       $('#calendar').fullCalendar('refetchEvents'); 
      } 
      else 
      { 
       $('#calendar').fullCalendar({ 
        events: function(start, end, callback) { 
         $.ajax({ 
          url: 'web-service-link', 
          type: 'GET', 
          dataType: "json", 
          contentType: "application/json; charset=utf-8", 
          data: { 
           start: Math.round(start.getTime()/1000), 
           end: Math.round(end.getTime()/1000), 
           customValue: GetCustomValue() 
          } 
         }); 
        } 
       }); 
      } 
     }); 
}); 

function GetCustomValue() 
{ 
    return $('#valueSelect').val(); 
{ 

Answer 6

समस्या यह है कि आप लटकती का मूल्य बदल रहे हैं तुम्हारे जाने के बाद घटना वस्तु है, जो लटकती के मूल मूल्य का एक प्रतिलिपि है बनाया है है। निम्नलिखित तुम क्या जरूरत है:

$('#dropdownId').change(function() { 
    events.data.customParam = $(this).val(); 
    $('#calendar').fullCalendar('refetchEvents'); 
}); 

इस घटना वस्तु एक ऐसा क्षेत्र है जहां यह लटकती onchange और FullCalendar initialisation (जैसे दस्तावेज़ ऑनलोड)

Answer 7

मैं की तरह हल से पहुँचा जा सकता में बनाया जा रहा पर निर्भर करता है यह

  data: function() { // a function that returns an object 
     return { 
       custom_param1: date_start, 
      custom_param2: date_end 
      }; 
     }, 

मूल्यों को संशोधित करने के बाद date_start और date_end, यह फ़ंक्शन नए मान प्राप्त करता है। मेरे मामले में मैं दिनांकों ले जब दृश्य में परिवर्तन

viewRender: function(view,element){ 
     date_start = $.fullCalendar.formatDate(view.start,'dd/MM/yyyy'); 
     date_end = $.fullCalendar.formatDate(view.end,'dd/MM/yyyy'); 
}, 

Answer 8

इस पर काम करता है कम से कम 2.0.2। data एक ऐसा फ़ंक्शन बन जाता है जो डायनामिक ड्रॉपडाउन मानों के साथ पॉप्युलेट ऑब्जेक्ट देता है। change कैलेंडर को रीफ्रेश करने के लिए जोड़ा जाता है जब कोई नया ड्रॉपडाउन मान चयनित होता है।

$("#calendar").fullCalendar({ 
    events: { 
     url: "/myfeed", 
     data: function() { 
      return { 
       dynamicValue: $("#dropdownList").val() 
      }; 
     }, 
     type: "POST" 
    } 
}); 

$("#dropdownList").change(function() { 
    $("#calendar").fullCalendar("refetchEvents"); 
}); 

Answer 9

मैं सिर्फ अपने आप को इस में भाग गया और वहाँ ऐसा करने के बाद से मूल्य जब कैलेंडर आरंभ नहीं हो जाता संग्रहीत किया जाता है और डेटा संशोधित जरूरतों वस्तु का एक और अधिक गतिशील तरीका है।

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      events: { 
       url : '/myfeed', 
       data : {personId : $('#personDropDown').val() } 
      } 
     }); 

     $('#personDropDown').change(function(){ 
      $('#calendar').data('fullCalendar').options.events.data.personId = $(this).val(); 
      $('#calendar').fullCalendar('refetchEvents'); 
     }); 

    }); 

Answer 10

This is right way. 

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