En jQuery fullcalendar, puis-je ajouter un nouvel événement sans rafraîchir tout le mois?
j'utilise jquery fullcalendar et il fonctionne très bien. Mes événements viennent d'un appel ajax et sont retournés en tant que json.
j'essaie de comprendre s'il y a un moyen d'ajouter des événements du côté du client sans rafraîchir tout le serveur.
j'ai la possibilité d'ajouter un nouvel événement dans mon code (qui l'ajoute à ma base de données) mais la seule façon de rafraîchir L'interface utilisateur pour montrer ce nouvel événement est d'appeler refetchevents (mais ceci recharge tout pour le mois de retour à partir du serveur.
est-ce qu'il y a quoi que ce soit que je peux coller dans les événements supplémentaires tout le côté client pour éviter un rafraîchissement d'événement d'un mois complet ?
je vois que je peux supprimer des événements un par un par la méthode removeEvents (avec un filtre id) mais je ne vois pas l'équivalent autour de l'ajout d'un événement.
mise à Jour:
j'ai une question de suivi étant donné les réponses ci-dessous qui ont toutes les deux fonctionné. (n'a pas de sens de créer une autre question). Je voulais voir la méthode recommandée pour" rafraîchir " un seul événement côté client. J'ai essayé de simplement appeler 'renderEvent' avec un événement avec le même Id, mais qui crée un nouvel événement sur le calendrier.
je vois là est la: UpdateEvent méthode qui je suppose serait la réponse mais il semble que cela ne fonctionne que si vous êtes à l'intérieur d'un eventClick (vous ne pouvez pas juste créer un nouvel objet event, définir L'Id et changer un champ et appeler update.
http://arshaw.com/fullcalendar/docs/event_data/updateEvent/
Est-il une façon recommandée de rafraîchir un événement du côté du client similaire à la logique de l'événement" ajouter du côté du client " ci-dessous?
en ce moment je ne fais que supprimer et lire dans l'événement comme ceci:
$('#calendar').fullCalendar('removeEvents', data.Event.id);
$('#calendar').fullCalendar('renderEvent', data.Event, true);
7 réponses
pour ajouter des événements côté client dans le fullCalendar 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.
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;
}
Que Diriez-vous de ceci?
$("#calendar").fullcalendar('addEventSource', yourEvent);
le meilleur moyen que j'ai trouvé pour rafraîchir sans postback est
$('#calendar').fullCalendar('removeEvents', data[0].id);
$('#calendar').fullCalendar('addEventSource', data);
Les données doivent être un ID ou un filtre pour 'removeEvents' http://fullcalendar.io/docs/event_data/removeEvents/
Données doivent être d'un Tableau/URL/Fonction pour "addEventSource' http://fullcalendar.io/docs/event_data/addEventSource/
Vous n'avez pas besoin d'ajouter ou de supprimer des événements pour les mettre à jour. Vous avez juste besoin de récupérer l'événement de calendar et de le passer à 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;
}
j'essayais d'éditer un événement existant comme vous, mais dans mon cas j'en ai besoin pour utiliser le même id pour que je ne puisse pas supprimer l'événement et en créer un autre parce que cela ne fonctionne pas très bien...
suivant la documentation sur http://arshaw.com/fullcalendar/docs/event_data/updateEvent/
j'ai compris que l'événement que vous devez passer aux phrases: $('#agenda").fullCalendar ("updateEvent", eventObject ); ne peut pas être n'importe quel objet. Il devrait être un événement de fullcalendar, c'est pourquoi il fonctionne très bien pour eventClick événement, mais pas en dehors de ces événements.
Pour l'utiliser en dehors de fullCalendar cas c'est le code, il 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 cela fonctionne pour n'importe qui!
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 () {
}
});
}