Search code examples
fullcalendar

Separate time groupings for weekdays and weekends

I have configured the timeGridWeek view to have time groupings on the left, 6-2, 2-10, 10-6 specifically. This works great for weekdays, but on weekends I want to change the groupings to 6am-6pm, and 6pm-6am, ideally inserting another column between Friday and Saturday to achieve this. calendar view

I have tried a few things, including a custom view. I could not figure out how to either, extend an existing view, or, create my own view, but with the calendar. I'm not sure exactly what I expected here, it's quite a niche application so I anticipated some custom functionality, but not sure where to go from here. I'm using React.

Is there a way to do this?

<FullCalendar
        schedulerLicenseKey="redacted"
        plugins={[
          dayGridPlugin, 
          timeGridPlugin, 
          interactionPlugin, 
          timeLinePlugin, 
          resourceTimelinePlugin,
          scrollGridPlugin
        ]}
        timeZone="GMT"
        initialView={view}
        firstDay={1}
        headerToolbar={showToolbar ? {
          left: allowNavigation ? 'prev,next today' : '',
          center: 'title',
          right: allowNavigation ? 'timeGridWeek,timeGridDay,dayGridMonth' : ''
        } : false}
        events={events}
        contentHeight={750}
        eventClick={handleEventClick}
        slotMinTime="06:00:00"
        slotMaxTime="30:00:00"
        expandRows={true}
        stickyHeaderDates={true}
        nowIndicator={nowIndicator}
        slotDuration="08:00:00"
        slotLabelInterval="08:00:00"
        slotLabelFormat={(arg: { date: { marker: Date } }) => {
          const hour = arg.date.marker.getHours();
          if (hour === 7) return '6-2';
          if (hour === 15) return '2-10';
          return '10-6';
        }}
        allDaySlot={false}
        dayHeaderFormat={{
          weekday: view === 'dayGridMonth' ? 'short' : 'short',
          day: view === 'dayGridMonth' ? 'numeric' : 'numeric',
          omitCommas: true
        }}
        views={{
          dayGridMonth: {
            dayHeaderFormat: { weekday: 'long' }
          },
          timeGridWeek: {
            dayHeaderFormat: { weekday: 'short', day: showDateNumbers ? 'numeric' : undefined }
          },
          timeGridDay: {
            dayHeaderFormat: { weekday: 'long', day: showDateNumbers ? 'numeric' : undefined, month: 'long' }
          },
          timeGridMonth: {
            type: 'timeGrid',
            duration: { months: 1 },
            dayMinWidth: 150,
            buttonText: 'timeline',
            dayHeaderFormat: {
              weekday: 'short',
              day: 'numeric',
              month: 'short',
              omitCommas: true
            },
            eventMaxStack: 6,
            eventContent: (arg) => {
              const content = renderEventContent({ event: arg.event });
              return {
                html: `<div class="event-content-wrapper">${
                  typeof content === 'string' ? content : ReactDOMServer.renderToString(content as ReactElement)
                }</div>`
              };
            }
          }
        }}
        eventClassNames={(arg) => eventClassNames?.({ event: arg.event }) || ''}
        eventContent={(arg) => renderEventContent({ event: arg.event })}
        dayMaxEvents={true}
      />
Solution

  • The time slots apply to the whole grid. You cannot set different slots for different days of the week unfortunately.

    The only way I can think of to get the effect you're thinking of would actually be to have two calendars on the page, one showing mondays-fridays and the other set to keep in sync (e.g. by listening for events from the other calendar such as the date range changing) and show only weekend days related to the week currently being displayed on the main calendar. You could then set different slot times on the weekend calendar. Position them next to each other and you might get pretty close to the layout you were imagining.