React Calendar Scheduler

Setup

npm i react-calendar-timeline-scheduler

For styles use import 'react-calendar-timeline-scheduler/dist/index.css';

Day (ResourceTimelineView)

Week timeline (TimeGridView)

Month (MonthView)

View all

Toolbar

• Customise your own by passing toolbar attribute

<Scheduler toolbar={ReactElement} />

Attributes

<Scheduler
          date={currentDate}
          calendarEvents={events}
          calendarResources={resources}
          resourceEnabled={false}
          editable={true}
          selectable={true}
          slotDuration={15}
          currentTimeLine={true}
          onEventClick={handleEventClick}
          onEventChange={handleEventChange}
          onSlotSelect={handleSlotSelect}
          onDateChange={handleDateChange}
          onViewChange={handleViewChange}
          onNewEvent={handleNewEvent}
          businessHours={[
            {
              daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
              startTime: '08:00',
              endTime: '18:00',
            },
          ]}
          translations={{
            day: 'Day',
            week: 'Week',
            month: 'Month',
            today: 'Today',
            previous: 'Previous',
            next: 'Next',
            resourceTitle: 'Rooms',
            moreButtonLabel: 'more',
            allEventsTitle: 'All Events',
            newEvent: 'New Event',
          }}
        />