{"id":2073,"date":"2016-06-15T11:44:40","date_gmt":"2016-06-15T06:14:40","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=2073"},"modified":"2020-12-10T16:51:19","modified_gmt":"2020-12-10T11:21:19","slug":"fullcalendar-javascript-event-calendar-duplicate-events","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/fullcalendar-javascript-event-calendar-duplicate-events\/","title":{"rendered":"FullCalendar\u200a -\u200a Javascript Event Calendar\u200a – Duplicate Events"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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

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

    While using this, We faced two issues,<\/h2>\n\n\n\n
    1. In agenda week\/day view, when we use timely events (With allDay: false<\/i><\/b><\/code>) 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<\/i><\/a>. So we have updated the version for moment.js<\/i><\/b>.<\/li>
    2. We want to change the styling of the event element in week\/day view.
      To fix this, we have overridden the styling.<\/li><\/ol>\n\n\n\n

      Following is the code,