fullcalendar - is there a way to replace the contents of day headings in list view?

251 Views Asked by At

day headings

hello. I was wondering if any of you know how to change fullcalendar's day headings in list view? I've searched the docs back and forth and so far have gotten nothing yet.

a bit about what i'm trying to do. I'm making a daily activity report app, so that users can fill in their attendance & record their activities, and will be reviewed by admins afterwards. these admins can set which days are working days and are not. in a single day, there can only be a single event, which is the user's daily report. in the event object given to fullcalendar, I pass the type of day.

I wanted to differentiate how headings look for those two types of days. I've tried eventRender and get the previous sibling, the header, but turns out they aren't loaded together yet and thus not detected.

an alternative method was modifying the list after it's done loading, but I haven't found the event listener for that yet.

i'm using fullcalendar v4. here's list view docs : https://fullcalendar.io/docs/v4/list-view

[EDIT] here's a codepen to fiddle around in : https://codepen.io/hmsungkar/pen/mdPoaYQ (copied from docs above, changed view & events to fit my needs)

var eventsJSON = [
    {
      "title": "Event #1",
      "start": "2020-09-01"
    },
    {
      "title": "Event #2",
      "start": "2020-09-02"
    },
]
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'list' ],
    timeZone: 'UTC',
    defaultView: 'listMonth',

    header: {
      left: 'title',
      center: '',
      right: ''
    },
    events: eventsJSON
});
calendar.render();

thank you. sorry if it's a bit messy.

0

There are 0 best solutions below