jquery fullcalendar invia parametri personalizzati e aggiorna il calendario con JSON

Question

im cercando di utilizzare il jquery fullcalendar. I dati dell'evento provengono dal server utilizzando JSON. La mia pagina ha un elemento a tendina e il div fullcalendar.

Quello che mi serve è aggiornare il calendario ogni volta che l'utente cambia il menu a discesa. Il valore selezionato della discesa dovrebbe essere pubblicato al server, al fine di recuperare i nuovi dati relativi agli eventi

Ecco il mio codice

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

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

    }); 

Il codice di cui sopra però non lavorare. Qualche aiuto?

Answer 1

provare questo:

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

Non sono riuscito a farlo funzionare. Così ho finito con una soluzione simile a questo:

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

Answer 3

Infine ha funzionato con il seguente codice:

$(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 4

rinfresco in questo modo dopo un evento ajax aggiunge un evento utilizzando un modale, per esempio:

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

Answer 5

Questo può essere ottenuto utilizzando la funzione come origine evento. Durante l'evento refetchEvents, fullCalendar chiama la funzione che restituisce il valore personalizzato e lo invierà al servizio.

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

Il problema è che si sta modificando il valore della discesa dopo aver creato l'oggetto evento, che ha una copia del valore originario della discesa. Quello che segue è quello che vi serve:

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

Questo si basa sul oggetto evento viene creato in una zona dove è possibile accedervi dal onchange discesa e l'inizializzazione fullcalendar (ad es onload documento)

Answer 7

ho risolto come questo

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

dopo aver modificato i valori date_start e date_end, questa funzione ottiene i nuovi valori. Nel mio caso mi prendo le date in cui la vista cambia

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

Answer 8

Questo funziona su almeno 2.0.2. data diventa una funzione che restituisce un oggetto popolato con valori di dropdown dinamici. change viene aggiunto per aggiornare il calendario quando viene selezionato un nuovo valore di discesa.

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

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

Answer 9

Ho appena incontrato questo me stesso e non c'è un modo più dinamico di fare questo in quanto il valore viene memorizzato quando il calendario viene inizializzato ei dati oggetto deve modificati.

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