CODEWITHSUNDEEP
fullcalendarfullcalendar-3
Chris
Chris

Reputation: 1428

FullCalendar Does not re-render after updateEvents

My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.

When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.

I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.

const events = [{
    title: 'All Day Event',
    start: TODAY
  },
  {
    title: 'Long Event',
    start: TODAY,
    end: NEXTDAY
  }
]

$("#calendar").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  events
})

$("#events").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  defaultView: 'listMonth',
  events
})

// Now add a new one
events.push([{
  title: 'Event added',
  start: YESTERDAY
}])

$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)

Here's a recreation of the issue:

https://jsfiddle.net/Kikketer/7d92utp5/

The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.

Upvotes: 0

Views: 2569

Answers (2)

Phạm Đạt
Phạm Đạt

Reputation: 1

For fullCalendar v3, you can apply this way to re-render calendar:

var calendar = $('#calendar').fullCalendar({
// calendar options...
});

// Rerender the calendar
function rerenderCalendar() {
// Destroy the calendar
calendar.fullCalendar('destroy');

// Reinitialize the calendar with new options or updated events
calendar.fullCalendar({
// new calendar options...
});
}

// Call the rerenderCalendar function whenever you want to rerender the calendar
rerenderCalendar();

Upvotes: 0

akcoban
akcoban

Reputation: 973

firstly change your pushing event to object from array.

events.push({
   title: 'Event added',
   start: YESTERDAY
});

Now, you have many choice to do that. I will write 2 way for you.

a.

$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);

https://jsfiddle.net/7d92utp5/49/

b. 1) Change events param to function

$("#calendar").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  // at here
  events: function (start, end, timezone, callback) {
    callback(events);
  }
});

2) Use refetchEvents instead updateEvents

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

https://jsfiddle.net/7d92utp5/53/

Upvotes: 2

Related Questions