React Big Schedule

The SchedulerData class is used to manage the state of the scheduler, including the current date, view type, resources, events, and locales.

Key methods include:

• setResources(resources: Array): Defines the resources (e.g., people, rooms) available in the scheduler. Resources can have a parentId to create hierarchies or groupOnly: true to act as a group.
• setEvents(events: Array): Sets the list of scheduled events. Important: The event array must be sorted in ascending order by the event.start property to avoid rendering errors.
• setSchedulerLocale(locale: string): Sets the dayjs locale for the scheduler.
• setCalendarPopoverLocale(locale: string): Sets the Ant Design locale for the calendar popover.

Events can include properties like resizable, movable, and startResizable (set to false to disable these interactions) and rrule for recurring tasks.

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

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

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',
  },
]);

The SchedulerData.config object allows extensive customization of the scheduler's layout and behavior. Key configuration areas include:

Layout & Sizing

• schedulerWidth: Percentage width of the scheduler (e.g., '100%').
• responsiveByParent: If true, responsiveness is based on the parent container width (requires passing parentRef to the Scheduler component).
• schedulerMaxHeight: Sets max height. If exceeded, the header freezes and a scrollbar appears. Set to 0 to conform to parent height when using responsiveByParent.
• underneathHeight: Reserves pixel space at the bottom of the parent container to prevent overlap with footers.
• tableHeaderHeight, agendaResourceTableWidth, dayCellWidth, etc.: Control specific dimension values for various views.

Event & Interaction Settings

• startResizable / endResizable: Controls if event boundaries can be resized.
• movable: Controls if events can be dragged.
• creatable: Controls if new events can be created via interaction.
• checkConflict: If true, triggers the conflictOccurred callback during creation, resizing, or moving.
• crossResourceMove: If false, moveEvent will not change the slotId or slotName.
• recurringEventsEnabled: Enables/disables support for recurring events via rrule strings.
• dragAndDropEnabled: Enables/disables drag and drop functionality.

When config.creatable is enabled, users can create new events by clicking and dragging across the resource view. This triggers specific callbacks:

1. newEvent: Called when a valid selection is made. It provides the schedulerData, slotId, slotName, startTime, endTime, and an options object containing resourceIds (supporting multi-resource events if more than one resource is selected).
2. conflictOccurred: Called if config.checkConflict is true and the new event overlaps with existing events. It provides details about the conflicting time range and the resources involved.

To support multi-resource event creation, ensure your newEvent handler can process the resourceIds array provided in the final argument.

// Example of handling new events and conflicts
const handleNewEvent = (schedulerData, slotId, slotName, startTime, endTime, undefined, { resourceIds }) => {
  console.log('Creating event for resources:', resourceIds || [slotId]);
};

const handleConflict = (schedulerData, type, eventData, dndType, slotId, slotName, startTime, endTime) => {
  console.warn('Conflict detected for:', slotId, 'at', startTime);
};

A complete example of initializing SchedulerData with resources, events, and locales, and rendering the Scheduler component.

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

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

// Set locales
schedulerData.setSchedulerLocale('pt-br');
schedulerData.setCalendarPopoverLocale('pt_BR');

// Set resources
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' },
]);

// Set events (must be sorted by start time)
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',
  },
]);

// In your render method (ensure ancestor provides DragDropContext):
<Scheduler
  schedulerData={schedulerData}
  prevClick={this.prevClick}
  nextClick={this.nextClick}
  onSelectDate={this.onSelectDate}
  onViewChange={this.onViewChange}
  eventItemClick={this.eventClicked}
/>;