web-dev-qa-db-fra.com

Dans jquery fullcalendar, puis-je ajouter un nouvel événement sans rafraîchir tout le mois?

J'utilise jquery fullcalendar et cela fonctionne très bien. Mes événements viennent d'un appel ajax et sont renvoyés en json.

J'essaie de savoir s'il existe un moyen d'ajouter des événements du côté client sans actualiser le serveur entier.

J'ai la possibilité d'ajouter un nouvel événement dans mon code (ce qui l'ajoute à ma base de données) mais le seul moyen de rafraîchir l'interface utilisateur pour afficher ce nouvel événement est d'appeler refetchevents (mais cela recharge tout pour le mois précédent). le serveur.

Y a-t-il un moyen de coller des événements supplémentaires à tous les clients pour éviter une actualisation d'un mois?

Je vois que je peux supprimer les événements un à un avec la méthode removeEvents (avec un filtre id), mais je ne vois pas l'équivalent de l'ajout d'un événement.

Mettre à jour:

J'ai une question complémentaire à laquelle les réponses ci-dessous ont fonctionné. (cela n'avait pas de sens de créer une autre question). Je voulais voir la méthode recommandée pour "actualiser" un seul événement côté client. J'ai essayé d'appeler simplement "renderEvent" avec un événement avec le même ID, mais cela crée un nouvel événement sur le calendrier. 

Je vois qu'il y a la méthode: UpdateEvent qui, je suppose, serait la réponse, mais il semble que cela ne fonctionne que si vous êtes dans un eventClick (vous ne pouvez pas créer un nouvel objet événement, définir l'identifiant et le modifier un champ et appelez mise à jour.

 http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

Existe-t-il un moyen recommandé d'actualiser un événement côté client similaire à la logique d'événement "Ajouter Clientside" ci-dessous?

En ce moment, je suis juste en train de retirer et de lire dans un événement comme celui-ci:

       $('#calendar').fullCalendar('removeEvents', data.Event.id);
       $('#calendar').fullCalendar('renderEvent', data.Event, true);
jqueryfullcalendar
13
leora

pour ajouter des événements côté client dans le calendrier complet, vous pouvez appeler:

var myCalendar = $('#my-calendar-id'); 
myCalendar.fullCalendar();
var myEvent = {
  title:"my new event",
  allDay: true,
  start: new Date(),
  end: new Date()
};
myCalendar.fullCalendar( 'renderEvent', myEvent );

Je n'ai pas testé ce code, mais cela devrait faire le travail.

38
Charles Ovando

Voici le code que j'utilise:

function addCalanderEvent(id, start, end, title, colour)
{
    var eventObject = {
    title: title,
    start: start,
    end: end,
    id: id,
    color: colour
    };

    $('#calendar').fullCalendar('renderEvent', eventObject, true);
    return eventObject;
}
8
Sheridan

Que dis-tu de ça?

$("#calendar").fullcalendar('addEventSource', yourEvent);
4
patz

Le meilleur moyen que j'ai trouvé d'actualiser sans publication est 

 $('#calendar').fullCalendar('removeEvents', data[0].id);
 $('#calendar').fullCalendar('addEventSource', data);

Les données doivent être un identifiant ou un filtre pour "removeEvents" http://fullcalendar.io/docs/event_data/removeEvents/

Les données doivent être un tableau/une URL/une fonction pour 'addEventSource' http://fullcalendar.io/docs/event_data/addEventSource/

1
Adam Tremblay Lavoie

Vous n'avez pas besoin d'ajouter et de supprimer des événements pour les mettre à jour. Vous devez simplement extraire l'événement de calendar et le transmettre à la méthode updateEvent:

    function updateCalanderEvent(id, start, end, title, colour)
    {
        var eventObject = $('#calendar').fullCalendar( 'clientEvents', id )

        if (eventObject != null)
        {
            eventObject.title = title;
            eventObject.start = start;
            eventObject.end = end;
            eventObject.color = colour;

            $('#calendar').fullCalendar( 'updateEvent', eventObject );
        }
        return eventObject;
    }
0
Sheridan

pour ajax

function DeploySchedule(){
    $.ajax({
        type: "POST"
        , url: "/Services/ScheduleService.svc/DeploySchedule"
        , contentType: "application/json; charset=utf-8"
        , dataType: "json"
        , success: function (result) {
            $('#calendar').fullCalendar('removeEvents');

            result.forEach(function (_row) {
                var event = new Object();
                event.title = _row.TrackingNumber + " (" + _row.Worker + ")";
                event.start = _row.Date;
                event.WorkerGuid = _row.WorkerGuid;
                event.ScheduleGuid = _row.ScheduleGuid;
                event.TrackingNumber = _row.TrackingNumber;
                event.Worker = _row.Worker;
                $('#calendar').fullCalendar('renderEvent', event);
            });
        }
        , error: function (xhr, status, error) { // if error occure
            alert(xhr.responseText);
        }
        , complete: function () {
        }
    });
}
0
MyHealingLife

J'essayais de modifier un événement existant comme vous, mais dans mon cas, j'en ai besoin pour utiliser le même identifiant afin que je ne puisse pas supprimer l'événement et en créer un autre car cela ne fonctionne pas très bien ...

Suite à la documentation sur http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

Je compris que l'événement que vous devez passer aux phrases: $ ('# calendar'). fullCalendar ('updateEvent', eventObject); ne peut pas être un objet. Il devrait s'agir d'un événement de calendrier complet, c'est pourquoi il fonctionne bien pour un événement eventClick mais pas en dehors de ces événements.

Pour l'utiliser en dehors de l'événement fullCalendar, voici le code qui fonctionne pour moi:

function updateEvent(id, title, date) {

    i = id;

    /*This is the id of the event on full calendar,
    in my case i set this id when I create each event*/

    event = $('#calendar').fullCalendar( 'clientEvents', [i] )[0];
    /*This method returns an array of object with id == i
    That's why is necessary to aggregate [0] at the end 
    to get the event object.*/

    if (event != null){
        //make your modifications and update
        event.title = title;
        event.start = date;
        $('#calendar').fullCalendar( 'updateEvent', event );
    }
}

J'espère que ça marche pour n'importe qui!

0
Oswaldo