React Scheduler Pro props

schedulerHeight

You can pass scheduler height, default height is 600px.

startHour

Day, week view start hour, default is 0.

endHour

Day, week view end hour, default is 23.

step

Pass time duration of day, week view, Its counted in minutes means 60 is equal to 1 hour duration e.g 60

locale

Locale of date-fns for localization. Default:enUS

timezone

Pass timezone according to your region e.g Asia/Karachi

weekStartsOn

starting day of the week it accepts An enum value from 0 to 6 (0 indicates Sunday and 6 indicates Saturday) default is 0 - Sunday

events

Events to show on scheduler.

fields

You have to pass four field object in fields prop indicating the fields labels e.g

<Scheduler
    fields={{
        id: '_id',
        subject: 'title',
        start: 'startDate',
        end: 'endDate',
        backgroundColor: '#F6F6F6'; //optional
        resourceId: 'doctor'; //required when resrouce mode
        allDay: 'isAllDay'; //optional
    }}
/>

These fields are important else the scheduler won't know how to access these fields of the event.

resources

Resources for events e.g

const resources = [
    { _id: 1, backgroundColor: '#0079FF', title: 'Board room' },
    { _id: 2, backgroundColor: '#FFA447', title: 'Training room' },
    { _id: 3, backgroundColor: '#F31559', title: 'Meeting room 1' },
    { _id: 4, backgroundColor: '#65C18C', title: 'Meeting room 2' },
];

<Scheduler
    resources={resources}
/>

resourceFields

Pass three field names for resource handling e.g

<Scheduler
    resourceFields={{
        id: '_id',
        title: 'title',
        backgroundColor: 'backgroundColor' //optional
    }}
/>

message

Change default messages of scheduler e.g

<Scheduler
    message={{
      today: 'آج',
      month: 'مہینہ',
      week: 'ہفتہ',
      day: 'دن',
      more: 'مزید',
    }}
/>

selectedDate

You can change scheduler selected date, default is current date e.g

<Scheduler
    selectedDate={new Date(2004, 7, 16)}
/>

views

Views to be rendered. default all views e.g

<Scheduler
    views={['day', 'week', 'month', 'workweek']}
/>

Note scheduler will only render view that you have passed in views array.

weekDays

modify default workweek days e.g

<Scheduler
    weekDays={{
      workweek: [1, 2, 4, 5],
    }}
/>

view

You can change default view using this prop e.g

<Scheduler
    view='month'
/>

default view is week.

hourFormat

Hour format for scheduler. formats: 12 or 24

modalSize

Modal size for form modal. sizes: sm, md, lg, xl

onView

Callback fired when change view.

<Scheduler
    onView={(props: onViewType) =>
        // do something
    }
/>

onClickEvent

Callback fired when click event item. This will disable default event popover that opens on click.

<Scheduler
    onClickEvent={(props: onClickEventType) =>
        // do something
    }
/>

onDoubleClickEvent

Callback fired when double click event item. This will disable default form modal that opens on double click.

<Scheduler
    onDoubleClickEvent={(props: onDoubleClickEventType) =>
        // do something
    }
/>

onSlot

Callback fired when clicked on time slot. This will disable default form modal, Using onSlot for custom logic of event form is recommended.

<Scheduler
    onSlot={(props: onSlotType) =>
        // do something
    }
/>

onNavigate

Callback fired when scheduler date value changes. It provides you some values i.e

<Scheduler
    onNavigate={(props: onNavigateType) => {--Your code logic--}}
/>

Props provided:

start: start date of scheduler range.
end: end date of scheduler range.
view: current view of scheduler.

onEditEvent

Callback fired when edit button is clicked in event popover

<Scheduler
    onEditEvent={({ event }: onEditEventType) => {
       // do something
    }}
/>

onDeleteEvent

Callback fired when delete button is clicked in event popover

<Scheduler
    onDeleteEvent={({ event }: onDeleteEventType) => {
       const evnts = [...events].filter((e) => e._id !== event._id);
       setEvents(evnts);
    }}
/>

slotPropGetter

Custom time slots according to your usage.

<Scheduler
    slotPropGetter={({ date }: slotGetterType) => {
        return date.getHours() < 10
          ? { styles: { backgroundColor: '#D20062', color: 'white' } }
          : date.getHours() > 15
          ? { styles: { backgroundColor: '#BED7DC' } }
          : { styles: {} };
    }}
/>

eventFormContext

Scheduler provides you a ready to use workflow for event form you only have to pass a form component e.g

<Scheduler
    eventFormContext={({
          toggle,
          date,
          event,
          resource,
        }: eventFormContextType) => {
        return (
        <div className="--classnames--">
            <form>
                <input type="text" value={} />
                <div>
                    <lable>start</label>
                    <Flatpickr
                        name="startDate"
                        value={date || event.startDate}
                    />
                </div>
                <div>
                    <lable>end</label>
                    <Flatpickr
                        name="endDate"
                        value={date || event.endDate}
                        />
                </div>
                <button type="submit">
                    Save
                </button>
            </form>
        </div>
        );
    }}
/>

Props provided:

resource Resource of the clicked slot.
date Date time of the cell that have triggered this form modal on click event.
event If a user have clicked on edit event then you can access that here.
toggle Toggle function is used to close the form modal e.g when you save event you close modal by running this toggle function.
view It also provides you the current view of the scheduler.

resourceTemplate

You can customize your resource header e.g

<Scheduler
    resourceTemplate={({ resource }: any) => (
        <div
         style={{
           backgroundColor: resource.backgroundColor,
           height: '100%',
           color: 'white',
           fontWeight: '900',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
         }}
        >
          {resource.title}
        </div>
    )}
/>

eventTemplate

You can customize your event item e.g

<Scheduler

        eventTemplate={({
          event,
          hasNext,
          hasPrevious,
          styles,
          view,
        }: eventItemType) => {
          return (
            <div
              className={
                view === 'month'
                  ? 'h-100'
                  : 'p-2 h-100'
              }
              style={{
                backgroundColor: `rgba(${event.backgroundColor.rgb?.r}, ${event.backgroundColor.rgb?.g}, ${event.backgroundColor.rgb?.b}, 0.6)`,
                color: '#1d1d1d',
                textAlign: 'start',
                borderLeft: `7px solid rgba(${event.backgroundColor.rgb?.r}, ${event.backgroundColor.rgb?.g}, ${event.backgroundColor.rgb?.b}, 1)`,
              }}
            >
              <div>{event.name}</div>
              <div>
                <time className="fs-12">
                  <span>{format(new Date(event.startDate), 'hh:mm a')}</span>
                  <span className="mx-1">-</span>
                  <span>{format(new Date(event.endDate), 'hh:mm a')}</span>
                </time>
              </div>
              <div>
                <svg
                  width="80px"
                  height="80px"
                  viewBox="0 0 1024 1024"
                  className="icon"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M948.1 702c-13.8 0-20.7-9.8-25.7-17-5.1-7.3-7.7-10.2-12.7-10.2s-7.5 3-12.7 10.2c-5.1 7.2-12 17-25.7 17s-20.7-9.8-25.7-17c-5.1-7.3-7.7-10.2-12.7-10.2-5 0-7.5 3-12.7 10.2-5.1 7.2-12 17-25.7 17-13.8 0-20.7-9.8-25.7-17-5.1-7.3-7.7-10.2-12.7-10.2-4.4 0-8-3.6-8-8s3.6-8 8-8c13.8 0 20.7 9.8 25.7 17 5.1 7.3 7.7 10.2 12.7 10.2 5 0 7.5-3 12.7-10.2 5.1-7.2 12-17 25.7-17 13.8 0 20.7 9.8 25.7 17 5.1 7.3 7.7 10.2 12.7 10.2 5 0 7.5-3 12.7-10.2 5.1-7.2 12-17 25.7-17s20.7 9.8 25.7 17c5.1 7.3 7.7 10.2 12.7 10.2 4.4 0 8 3.6 8 8s-3.6 8-8 8zM948.1 652c-13.8 0-20.7-9.8-25.7-17-5.1-7.3-7.7-10.2-12.7-10.2s-7.5 3-12.7 10.2c-5.1 7.2-12 17-25.7 17s-20.7-9.8-25.7-17c-5.1-7.3-7.7-10.2-12.7-10.2-5 0-7.5 3-12.7 10.2-5.1 7.2-12 17-25.7 17-13.8 0-20.7-9.8-25.7-17-5.1-7.3-7.7-10.2-12.7-10.2-4.4 0-8-3.6-8-8s3.6-8 8-8c13.8 0 20.7 9.8 25.7 17 5.1 7.3 7.7 10.2 12.7 10.2 5 0 7.5-3 12.7-10.2 5.1-7.2 12-17 25.7-17 13.8 0 20.7 9.8 25.7 17 5.1 7.3 7.7 10.2 12.7 10.2 5 0 7.5-3 12.7-10.2 5.1-7.2 12-17 25.7-17s20.7 9.8 25.7 17c5.1 7.3 7.7 10.2 12.7 10.2 4.4 0 8 3.6 8 8s-3.6 8-8 8z"
                    fill="#9A2D2F"
                  />
                  ....
                  <path
                    d="M770 475.2c-10.5-19-28.4-35.6-54.5-50.8-21.1-12.3-47-18.2-72.3-20.5 52.7-6.8 93.5 14.2 111.1 23.3 2.7 1.4 4.8 2.5 6.5 3.2 1.8 0.8 7.2 3.2 11.5-1 2.1-2.1 3.6-5.9 1.5-10.4-6.6-13.9-15-29.8-29.5-43.6-17.1-16.3-39.5-26-66.6-28.8-30.2-3.1-64.8 6.7-100.1 28.4-15.3 9.4-27.6 19-35.3 25.6-7.1-7.7-18.5-19.2-33-30.4-33.2-25.8-66.9-38-97.4-35.2-67.6 6.2-92.2 49.4-102.7 67.8-2.5 4.3-1.2 8.2 0.7 10.4 4 4.4 9.5 2.4 11.4 1.8 1.7-0.6 3.9-1.6 6.7-2.8 18.4-7.9 61.2-26.3 113.9-15.2-28.6-0.8-57.7 1.5-79.7 10.5-23.4 9.6-41.4 25.3-53.4 46.9-10.1 18.1-15.5 39.7-15.7 62.5 0 3.8 2.4 7 5.9 8 0.8 0.2 1.6 0.3 2.4 0.3 4.5 0 6.8-4 8.2-6.3 12.5-21.3 30.2-37.9 52.8-49.3 40.8-20.7 94.2-23.2 158.7-7.6l-59.6 486.5c-0.3 2.3 0.4 4.6 1.9 6.3s3.7 2.7 6 2.7h52.5c4.3 0 7.8-3.3 8-7.6l24.9-485.6c65.6-9 119.2-2.1 159.5 20.6 33.1 18.7 46.5 42.3 50.9 50.1 1.4 2.5 3.7 6.6 8.4 6.6 0.6 0 1.3-0.1 2-0.2 3.5-0.8 6-3.8 6.3-7.5 1.3-22.8-2.5-41.6-11.9-58.7z m-94-112.5c39.4 4.1 59.5 22.9 72.8 44.1-16.3-7.7-41-17.2-71.4-19.5-30.9-2.4-61.2 3.2-90.6 16.6-12 5.5-23.8 12.3-35.5 20.3-0.2 0.1-0.3 0.2-0.5 0.3l-0.1 0.1s0.7-7.7 1-10.9c2.4-2 5.3-4.5 8.7-7.1C584.1 388 630.3 358 676 362.7z m-267.5 15.2h-1.1c-30.3 0.2-55.4 7.8-72.3 14.3 4.8-6.3 10.4-12.5 17.3-18.1 16.2-13.2 36-20.7 60.8-22.9 47.3-4.4 91.9 34.4 112.5 55.6 2 2.1 3.8 3.9 5.3 5.6 0.1 3.9 0.1 11.7 0.1 11.7-10.3-8.3-20.8-15.5-31.5-21.6-28.9-16.4-59.4-24.6-91.1-24.6zM355 455.6c-16.4 8.3-30.5 19-42.3 32.1 5.8-23.2 20.3-50.8 55.4-65.1 17.2-7 39.7-9.5 62.8-9.5 22 0 44.6 2.2 63.5 4.8 9.7 5.7 19.5 12.6 29.4 20.8 2.7 2.2 5.4 4.6 8.1 7l0.1 2.6v0.2c-3.1-0.8-6.1-1.5-9.1-2.2-67.5-16-123.9-12.9-167.9 9.3z m159.2 486.2h-35.8l58.2-475.4h0.2c0.6 0.2 1.2 0.2 1.7 0.3l-24.3 475.1zM722 471.3c-31.3-17.7-69.6-26.5-114.5-26.5-16.5 0-33.8 1.2-52 3.6-2.4 0.3-4.9 0.7-7.4 1l0.3-3.1c2.5-2 5-3.9 7.5-5.7 11.8-8.6 23.4-15.5 34.7-20.9 35.9-2.4 83.7-0.7 116.8 18.5C731 452 746.9 466.6 756 483c4 7.2 6.8 14.8 8.4 23.1-9.1-10.8-22.6-23.6-42.4-34.8z"
                    fill="#9A2D2F"
                  />
                </svg>
              </div>
            </div>
          );
        }}
/>

Props provided:

event Event Item to render with customized styling or anything else
view Current view of scheduler
hasNext If event is multiday
hasPrevious If event is multiday

eventPopoverTemplate

You can pass your own customized event popover e.g

<Scheduler
    eventPopoverTemplate={({event, togglePopover}: eventPopoverType) => {
      return (
        <div className="--customize-popover--">
          <div>{event.name}</div>
          <div onClick={togglePopover} className="--customize-popover--">
            X
          </div>
        </div>
      );
    }}
/>

It provides you two props event, togglePopover

event Event item to show on popover i.e title, date etc.
togglePopover Toggle function to close popover.