web-dev-qa-db-fra.com

jquery fullcalendar envoyer un paramètre personnalisé et actualiser le calendrier avec JSON

je suis en train d'essayer d'utiliser le calendrier complet jQuery. Les données d'événement proviennent du serveur à l'aide de JSON . Ma page comporte un élément déroulant et le div de calendrier complet.

Ce dont j'ai besoin, c'est d'actualiser le calendrier chaque fois que l'utilisateur modifie la liste déroulante. La valeur sélectionnée du menu déroulant doit être publiée sur le serveur afin d'extraire les nouvelles données d'événement.

Voici mon code

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

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

    });

Le code ci-dessus ne fonctionne cependant pas. De l'aide?

jqueryjsonfullcalendar
28
geo

essaye ça:

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

});
29
Jairo Cordero

Enfin, cela a fonctionné avec le code suivant:

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

    });
32
geo

J'actualise cette méthode après qu'un événement ajax ait ajouté un événement à l'aide d'un modal, par exemple

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

Cela fonctionne au moins 2.0.2. data devient une fonction qui retourne un objet rempli de valeurs de liste déroulante dynamique. change est ajouté pour actualiser le calendrier lorsqu'une nouvelle valeur de liste déroulante est sélectionnée.

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

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

Le problème est que vous modifiez la valeur de la liste déroulante après avoir créé l'objet événement, qui a un copy de la valeur d'origine de la liste déroulante. Voici ce dont vous avez besoin:

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

Cela repose sur la création de l’objet événement dans une zone accessible depuis le menu déroulant et l’initialisation complète du calendrier (par exemple, document onload).

2
tocallaghan

J'ai résolu comme ça

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

après avoir modifié les valeurs date_start et date_end, cette fonction récupère les nouvelles valeurs . Dans mon cas, je prends les dates auxquelles la vue change

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

Je l'ai fait en utilisant ceci: 

$('#calendar').fullCalendar( 'destroy' );

quand je sélectionne une autre option dans le menu déroulant, je ne sais pas si c'est élégant mais ça marche!

0
Amber Gondal

Je ne pouvais pas que cela fonctionne non plus. Je me suis donc retrouvé avec une solution semblable à celle-ci:

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

Je viens de le rencontrer moi-même et il existe un moyen plus dynamique de le faire, car la valeur est stockée lorsque le calendrier est initialisé et que l'objet de données doit être modifié.

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

    });
0
Larry
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    
});
0
Jigs17

Ceci peut être réalisé en utilisant function comme source d'événement. Sur l'événement refetchEvents, fullCalendar appelle une fonction qui renvoie une valeur personnalisée et l'envoie au service.

$(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();
{
0
vadim