Fullcalendar: Keep event properties after previous/next click

问题

Goal: I am using Fullcalendar with the agendaWeek view. What I need to do is to click on a couple of events from a certain week (to change their color) and then click next to go to the following week and select a couple of other events.

Problem: Whenever I click next the old events (form the week before) are losing their properties that I give to them. For example, I change their color and add a property of active (custom property to know which events are currently selected). Here's my code

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaWeek,agendaDay'
  },
  allDaySlot:false,
  editable: false,
  events: link_here,

  eventClick: function(calEvent, jsEvent, view) {
    if(calEvent.active)
    {

      calEvent.active=false;

      current_lessons= current_lessons.replace(calEvent.class_date+calEvent.class_id+"$",'');
    }

    else
    {
      calEvent.title="clicked";

      calEvent.active=true;
      current_lessons+=calEvent.class_date+calEvent.class_id+"$";
    } 
   if($(this).hasClass('active'))
    $(this).removeClass('active');
  else $(this).addClass('active');

  }
});

The active class is used to color the elements. So again what is happening is that events are getting colored, they are gaining a new property of active set to true, then once I click on next and get back, all events are uncolored and have the active property as false.

How can I solve this problem? I searched a lot but did not find what I want exactly. Thank you in advance.

回答1:

The solution for this problem in case someone else faces it is that Fullcalendar, when working with a JSON generated data from URL, the events will be refetched from the URL each time you go to another week using next/previous, thus the event properties will be reset. The solution is to actually have an array for the event source. I discovered this by going into the javascript file and reading part of the code. It have tried it with an array and it did not result in the same error, though I tried it on a small array, I will try it on a large dataset and see if it is a success.

回答2:

I've had same problem using fullcalendar. I noticed if you call to renderEvent method:

app.calendarObj.fullCalendar("renderEvent", {
      "start": "someDateTime",
      "end": "otherDateTime"
    });

And you add true as second parameter in this method event will keep on your calendar even when you change trough months.

app.calendarObj.fullCalendar("renderEvent", {
      "start": "someDateTime",
      "end": "otherDateTime"
    },true);

回答3:

Try to force fullcalendar to update the event after modifying it:

this.$("#calendar").fullCalendar('updateEvent', calEvent);

If the issue remains, maybe fullcalendar is not getting the right reference.. Then, try this:

// get specif event (reference)
var specificEvent = $('#calendar').fullCalendar('clientEvents', calEvent.id);
this.$("#calendar").fullCalendar('updateEvent', specificEvent);

来源：https://stackoverflow.com/questions/18374143/fullcalendar-keep-event-properties-after-previous-next-click

标签

jquery

html

css

fullcalendar