While working on web applications, we always come across a requirement to have events calendar (like google calendar) to give user a better idea of planned events.

For this, we are using fullcalendar.io,which is a jQuery plugin to show events in a full-sized calendar. It provides following basic views,

  1. Month view
  2. Agenda Week view – Same as google calendar week view, shows events as per schedules times in particular day.
  3. Agenda Day view – Same as agenda week view, but for one day only.
  4. Basic week and day view – list of events scheduled on the specific day, without showing them as per scheduled time.

While using this, We faced two issues,

  1. In agenda week/day view, when we use timely events (With allDay: false) it is showing duplicate events in other days as well. This works fine in basic week/day views.
    While fixing this, we found that there is no bug in the plugin itself, but the bug is because of the moment.js version. So we have updated the version for moment.js.
  2. We want to change the styling of the event element in week/day view.
    To fix this, we have overridden the styling.

Following is the code,