Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



React scheduler component based on Material-UI & date-fns

Version published



React Scheduler Component

npm package Twitter URL

:warning: Notice: This component uses mui/emotion/date-fns. if your project is not already using these libs, this component may not be suitable.


npm i @aldabil/react-scheduler


import { Scheduler } from "@aldabil/react-scheduler";


      event_id: 1,
      title: "Event 1",
      start: new Date("2021/5/2 09:30"),
      end: new Date("2021/5/2 10:30"),
      event_id: 2,
      title: "Event 2",
      start: new Date("2021/5/4 10:00"),
      end: new Date("2021/5/4 11:00"),

Scheduler Props

All props are optional

heightnumber. Min height of table.
Default: 600
viewstring. Initial view to load. options: "week", "month", "day".
Default: "week" (if it's not null)
agendaboolean. Activate agenda view
alwaysShowAgendaDaysboolean. if true, day rows without events will be shown
monthObject. Month view props.
weekDays: [0, 1, 2, 3, 4, 5],
weekStartOn: 6,
startHour: 9,
endHour: 17,
cellRenderer?:(props: CellProps) => JSX.Element,
navigation: true,
disableGoToDay: false
weekObject. Week view props.
weekDays: [0, 1, 2, 3, 4, 5],
weekStartOn: 6,
startHour: 9,
endHour: 17,
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element,
navigation: true,
disableGoToDay: false
dayObject. Day view props.
startHour: 9,
endHour: 17,
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element,
hourRenderer?:(hour: string) => JSX.Element,
navigation: true
selectedDateDate. Initial selected date.
Default: new Date()
navigationboolean. Show/Hide top bar date navigation.
Default: true
navigationPickerPropsCalendarPickerProps for top bar date navigation. Ref: CalendarPicker API
disableViewNavigatorboolean. Show/Hide top bar date View navigator.
Default: false
eventsArray of ProcessedEvent.
Default: []
type ProcessedEvent = {
event_id: number or string;
title: string;
start: Date;
end: Date;
disabled?: boolean;
color?: string or "palette.path";
textColor?: string or "palette.path";
editable?: boolean;
deletable?: boolean;
draggable?: boolean;
allDay?: boolean;
agendaAvatar?: React.ReactElement | string
sx?: Mui sx prop
eventRendererFunction(event:ProcessedEvent): JSX.Element.
A function that overrides the event item render function, see demo Custom Event Renderer below
editableboolean. If true, the scheduler cell click will not open the editor, and the event item will not show the edit button, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type.
deletableboolean. Whether the event item will show the delete button, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type.
draggableboolean. Whether activate drag&drop for the events, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type.
getRemoteEventsFunction(RemoteQuery). Return promise of array of events. Can be used as a callback to fetch events by parent component or fetch.
type RemoteQuery = { 
start: Date;
end: Date;
view: "day" | "week" | "month";
fieldsArray of extra fields with configurations.
name: "description",
type: "input" ,
config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....
loadingboolean. Loading state of the calendar table
loadingComponentCustom component to override the default CircularProgress
onConfirmFunction(event, action). Return promise with the new added/edited event use with remote data.
action: "add", "edit"
onDeleteFunction(id) Return promise with the deleted event id to use with remote data.
customEditorFunction(scheduler). Override editor modal.
Provided prop scheduler object with helper props:
state: state obj,
close(): void
loading(status: boolean): void
edited?: ProcessedEvent
onConfirm(event: ProcessedEvent, action:EventActions): void
customViewerFunction(event: ProcessedEvent, close: () => void). Used to render fully customized content of the event popper. If used, viewerExtraComponent & viewerTitleComponent will be ignored
viewerExtraComponentFunction(fields, event) OR Component. Additional component in event viewer popper
viewerTitleComponentFunction(event). Helper function to render custom title in event popper
disableViewerboolean. If true, the viewer popover will be disabled globally
resourcesArray. Resources array to split event views with resources
assignee: 1,
text: "User One",
subtext: "Sales Manager",
avatar: "",
color: "#ab2d2d",
resourceFieldsObject. Map the resources correct fields.
idField: "admin_id",
textField: "title",
subTextField: "mobile",
avatarField: "title",
colorField: "background",
resourceHeaderComponentFunction(resource). Override header component of resource
resourceViewModeDisplay resources mode.
Options: "default" | "vertical" | "tabs"
directionstring. Table direction. "rtl" | "ltr"
dialogMaxWidthEdito dialog maxWith. Ex: "lg" | "md" | "sm"... Default:"md"
localeLocale of date-fns. Default:enUS
hourFormatHour format.
Options: "12" | "24"...Default: "12"
timeZoneString, time zone IANA ID:
translationsObject. Translations view props.
navigation: {
month: "Month",
week: "Week",
day: "Day",
today: "Today"
agenda: "Agenda"
form: {
addTitle: "Add Event",
editTitle: "Edit Event",
confirm: "Confirm",
delete: "Delete",
cancel: "Cancel"
event: {
title: "Title",
start: "Start",
end: "End",
allDay: "All Day"
validation: {
required: "Required",
invalidEmail: "Invalid Email",
onlyNumbers: "Only Numbers Allowed",
min: "Minimum {{min}} letters",
max: "Maximum {{max}} letters"
moreEvents: "More...",
noDataToDisplay: "No data to display",
loading: "Loading..."
onEventDropFunction(event: DragEvent, droppedOn: Date, updatedEvent: ProcessedEvent, originalEvent: ProcessedEvent). Return a promise, used to update remote data of the dropped event. Return an event to update state internally, or void if event state is managed within component
onEventClickFunction(event: ProcessedEvent): void. Triggered when an event item is clicked
onEventEditFunction(event: ProcessedEvent): void. Triggered when an event item is being edited from the popover
onCellClickFunction(start: Date, end: Date, resourceKey?: string, resourceVal?: string
onSelectedDateChangeFunction(date: Date): void. Triggered when the selectedDate prop changes by navigation date picker or today button
onViewChangeFunction(view: View, agenda?: boolean): void. Triggered when navigation view changes
stickyNavigationIf true, the navigation controller bar will be sticky
onClickMoreFunction(date: Date, goToDay: Function(date: Date): void): void. Triggered when the "More..." button is clicked, it receives the date and a goToDay function that shows a day view for a specfic date.


Used to help manage and control the internal state of the Scheduler component from outside of Scheduler props, Example:

import { Scheduler } from "@aldabil/react-scheduler";
import type { SchedulerRef } from "@aldabil/react-scheduler/types"

const SomeComponent = () => {
  const calendarRef = useRef<SchedulerRef>(null);

  return <Fragment>
      <Button onClick={()=>{
        calendarRef.current.scheduler.handleState("day", "view");
        Change View
      <Button onClick={()=>{
        calendarRef.current.scheduler.triggerDialog(true, {
          start: /*Put the start date*/,
          end: /*Put the end date*/
        Add Event Tomorrow


The calendarRef holds the entire internal state of the Scheduler component. Perhaps the most useful method inside the calendarRef is handleState, example:

calendarRef.current.scheduler.handleState(value, key);

consider looking inside SchedulerRef type to see all fields & methods available.



  • Tests
  • Drag&Drop - partially
  • Resizable
  • Recurring events
  • Localization
  • Hour format 12 | 24



Last updated on 25 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc