最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

fullcalendar - Separate time groupings for weekdays and weekends - Stack Overflow

programmeradmin2浏览0评论

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}
      />
Share Improve this question asked Jan 18 at 13:35 JordanJordan 131 silver badge5 bronze badges 3
  • 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
Add a comment  | 

1 Answer 1

Reset to default 0

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.

发布评论

评论列表(0)

  1. 暂无评论