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.
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}
/>
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.
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}
/>
- 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. – ADyson Commented Jan 20 at 9:48
- Position them next to each other and you might get pretty close to the layout you were imagining. – ADyson Commented Jan 20 at 9:48
- 1 @ADyson worked like a charm! Thanks a bunch. Feel free to submit an answer, I'll mark it as the solution. – Jordan Commented Jan 20 at 11:10
1 Answer
Reset to default 0The 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.