Documentation

Use and Setup

1.) To install react-big-schedule, use your preferred package manager:

# npm
npm install react-big-schedule

# yarn
yarn add react-big-schedule

# pnpm
pnpm add react-big-schedule

# bun
bun add react-big-schedule

2.) Import dependencies

import { Scheduler, SchedulerData, ViewType, DATE_FORMAT } from "react-big-schedule";
import dayjs from "dayjs";
import "react-big-schedule/dist/css/style.css";

3.) Basic Usage

const schedulerData = new SchedulerData(new dayjs().format(DATE_FORMAT), ViewType.Week);

//set locale dayjs to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States).
schedulerData.setSchedulerLocale('pt-br'); // this uses dayjs, but it doesn't require dayjs to be installed as its called dynamically

schedulerData.setResources([
  { id: 'r0', name: 'Resource0', groupOnly: true },
  { id: 'r1', name: 'Resource1' },
  { id: 'r2', name: 'Resource2', parentId: 'r0' },
  { id: 'r3', name: 'Resource3', parentId: 'r4' },
  { id: 'r4', name: 'Resource4', parentId: 'r2' },
]);

// the event array should be sorted in ascending order by event.start property
// otherwise there will be some rendering errors
schedulerData.setEvents([
  {
    id: 1,
    start: '2022-12-18 09:30:00',
    end: '2022-12-19 23:30:00',
    resourceId: 'r1',
    title: 'I am finished',
    bgColor: '#D9D9D9',
  },
  {
    id: 2,
    start: '2022-12-18 12:30:00',
    end: '2022-12-26 23:30:00',
    resourceId: 'r2',
    title: 'I am not resizable',
    resizable: false,
  },
  {
    id: 3,
    start: '2022-12-19 12:30:00',
    end: '2022-12-20 23:30:00',
    resourceId: 'r3',
    title: 'I am not movable',
    movable: false,
  },
  {
    id: 4,
    start: '2022-12-19 14:30:00',
    end: '2022-12-20 23:30:00',
    resourceId: 'r1',
    title: 'I am not start-resizable',
    startResizable: false,
  },
  {
    id: 5,
    start: '2022-12-19 15:30:00',
    end: '2022-12-20 23:30:00',
    resourceId: 'r2',
    title: 'R2 has recurring tasks every week on Tuesday, Friday',
    rrule: 'FREQ=WEEKLY;DTSTART=20221219T013000Z;BYDAY=TU,FR',
    bgColor: '#f759ab',
  },
]);

// ...

//3. render the scheduler component, mind that the Scheduler component should be placed in a DragDropContext(father or ancestor).

<Scheduler
  schedulerData={schedulerData}
  prevClick={this.prevClick}
  nextClick={this.nextClick}
  onSelectDate={this.onSelectDate}
  onViewChange={this.onViewChange}
  eventItemClick={this.eventClicked}
/>;

API

SchedulerData

SchedulerData is the view model of Scheduler, we can modify it to control the view of the Scheduler.

constructor

constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
                showAgenda = false, isEventPerspective = false,
                newConfig = undefined, newBehaviors=undefined
                localeDayjs = undefined)

• date is a string in YYYY-MM-DD format, and is the initial date Scheduler will render. Take the date 2022-12-20 for example, Scheduler will render the time window of the week from 2022-12-18 to 2022-12-24 in ViewType.Week view type, and will render the time window of the 2022-12 month in ViewType.Month view type.
• viewType is the initial view type, now Scheduler supports Day, Week, Month, Quarter, Year 5 built-in view types, in addition Scheduler now supports Custom, Custom1, Custom2 3 custom view types at the same time, in which you can control the time window yourself, refer to this example. viewType, showAgenda and isEventPerspective are a group which should be contained in the SchedulerData.config.views array, and they together decide which view should be rendered. When showAgenda and isEventPerspective are both false, Scheduler will render the resource view, refer to this example.
• showAgenda is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is read only.
• isEventPerspective is a bool value, if true, Scheduler will display the task view of current view type. In resource view, every slot(row) describes how many events a resource does in the time window, while in task view, every slot describes how many events a big task is divided into and who will make it done. Add a groupId and groupName property to every event object, so that the events having the same groupId will belong to the same big task and be rendered in the same slot in task view. If groupId and groupName are not provided, SchedulerData will take the id as the groupId, and take the title as the groupName. See the eventsForTaskView in the sample1.ts for details.
• newConfig is a config object, used to override the default config fully or partly.
• newBehaviors is a config object, used to override the default behaviors fully or partly.
• localeDayjs is a locale dayjs object, which is unified used in react-big-scheduler. If not provided, Scheduler will come with English(en, United States) locale strings.

Using SchedulerData with React state

SchedulerData is mutable; its methods (prev, next, setDate, setViewType, setEvents, ...) notify the Scheduler, which re-renders itself. With a functional component, keep the same instance in state and call the methods in your handlers, then call setState with a new object only if you need the parent to re-render too:

const [schedulerData, setSchedulerData] = useState(() => new SchedulerData(dayjs(), ViewType.Week));

const prevClick = data => {
  data.prev();
  data.setEvents(events);
  setSchedulerData(Object.assign(Object.create(Object.getPrototypeOf(data)), data)); // optional
};

Vertical resource view

ViewType.VerticalResource shows resources as columns and time as rows. Events render and drag-to-create works across resources and time slots. Drag an event to another resource column and/or time row to move it (moveEvent receives the resource as slotId), and drag its top or bottom edge to change its start or end (updateEventStart / updateEventEnd). Row height grows with the number of overlapping events, like the horizontal views. Refer to this example.

Drop preview

While an event, task or resource is dragged over a row, the cells where it would be placed are highlighted. Configure it in the SchedulerData config: dropPreviewEnabled (default true), dropPreviewClassName and dropPreviewStyle (an inline style object, e.g. { border: '2px dashed #52c41a', background: 'rgba(82, 196, 26, 0.16)' }). Refer to this example.

Weekly / monthly columns

Columns are days or hours by default. A custom view (ViewType.Custom, Custom1, Custom2) picks its own cadence through behaviors.getCustomDateFunc, which returns cellUnit: CellUnit.Week, CellUnit.Month, CellUnit.Quarter or CellUnit.Year along with the date range. Events then span the week/month cells they overlap. Header text comes from nonAgendaWeekCellHeaderFormat / nonAgendaMonthCellHeaderFormat / nonAgendaQuarterCellHeaderFormat / nonAgendaYearCellHeaderFormat (use | to split a header into lines). Per-cell totals come from behaviors.getSummaryFunc. Refer to this example.

Theming

Every colour comes from CSS variables, so a theme is a few lines. Set config.theme (or <Calendar theme="dark">) to default (transparent, follows the page behind it), dark or light, or override the variables on any ancestor:

.my-app {
  --rbs-accent: #7c3aed;
  --rbs-surface: #fffdf8;
  --rbs-border: #e5e0d8;
  --rbs-radius: 10px;
}

Variables: --rbs-surface, --rbs-text, --rbs-muted, --rbs-border, --rbs-accent, --rbs-accent-fg, --rbs-hover, --rbs-radius, --rbs-now, --rbs-group-bg, --rbs-nonworking-bg.

Calendar (month, week, day, list, year)

import { Calendar } from 'react-big-schedule';
import 'react-big-schedule/dist/css/style.css';

<Calendar
  events={[{ id: 1, title: 'Standup', start: '2026-10-12T09:00', end: '2026-10-12T09:30' }]}
  initialView="dayGridMonth"
  views={['dayGridMonth', 'timeGridWeek', 'timeGridDay', 'listWeek', 'multiMonthYear']}
  editable
  selectable
  nowIndicator
  businessHours
  timeZone="UTC"
  onEventDrop={({ event }) => save(event)}
/>

Views: dayGridMonth, dayGridWeek, dayGridDay, timeGridWeek, timeGridDay, listDay, listWeek, listMonth, listYear, multiMonthYear, multiMonthStack, multiMonthContinuous. events is an array, a function (range, signal) => events, or a JSON feed { url, params }; add more with eventSources. Recurring events use rrule (RFC 5545) or recurrence: { daysOfWeek, startTime, endTime }; display: 'background' paints behind other events. Callbacks: onEventClick, onDateClick, onSelect, onEventDrop, onEventResize, onDatesSet, onLoading, onEventsError.

setSchedulerLocale

setSchedulerLocale(preset);

Used to set locale to the scheduler, it uses dayjs locales (List of supported locales) and it is loaded on demand.

preset will be locale imported from dayjs.

example:

import * as dayjsLocale from 'dayjs/locale/pt-br';

setSchedulerLocale(dayjsLocale);

The locale is kept per SchedulerData instance, so several schedulers (and your own dayjs usage) can use different locales without affecting each other.

By default, Scheduler comes with English(en, United States)

setResources

setResources(resources);

Used to set the resources(the slots in resource view), make sure that there are no duplicated resource.id in the resources. See the demo resources in the sample1.ts.

setEvents

setEvents(events);

Used to set the events. the event array should be sorted in ascending order by event.start property. See the demo events in the sample1.ts. If we use the task view, we'd better add the groupId and the groupName property to each event object, see the eventsForTaskView in the sample1.ts for details.

Event Date Formats

Events support both YYYY-MM-DD HH:mm:ss datetime strings and YYYY-MM-DD date-only strings for start and end. Date-only events are treated as spanning the full calendar day. Month view and the other scheduler views handle both formats consistently.

prev

prev();

Let the time window scroll to the left once. When SchedulerData,viewType is ViewType.Month, the time window will scroll a month, when SchedulerData,viewType is ViewType.Week, the time window will scroll a week. SchedulerData.events will be clear after calling this method.

next

next();

Let the time window scroll to the right once. SchedulerData.events will be clear after calling this method.

setDate

setDate((date = dayjs().format(DATE_FORMAT)));

Let the time window jump to the provided date directly. SchedulerData.events will be clear after calling this method.

setViewType

setViewType((viewType = ViewType.Week), (showAgenda = false), (isEventPerspective = false));

Tell SchedulerData to change current view, the viewType, showAgenda and isEventPerspective group should be provided, and should be contained in the SchedulerData.config.views array. SchedulerData.events will be clear after calling this method.

setEventGroups

setEventGroups(eventGroups);

Used to set the event groups(the slots in task view), make sure that there are no duplicated eventGroup.id in the eventGroups. This method is optional, and is needed only when SchedulerData.eventGroupsAutoGenerated is false.

setEventGroupsAutoGenerated

setEventGroupsAutoGenerated(autoGenerated);

Tell SchedulerData to generate SchedulerData.eventGroups automatically or not. If true, SchedulerData will generate the event groups(slots) automatically according to the event.groupId and 'event.groupName' automatically. If groupId and 'groupName' are not provided, SchedulerData will take event.id and event.title instead.

setMinuteStep

setMinuteStep(minuteStep);

Used to set minute step for daily view and refresh the render data.

toggleExpandStatus

toggleExpandStatus(slotId);

Used to toggle slot's(and its children's) expand status.

getMinuteStepsInHour

getMinuteStepsInHour();

Used to get minute steps in an hour, it equals 60 / SchedulerData.config.minuteStep.

addResource

addResource(resource);

Add the resource to the SchedulerData.resources, make sure that resource.id is not duplicated. Refer to this example.

addEventGroup

addEventGroup(eventGroup);

Add the eventGroup to the SchedulerData.eventGroups, make sure that eventGroup.id is not duplicated. Please note that the eventGroup added may be override when SchedulerData.eventGroupsAutoGenerated is true and SchedulerData.eventGroups is auto-generated.

addEvent

addEvent(newEvent);

Add the newEvent to the SchedulerData.events, make sure that newEvent.id is not duplicated. SchedulerData will place the newEvent in the right index according to the newEvent.start property.

updateEventStart

updateEventStart(event, newStart);

Update the newStart to the event.start, newStart is a string in YYYY-MM-DD HH:mm:ss format(similarly hereinafter). SchedulerData will replace the event in the right index according to the newStart value.

updateEventEnd

updateEventEnd(event, newEnd);

Update the newEnd to the event.end.

moveEvent

moveEvent(event, newSlotId, newSlotName, newStart, newEnd);

Update the newSlotId, newSlotName, newStart, newEnd of the event. In resource view, new slot is a resource, while in task view, new slot is a event group. SchedulerData will replace the event in the right index according to the newStart value.

removeEvent

removeEvent(event);

Remove the given event from SchedeulerData.events.

removeEventById

removeEventById(eventId);

Remove event from SchedeulerData.events by the given event id.

getSlots

getSlots();

Returns the slot array, SchedulerData.resources in resource view, SchedulerData.eventGroups in task view.

getSlotById

getSlotById(slotId);

Returns the slot by slotId, returns undefined if not found.

getResourceById

getResourceById(resourceId);

isEventInTimeWindow

isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd);

Returns whether an event is in the time window or not, remind that eventStart, eventEnd, windowStart, windowEnd are all dayjs | Date objects.

getViewDates

getViewDates();

Returns an object with the startDate and endDate of the currently selected view ({ startDate: Dayjs, endDate: Dayjs }).

getViewStartDate

getViewStartDate();

Returns a dayjs object with the startDate of the currently selected view.

getViewEndDate

getViewEndDate();

Returns a dayjs object with the endDate of the currently selected view.

Locale support(Refer to this example for details.)

SchedulerData.config.resourceName

The locale string of resource name.

SchedulerData.config.taskName

The locale string of task name.

SchedulerData.config.agendaViewHeader

The locale string of agenda view header.

SchedulerData.config.addMorePopoverHeaderFormat

The locale string of add more popover header format.

SchedulerData.config.eventItemPopoverDateFormat

The locale string of event item popover date format.

SchedulerData.config.nonAgendaDayCellHeaderFormat

The locale string of non-agenda view cell header format of day view type.

SchedulerData.config.nonAgendaOtherCellHeaderFormat

The locale string of non-agenda view cell header format of other view types.

SchedulerData.behaviors.getDateLabelFunc

Used to resolve the locale string of date label of Scheduler component.(Refer to the getDateLabel func for example)

SchedulerData.config(See the config file for details.)

schedulerWidth

The width of Scheduler. Scheduler uses responsive layout so schedulerWidth should be a percentage.

The Scheduler renders inside a container that is width: 100% and max-height: 100% of its parent, so it fills the parent and follows it when resized (it measures that container with a ResizeObserver). Resource columns keep their configured width and the time columns stretch to fill the rest.

To size it differently, pass className (e.g. tailwind classes) or style to the Scheduler component, for example <Scheduler className="w-1/2 max-h-150" ... />. Those win over the defaults, which have zero CSS specificity. When the parent has a fixed height the Scheduler scrolls inside it, otherwise it grows to fit its rows.

responsiveByParent

Only needed to make the Scheduler's height follow a parent element: pass that element through the parentRef prop of the Scheduler component. Without parentRef the window height is used.

schedulerMaxHeight

The max height of Scheduler. If the desired height is bigger than the max height, the header row of Scheduler will be frozen and vertical scroll bar will appear, but this won't happen when the max height is set to 0. Refer to this example.

If you are using responsiveByParent, you can omit this setting or set it to 0 to ensure the Scheduler height conforms to the parent container. When conforming to the parent container, the Scheduler will fill the available space and scroll bars will appear as needed.

underneathHeight

When using responsiveByParent, this property allows you to reserve space beneath the Scheduler (for example, for a footer or other fixed elements). The Scheduler's height will be reduced by this amount, ensuring it does not overlap with content below. Set this to the pixel height you want to reserve at the bottom of the parent container.

Example: If your parent container is 600px tall and underneathHeight is 50, the Scheduler will use up to 550px of height.

tableHeaderHeight

Height of Scheduler table header.

agendaResourceTableWidth

Width of the left Scheduler resource column in agenda view.

agendaMaxEventWidth

Max width of an event item in agenda view.

dayResourceTableWidth, weekResourceTableWidth, monthResourceTableWidth, yearResourceTableWidth, quarterResourceTableWidth

Width of the left Scheduler resource column in resource view and task view of different view types.

dayCellWidth, weekCellWidth, monthCellWidth, yearCellWidth, quarterCellWidth

Width of Scheduler table cells in resource view and task view of different view types.

dayMaxEvents, weekMaxEvents, monthMaxEvents, yearMaxEvents, quarterMaxEvents

Max events count of a cell in resource view and task view of different view types. A '+N more' will appear when exceeded. Refer to this example.

eventItemHeight

Height of an event item in 3 views.

eventItemLineHeight

Line height of an event item in 3 views.

nonAgendaSlotMinHeight

Min height of a slot in non-agenda views, default 0, means there is no min height.

dayStartFrom

Start hour rendered from in ViewType.Day in resource view and task view, default 0.

dayStopTo

End hour rendered to in ViewType.Day in resource view and task view, default 23.

defaultEventBgColor

Default event item background color in 3 views, will be override if there is a bgColor property in event object.

selectedAreaColor

Selected cells color in resource view and task view, cells are selectable only when creatable is true.

nonWorkingTimeHeadColor

Color of non-working time head cells. Modify SchedulerData.behaviors.isNonWorkingTimeFunc to re-define non-working time. Refer the isNonWorkingTime func in the behaviors.ts.

nonWorkingTimeHeadBgColor

Background color of non-working time head cells.

nonWorkingTimeBodyBgColor

Background color of non-working time body cells.

summaryColor

Color of cell summary. Modify SchedulerData.behaviors.getSummaryFunc to display summary in a cell. Refer the getSummary func in the behaviors.ts.

summaryPos

Position of cell summary, supports SummaryPos.Top, SummaryPos.TopRight, SummaryPos.TopLeft, SummaryPos.Bottom, SummaryPos.BottomRight and SummaryPos.BottomLeft.

startResizable

Controls whether to resize the start of every event item in resource view and task view. If false, all item starts are non-resizable, if true, all item starts are resizable except those who have a resizable or startResizable property and its value is false.

endResizable

Controls whether to resize the end of every event item in resource view and task view. If false, all item ends are non-resizable, if true, all item ends are resizable except those who have a resizable or endResizable property and its value is false.

movable

Controls whether to move every event item in resource view and task view. If false, all items are non-movable, if true, all items are movable except those who have a movable property and its value is false.

creatable

Controls whether to create new event item in resource view and task view.

crossResourceMove

Controls whether to cross-slot move an event item in resource view and task view. If false, the slotId and slotName won't change in the moveEvent method. Refer to this example.

checkConflict

Controls whether to check conflicts when creating, resizing or moving an event item in resource view and task view. If true, Scheduler will call the conflictOccurred function if given. Refer to this example.

scrollToSpecialDayjsEnabled

Controls Scheduler whether to scroll to special dayjs automatically when the time window contains special dayjs. If true, Scheduler horizontal bar will scroll to special dayjs after calling setScrollToSpecialDayjs(true) to SchedulerData. Use SchedulerData.behaviors.getScrollSpecialDayjsFunc to tell Scheduler what time the special dayjs is.

eventItemPopoverEnabled

Controls Scheduler whether to display event item popover when moving mouse on an event item, default true.

eventItemPopoverTrigger

Controls Scheduler event item popover trigger, default hover. Controls Scheduler whether to display event item popover when moving mouse on an event item, default true.

eventItemPopoverPlacement

Controls Scheduler event item popover placement ('topLeftMousePosition' | 'bottomLeftMousePosition' | 'topRightMousePosition' | 'bottomRightMousePosition' | 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'), default bottomLeft.

eventItemPopoverWidth

Controls Scheduler event item popover width. Should be taken into account when you set eventItemPopoverPlacement to one of the ...MousePosition options and you set your own event item popover by setting eventItemPopoverTemplateResolver as eventItemPopoverWidth is used to determine when the event item popover content goes off the screen so the popover can be adjusted accordingly. Defaults to 300.

calendarPopoverEnabled

Controls Scheduler whether to display calendar popover when clicking on a date label in header, default true.

recurringEventsEnabled

Controls Scheduler whether to support recurring event, refer to this feature request, default true. If true, SchedulerData will filter out those template events who has a rrule string property in setEvents method, generate the recurring events in the time window, and insert them into the event array in the right orders. The recurring events generated from the same template event, all have a new id like ${templateEvent.id}-${number}, and have a recurringEventId property with the value templateEvent.id.

headerEnabled

Controls Scheduler whether to display header, default true.

resourceViewEnabled

Controls Scheduler whether to display resource view, default true.

displayWeekend

Controls Scheduler whether to display weekends in non-agenda view, default true.

relativeMove

Controls Scheduler whether to move events(only DnDTypes.EVENT type) relatively or absolutely, default true, means relatively.

minuteStep

Minute step for day view type in non-agenda view, can be 10, 12, 15, 20, 30, 60, etc, default 30.

views

Array of view that Scheduler will support.

dragAndDropEnabled

Controls whether the dragAndDrop funcionality is enabled. If false there's no need for the withDnDContext wrapper function.

SchedulerData.behaviors(See the behaviors.ts for details.)

getEventTextFunc

getEventTextFunc(schedulerData, event);

Method that defines the text displayed in the event.

isNonWorkingTimeFunc

isNonWorkingTimeFunc(schedulerData, time);

Method that defines non-working time.

getSummaryFunc

getSummary(schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd);

Method that defines the summary text displayed in the Scheduler cells.Refer to this example.

getCustomDateFunc

getCustomDate(schedulerData, num, (date = undefined));

Method that controls the start and end of time window when current view type is Custom, Custom1 or Custom2.Refer to this example.

getNonAgendaViewBodyCellBgColorFunc

getNonAgendaViewBodyCellBgColor(schedulerData, slotId, header);

Method that sets the background color of cells dynamically.

getScrollSpecialDayjsFunc

getScrollSpecialDayjs(schedulerData, startDayjs, endDayjs);

Method that defines the special dayjs Scheduler will scroll to automatically, when the time window contains that dayjs.

Scheduler.propTypes

schedulerData

schedulerData: PropTypes.object.isRequired;

View model of the Scheduler component, provides data.

parentRef

parentRef: PropTypes.object;

ref of the component that is the parent of the Scheduler component

className

className: PropTypes.string;

Class names for the Scheduler's container (e.g. tailwind classes such as w-1/2 max-h-[600px]). They override the default width: 100% / max-height: 100%.

style

style: PropTypes.object;

Inline style for the Scheduler's container.

prevClick

prevClick: PropTypes.func.isRequired;
prevClick(schedulerData);

Callback function fired when the left point bracket '<' is clicked.

nextClick

nextClick: PropTypes.func.isRequired;
nextClick(schedulerData);

Callback function fired when the right point bracket '>' is clicked.

onViewChange

onViewChange: PropTypes.func.isRequired;
onViewChange(schedulerData, view);

Callback function fired when the Scheduler view changed. view is a json such as { viewType: ViewType.Month, showAgenda: true, isEventPerspective: false}.

onSelectDate

onSelectDate: PropTypes.func.isRequired;
onSelectDate(schedulerData, date);

Callback function fired when a new date is selected. date is the new selected data, a string in YYYY-MM-DD format.

eventItemClick

eventItemClick: PropTypes.func;
eventItemClick(schedulerData, event);

Callback function fired when you click an event item.

updateEventStart

updateEventStart: PropTypes.func;
updateEventStart(schedulerData, event, newStart);

Callback function fired when resizing the start of the event, newStart is a string in YYYY-MM-DD HH:mm:ss format.

updateEventEnd

updateEventEnd: PropTypes.func;
updateEventEnd(schedulerData, event, newEnd);

Callback function fired when resizing the end of the event, newEnd is a string in YYYY-MM-DD HH:mm:ss format.

moveEvent

moveEvent: PropTypes.func;
moveEvent((schedulerData, event, slotId, slotName, newStart, newEnd));

Callback function fired when moving the event. slotId, slotName are the new id and name of the slot moving into, but they won't change if the SchedulerData.config.crossResourceMove is false. newStart, newEnd are the new beginning and ending of the event.

newEvent

newEvent: PropTypes.func;
newEvent(schedulerData, slotId, slotName, start, end, type, item);

Callback function fired when creating a new event, or dragging an external item and dropping it into the resource view or task view. slotId and slotName are the slot creating in or dropping into, start, end are the beginning and ending of the event. If it's a drag&drop operation, the type is the DnDType of DnDSource registered to Scheduler, and the item is the external item.

leftCustomHeader, rightCustomHeader

leftCustomHeader: PropTypes.object;
rightCustomHeader: PropTypes.object;

Component you need to put in the Scheduler header, it could be a div or a react component. Refer to this example.

conflictOccurred

conflictOccurred: PropTypes.func;
conflictOccurred(schedulerData, action, event, type, slotId, slotName, start, end);

Callback function fired when there is a conflict. This could happen when creating, resizing or moving an event, and when
SchedulerData.config.checkConflict is true.

eventItemTemplateResolver

eventItemTemplateResolver: PropTypes.func;
eventItemTemplateResolver(schedulerData, event, bgColor, isStart, isEnd, mustAddCssClass, mustBeHeight, agendaMaxEventWidth);

Use this function, you can customize the event style. Refer to this example.

eventItemPopoverTemplateResolver

eventItemPopoverTemplateResolver: PropTypes.func;
eventItemPopoverTemplateResolver(schedulerData, eventItem, title, start, end, statusColor);

Use this function, you can customize the event's popover style. Refer to this example.

slotItemTemplateResolver

slotItemTemplateResolver: PropTypes.func;
slotItemTemplateResolver(schedulerData, slot, slotClickedFunc, width, clsName);

Use this function, you can customize the left slot style. The returned element is rendered inside the resource cell, so a resource name can be any React node:

<Scheduler
  schedulerData={schedulerData}
  slotItemTemplateResolver={(schedulerData, slot, slotClickedFunc, width, clsName) => (
    <div className={clsName} style={{ width }} onClick={() => slotClickedFunc?.(schedulerData, slot)}>
      <Avatar size="small" src={slot.avatar} /> <b>{slot.slotName}</b>
    </div>
  )}
/>

nonAgendaCellHeaderTemplateResolver

nonAgendaCellHeaderTemplateResolver: PropTypes.func;
nonAgendaCellHeaderTemplateResolver(schedulerData, item, formattedDateItems, style);

Use this function, you can customize the table header cell style. Refer to this example.

onScrollLeft, onScrollRight

onScrollLeft: PropTypes.func;
onScrollLeft(schedulerData, schedulerContent, maxScrollLeft);
onScrollRight: PropTypes.func;
onScrollRight(schedulerData, schedulerContent, maxScrollLeft);

Callback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to this example.

onScrollTop, onScrollBottom

onScrollTop: PropTypes.func;
onScrollTop(schedulerData, schedulerContent, maxScrollTop);
onScrollBottom: PropTypes.func;
onScrollBottom(schedulerData, schedulerContent, maxScrollTop);

Callback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to this example.

slotClickedFunc

slotClickedFunc: PropTypes.func;

If it's set, slots will be clickable, and will fire this function when a slot is clicked. Refer to this example.

dndSources

dndSources: PropTypes.array;

DnDSource array that registered to Scheduler. Use DnDSource, we can simplify the drag and drop coding in React-Big-Scheduler. Refer to this example.

onSetAddMoreState

onSetAddMoreState: PropTypes.func;
onSetAddMoreState(newState);

Callback function fired when a '+N more' is clicked, is used to control the visibility and the position of the AddMorePopover. newState is a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer to this example.

subtitleGetter

subtitleGetter: PropTypes.func;
subtitleGetter(schedulerData, event);

Use this function, you can display a subtitle in the EventItemPopover.

viewEventClick

viewEventClick: PropTypes.func;
viewEventClick(schedulerData, event);

Callback function fired when you click one operation link in the EventItemPopover. The operation link won't appear if this function isn't set.

viewEventText

viewEventText: PropTypes.string;

Text of one operation link in the EventItemPopover. The operation link won't appear if this text isn't set.

viewEvent2Click

viewEvent2Click: PropTypes.func;
viewEvent2Click(schedulerData, event);

Callback function fired when you click the other operation link in the EventItemPopover. The other operation link won't appear if this function isn't set.

viewEvent2Text

viewEvent2Text: PropTypes.string;

Text of the other operation link in the EventItemPopover. The other operation link won't appear if this text isn't set.