Full Calendar show events as dots Full Calendar show events as dots javascript javascript

Full Calendar show events as dots


javascript jquery html css fullcalendar

Maybe, instead of getting hidden events, you could try to change events' style based on the view type. Then, in month view events would be dots.You could use the eventRender callback (https://fullcalendar.io/docs/eventRender)

You can also filter all client events loaded by the current view and get its properties using $('#calendar').fullCalendar('clientEvents', filter) (https://fullcalendar.io/docs/clientEvents)

javascript jquery html css fullcalendar

Run the snippet and see if that's what you wanted?

The CSS part:

  1. I added some new CSS which you can find after /* New CSS */ in the snippet. I commented out the #calendar .dot-event, but you can style the dots via .fc-month-view .fc-day .fc-event-dot. (I.e. I used the existing dots styles/class in FullCalendar)

The JS part:

  1. I removed the dayArray because it's not necessary. Then I set eventLimit to (and it must be) false. I also used eventAfterRender and not eventAfterAllRender, and the only JS I added are in the eventAfterRender callback function.

The HTML part:

Basically, no changes. (except those changed dynamically via JavaScript)

(You can also just compare my snippet with yours to see what changed.)

Show code snippet