Search code examples
javascriptcalendarfullcalendarfullcalendar-scheduler

Showing availability calendar in a line for an entire month for multiple items

what I am trying to do is the following: Calendar with availability for multiple items

It would be nice if I could use fullcalendar or fullcalendar-scheduler but show rooms (or items) with their daily availability, not hourly.

I tried to extend fullcalendar-scheduler but was not able to show days instead of hours.

This is fullcalendar-scheduler

Could you suggest a javascript library or something similar that I can work with (or even extend)?

Thank you!

Solution

  • You can get something which is functionally equivalent, and visually extremely similar to your screenshot by using the built-in "timelineMonth" view:

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'timelineMonth'
        },
        defaultView: "timelineMonth",
//etc

    See the example here https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/demos/scale.html (click on the "month" tab). See also https://fullcalendar.io/docs/views/Available_Views/ where the existence of this view is documented.