# @madhurdev/react-scheduler > React scheduler component based on Material-UI & date-fns Latest version **1.0.0** (published 2023-03-15) · MIT license · 0 weekly downloads ## Install ```sh npm install @madhurdev/react-scheduler pnpm add @madhurdev/react-scheduler yarn add @madhurdev/react-scheduler bun add @madhurdev/react-scheduler ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2023-03-15 | | First published | 2023-03-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 172 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Madhur | | Maintainers | madhurdev | | Keywords | react, material-ui, calendar, scheduler | ## Links - npm: https://www.npmjs.com/package/@madhurdev/react-scheduler - Repository: https://github.com/madhurdev/react-scheduler - Homepage: https://github.com/madhurdev/react-scheduler#readme - Issues: https://github.com/madhurdev/react-scheduler/issues - npm.io page: https://npm.io/package/@madhurdev/react-scheduler ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2023-03-15 ## README # React Scheduler Component [![npm package](https://img.shields.io/npm/v/@aldabil/react-scheduler/latest.svg)](https://www.npmjs.com/package/@aldabil/react-scheduler) [![Twitter URL](https://img.shields.io/twitter/url?label=%40aldabil&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ffollow%3Fscreen_name%3Daldabil21)](https://twitter.com/intent/follow?screen_name=aldabil21) > :warning: **Notice**: This component uses `mui`/`emotion`/`date-fns`. if your project is not already using these libs, this component may not be suitable. ## Installation ```jsx npm i @madhurdev/react-scheduler ``` ## Usage ```jsx import { Scheduler } from "@madhurdev/react-scheduler"; ``` ## Example ```jsx ``` ### Scheduler Props | Prop | Value | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | height | number. Min height of table.
_Default_: 600 | | view | string. Initial view to load. options: "week", "month", "day".
_Default_: "week" (if it's not null) | | month | Object. Month view props.
_default_: 
{
weekDays: [0, 1, 2, 3, 4, 5], 
weekStartOn: 6, 
startHour: 9, 
endHour: 17,
cellRenderer?:(props: CellProps) => JSX.Element,
navigation: true,
disableGoToDay: false
}
| | week | Object. Week view props.
_default_: 
{ 
weekDays: [0, 1, 2, 3, 4, 5], 
weekStartOn: 6, 
startHour: 9, 
endHour: 17,
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element,
navigation: true,
disableGoToDay: false
}
| | day | Object. Day view props.
_default_: 
{
startHour: 9, 
endHour: 17, 
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element,
navigation: true
}
| | selectedDate | Date. Initial selected date.
_Default_: new Date() | | navigation | boolean. Show/Hide top bar date navigation.
_Default_: true | | navigationPickerProps | CalendarPickerProps for top bar date navigation. Ref: [CalendarPicker API](https://mui.com/x/api/date-pickers/calendar-picker/#main-content) | | disableViewNavigator | boolean. Show/Hide top bar date View navigator.
_Default_: false | | events | Array of ProcessedEvent.
_Default_: [] 
type ProcessedEvent = {
event_id: number or string;
title: string;
start: Date;
end: Date;
disabled?: boolean;
color?: string;
editable?: boolean;
deletable?: boolean;
draggable?: boolean;
allDay?: boolean;
}
| | eventRenderer | Function(event:ProcessedEvent): JSX.Element.
A function that overrides the event item render function, see demo _Custom Event Renderer_ below | | editable | boolean. Whether the event item will show the edit button, this is applied to all events, and can be overridden in each event property, see `ProcessedEvent` type. | | deletable | boolean. 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. | | draggable | boolean. Whether activate drag&drop for the events, this is applied to all events, and can be overridden in each event property, see `ProcessedEvent` type. | | getRemoteEvents | Function(viewEvent). Return promise of array of events. Can be used as a callback to fetch events by parent component or fetch.
type ViewEvent = { 
 start: Date;
 end: Date;
 view: "day" \| "week" \| "month";
}
| | fields | Array of extra fields with configurations.
Example: 
 { 
 name: "description", 
 type: "input" , 
 config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....
}
| | loading | boolean. Loading state of the calendar table | | onConfirm | Function(event, action). Return promise with the new added/edited event use with remote data.
_action_: "add", "edit" | | onDelete | Function(id) Return promise with the deleted event id to use with remote data. | | customEditor | Function(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
}
| | viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer popper | | resources | Array. Resources array to split event views with resources
_Example_ 
{
assignee: 1,
text: "User One", 
subtext: "Sales Manager", 
avatar: "https://picsum.photos/200/300", 
color: "#ab2d2d",
 }
| | resourceFields | Object. Map the resources correct fields.
_Example_: 
{
 idField: "admin_id", 
textField: "title", 
subTextField: "mobile", 
avatarField: "title", 
colorField: "background",
 }
| | recourseHeaderComponent | Function(resource). Override header component of resource | | resourceViewMode | Display resources mode.
_Options_: "default", "tabs" | | direction | string. Table direction. "rtl", "ltr" | | dialogMaxWidth | Edito dialog maxWith. Ex: "lg", "md", "sm"... _Default_:"md" | | locale | Locale of date-fns. _Default_:enUS | | hourFormat | Hour format.
_Options_: "12", "24"..._Default_: "12" | | timeZone | String, time zone IANA ID: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones | | translations | Object. Translations view props.
_default_: 
{
 navigation: {
 month: "Month",
 week: "Week",
 day: "Day",
 today: "Today"
 },
 form: {
 addTitle: "Add Event",
 editTitle: "Edit Event",
 confirm: "Confirm",
 delete: "Delete",
 cancel: "Cancel"
 },
 event: {
 title: "Title",
 start: "Start",
 end: "End",
 allDay: "All Day"
},
 moreEvents: "More...",
 loading: "Loading..."
}
| | onEventDrop | Function(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 | | onEventClick | Function(event: ProcessedEvent): void. Triggered when an event item is clicked |
### useScheduler Hook used to help manage and control the internal state of the `Scheduler` component from another component outside of `Scheduler` props, Example: ```js import { Scheduler, useScheduler } from "@aldabil/react-scheduler"; const SomeComponent = () => { const { triggerDialog, setView } = useScheduler(); return
}; ``` ### Demos - [Basic](https://codesandbox.io/s/react-scheduler-demo-standard-v96bd) - [Remote Data](https://codesandbox.io/s/remote-data-j13ei) - [Custom Fields](https://codesandbox.io/s/custom-fields-b2kbv) - [Editor/Viewer Override](https://codesandbox.io/s/customeditor-tt2pf) - [Resources/View Mode](https://codesandbox.io/s/resources-7wlcy) - [Custom Cell Action](https://codesandbox.io/s/custom-cell-action-n02dv) - [Custom Event Renderer](https://codesandbox.io/s/custom-event-renderer-rkf4xw) ### Todos - [ ] Tests - [x] Drag&Drop - partially - [ ] Resizable - [ ] Recurring events - [x] Localization - [x] Hour format 12 | 24 --- _Source: https://npm.io/package/@madhurdev/react-scheduler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._