{"id":13989660,"url":"https://github.com/StephenChou1017/react-big-scheduler","last_synced_at":"2025-07-22T11:31:03.711Z","repository":{"id":38815502,"uuid":"114829267","full_name":"StephenChou1017/react-big-scheduler","owner":"StephenChou1017","description":"A scheduler and resource planning component built for React and made for modern browsers (IE10+)","archived":false,"fork":false,"pushed_at":"2023-03-01T20:06:37.000Z","size":1093,"stargazers_count":771,"open_issues_count":174,"forks_count":416,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-07-05T19:22:46.747Z","etag":null,"topics":["modern-browsers","react","scheduler"],"latest_commit_sha":null,"homepage":"https://stephenchou1017.github.io/scheduler/#/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StephenChou1017.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-20T01:39:19.000Z","updated_at":"2025-07-03T11:53:36.000Z","dependencies_parsed_at":"2024-06-18T13:44:27.050Z","dependency_job_id":"1a6e30d9-4b3d-421b-9a97-d0ce21944400","html_url":"https://github.com/StephenChou1017/react-big-scheduler","commit_stats":{"total_commits":118,"total_committers":15,"mean_commits":7.866666666666666,"dds":0.6694915254237288,"last_synced_commit":"76796959de2f86303f9d036c28562203d442267b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/StephenChou1017/react-big-scheduler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephenChou1017%2Freact-big-scheduler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephenChou1017%2Freact-big-scheduler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephenChou1017%2Freact-big-scheduler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephenChou1017%2Freact-big-scheduler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StephenChou1017","download_url":"https://codeload.github.com/StephenChou1017/react-big-scheduler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephenChou1017%2Freact-big-scheduler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266483527,"owners_count":23936359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modern-browsers","react","scheduler"],"created_at":"2024-08-09T13:01:55.287Z","updated_at":"2025-07-22T11:31:03.362Z","avatar_url":"https://github.com/StephenChou1017.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-big-scheduler ![npm](https://img.shields.io/npm/v/react-big-scheduler.svg?style=plastic)\n\nA scheduler and resource planning component built for React and made for modern browsers (IE10+), IE needs babel-polyfill.  \n**From the npm version 0.2.6, Scheduler will use responsive layout by default(set SchedulerData.config.schedulerWidth to a percentage instead of a number).**\n\n[Online demo](https://stephenchou1017.github.io/scheduler/#/)\n\nInspired by [Full Calendar Scheduler](https://fullcalendar.io/scheduler/).\n\n## Version selection\n\n- antd \u003e= 3.9.0 ? react-big-scheduler@0.2.7 : react-big-scheduler@0.2.4\n\n## Use and Setup\n\n`npm install react-big-scheduler --save`\n\n```js\n//1. import\nimport Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT} from 'react-big-scheduler'\n//include `react-big-scheduler/lib/css/style.css` for styles, link it in html or import it here\nimport 'react-big-scheduler/lib/css/style.css'\nimport moment from 'moment'\n...\n\n//2. create the view model, put it in the props obj\nlet schedulerData = new SchedulerData(new moment().format(DATE_FORMAT), ViewTypes.Week);\n//set locale moment to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States).\nmoment.locale('zh-cn');\nschedulerData.setLocaleMoment(moment);\n//set resources here or later\nlet resources = [\n                    {\n                       id: 'r0',\n                       name: 'Resource0',\n                       groupOnly: true\n                    },\n                    {\n                       id: 'r1',\n                       name: 'Resource1'\n                    },\n                    {\n                       id: 'r2',\n                       name: 'Resource2',\n                       parentId: 'r0'\n                    },\n                    {\n                       id: 'r3',\n                       name: 'Resource3',\n                       parentId: 'r4'\n                    },\n                    {\n                       id: 'r4',\n                       name: 'Resource4',\n                       parentId: 'r2'\n                    },\n                ];\nschedulerData.setResources(resources);\n//set events here or later,\n//the event array should be sorted in ascending order by event.start property, otherwise there will be some rendering errors\nlet events = [\n                {\n                     id: 1,\n                     start: '2017-12-18 09:30:00',\n                     end: '2017-12-19 23:30:00',\n                     resourceId: 'r1',\n                     title: 'I am finished',\n                     bgColor: '#D9D9D9'\n                 },\n                 {\n                     id: 2,\n                     start: '2017-12-18 12:30:00',\n                     end: '2017-12-26 23:30:00',\n                     resourceId: 'r2',\n                     title: 'I am not resizable',\n                     resizable: false\n                 },\n                 {\n                     id: 3,\n                     start: '2017-12-19 12:30:00',\n                     end: '2017-12-20 23:30:00',\n                     resourceId: 'r3',\n                     title: 'I am not movable',\n                     movable: false\n                 },\n                 {\n                     id: 4,\n                     start: '2017-12-19 14:30:00',\n                     end: '2017-12-20 23:30:00',\n                     resourceId: 'r1',\n                     title: 'I am not start-resizable',\n                     startResizable: false\n                 },\n                 {\n                     id: 5,\n                     start: '2017-12-19 15:30:00',\n                     end: '2017-12-20 23:30:00',\n                     resourceId: 'r2',\n                     title: 'R2 has recurring tasks every week on Tuesday, Friday',\n                     rrule: 'FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR',\n                     bgColor: '#f759ab'\n                 }\n             ];\nschedulerData.setEvents(events);\n\n...\n\n//3. render the scheduler component, mind that the Scheduler component should be placed in a DragDropContext(father or ancestor).\n...\nconst {schedulerData} = this.props;\n\u003cScheduler schedulerData={schedulerData}\n           prevClick={this.prevClick}\n           nextClick={this.nextClick}\n           onSelectDate={this.onSelectDate}\n           onViewChange={this.onViewChange}\n           eventItemClick={this.eventClicked}\n/\u003e\n...\n```\n\n## Run examples locally\n\n- Clone this repository\n- Retrieve dependencies: `npm install`\n- Start: `npm run example`\n- Open [http://localhost:8080/example/#/](http://localhost:8080/example/#/).\n\nIf you fail to execute the `npm install` command, remove the package-lock.json file and try again.\n\n## API\n\n### 1.SchedulerData\n\nSchedulerData is the view model of Scheduler, we can modify it to control the view of the Scheduler.\n\n#### constructor\n\n```js\nconstructor(date=moment().format(DATE_FORMAT), viewType = ViewTypes.Week,\n                showAgenda = false, isEventPerspective = false,\n                newConfig = undefined, newBehaviors=undefined\n                localeMoment = undefined)\n```\n\n- `date` is a string in `YYYY-MM-DD` format, and is the initial date Scheduler will render. Take the date `2017-12-20`\n  for example, Scheduler will render the time window of the week from `2017-12-18` to `2017-12-24` in `ViewTypes.Week`\n  view type, and will render the time window of the `2017-12` month in `ViewTypes.Month` view type.\n- `viewType` is the initial view type, now Scheduler supports `Day`, `Week`, `Month`, `Quarter`, `Year` 5 built-in view types,\n  in addition Scheduler now supports `Custom`, `Custom1`, `Custom2` 3 custom view types at the same time, in which you can control\n  the time window yourself, refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow). `viewType`,\n  `showAgenda` and `isEventPerspective` are a group which should be contained in the SchedulerData.config.views array,\n  and they together decide which view should be rendered. When `showAgenda` and `isEventPerspective` are both `false`,\n  Scheduler will render the resource view, refer to [this example](https://stephenchou1017.github.io/scheduler/#/views).\n- `showAgenda` is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is\n  read only.\n- `isEventPerspective` is a bool value, if true, Scheduler will display the task view of current view type. In\n  resource view, every slot(row) describes how many events a resource does in the time window, while in task view,\n  every slot describes how many events a big task is divided into and who will make it done. Add a `groupId` and\n  `groupName` property to every event object, so that the events having the same `groupId` will belong to the same big task and\n  be rendered in the same slot in task view. If `groupId` and `groupName` are not provided, SchedulerData will take\n  the `id` as the `groupId`, and take the `title` as the `groupName`. See the `eventsForTaskView` in the\n  [DemoData.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/DemoData.js) for details.\n- `newConfig` is a config object, used to override the [default config](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/config.js)\n  fully or partly.\n- `newBehaviors` is a config object, used to override the [default behaviors](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/behaviors.js)\n  fully or partly.\n- `localeMoment` is a locale moment object, which is unified used in react-big-scheduler. If not provided, Scheduler will come\n  with English(en, United States) locale strings.\n\n#### setLocaleMoment\n\n```js\nsetLocaleMoment(localeMoment);\n```\n\nUsed to set locale moment to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States)\n\n#### setResources\n\n```js\nsetResources(resources);\n```\n\nUsed to set the resources(the slots in resource view), make sure that there are no duplicated `resource.id` in the `resources`.\nSee the demo `resources` in the [DemoData.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/DemoData.js).\n\n#### setEvents\n\n```js\nsetEvents(events);\n```\n\nUsed to set the events. the event array should be sorted in ascending order by event.start property.\nSee the demo `events` in the [DemoData.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/DemoData.js).\nIf we use the task view, we'd better add the `groupId` and the `groupName` property to each event object, see the\n`eventsForTaskView` in the [DemoData.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/DemoData.js) for details.\n\n#### prev\n\n```js\nprev();\n```\n\nLet the time window scroll to the left once. When `SchedulerData,viewType` is `ViewTypes.Month`, the time window will\nscroll a month, when `SchedulerData,viewType` is `ViewTypes.Week`, the time window will scroll a week. `SchedulerData.events`\nwill be clear after calling this method.\n\n#### next\n\n```js\nnext();\n```\n\nLet the time window scroll to the right once. `SchedulerData.events` will be clear after calling this method.\n\n#### setDate\n\n```js\nsetDate((date = moment().format(DATE_FORMAT)));\n```\n\nLet the time window jump to the provided `date` directly. `SchedulerData.events` will be clear after calling this method.\n\n#### setViewType\n\n```js\nsetViewType(\n  (viewType = ViewTypes.Week),\n  (showAgenda = false),\n  (isEventPerspective = false)\n);\n```\n\nTell SchedulerData to change current view, the `viewType`, `showAgenda` and `isEventPerspective` group should be\nprovided, and should be contained in the `SchedulerData.config.views` array. `SchedulerData.events` will be clear\nafter calling this method.\n\n#### setEventGroups\n\n```js\nsetEventGroups(eventGroups);\n```\n\nUsed to set the event groups(the slots in task view), make sure that there are no duplicated `eventGroup.id` in the `eventGroups`.\nThis method is optional, and is needed only when `SchedulerData.eventGroupsAutoGenerated` is `false`.\n\n#### setEventGroupsAutoGenerated\n\n```js\nsetEventGroupsAutoGenerated(autoGenerated);\n```\n\nTell SchedulerData to generate `SchedulerData.eventGroups` automatically or not. If `true`, SchedulerData will generate the event\ngroups(slots) automatically according to the `event.groupId` and 'event.groupName' automatically. If `groupId` and 'groupName' are\nnot provided, SchedulerData will take `event.id` and `event.title` instead.\n\n#### setMinuteStep\n\n```js\nsetMinuteStep(minuteStep);\n```\n\nUsed to set minute step for daily view and refresh the render data.\n\n#### toggleExpandStatus\n\n```js\ntoggleExpandStatus(slotId);\n```\n\nUsed to toggle slot's(and its children's) expand status.\n\n#### getMinuteStepsInHour\n\n```js\ngetMinuteStepsInHour();\n```\n\nUsed to get minute steps in an hour, it equals 60 / SchedulerData.config.minuteStep.\n\n#### addResource\n\n```js\naddResource(resource);\n```\n\nAdd the `resource` to the `SchedulerData.resources`, make sure that `resource.id` is not duplicated. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/addresource).\n\n#### addEventGroup\n\n```js\naddEventGroup(eventGroup);\n```\n\nAdd the `eventGroup` to the `SchedulerData.eventGroups`, make sure that `eventGroup.id` is not duplicated. Please note\nthat the `eventGroup` added may be override when `SchedulerData.eventGroupsAutoGenerated` is `true` and\n`SchedulerData.eventGroups` is auto-generated.\n\n#### addEvent\n\n```js\naddEvent(newEvent);\n```\n\nAdd the `newEvent` to the `SchedulerData.events`, make sure that `newEvent.id` is not duplicated. SchedulerData will\nplace the `newEvent` in the right index according to the `newEvent.start` property.\n\n#### updateEventStart\n\n```js\nupdateEventStart(event, newStart);\n```\n\nUpdate the `newStart` to the `event.start`, `newStart` is a string in `YYYY-MM-DD HH:mm:ss` format(similarly hereinafter).\nSchedulerData will replace the `event` in the right index according to the `newStart` value.\n\n#### updateEventEnd\n\n```js\nupdateEventEnd(event, newEnd);\n```\n\nUpdate the `newEnd` to the `event.end`.\n\n#### moveEvent\n\n```js\nmoveEvent(event, newSlotId, newSlotName, newStart, newEnd);\n```\n\nUpdate the `newSlotId`, `newSlotName`, `newStart`, `newEnd` of the `event`. In resource view, new slot is a resource,\nwhile in task view, new slot is a event group. SchedulerData will replace the `event` in the right index according\nto the `newStart` value.\n\n#### removeEvent\n\n```js\nremoveEvent(event);\n```\n\nRemove the given event from `SchedeulerData.events`.\n\n#### removeEventById\n\n```js\nremoveEventById(eventId);\n```\n\nRemove event from `SchedeulerData.events` by the given event id.\n\n#### getSlots\n\n```js\ngetSlots();\n```\n\nReturns the slot array, `SchedulerData.resources` in resource view, `SchedulerData.eventGroups` in task view.\n\n#### getSlotById\n\n```js\ngetSlotById(slotId);\n```\n\nReturns the slot by `slotId`, returns `undefined` if not found.\n\n#### getResourceById\n\n```js\ngetResourceById(resourceId);\n```\n\nReturns the resource by `resourceId`, returns `undefined` if not found.\n\n#### isEventInTimeWindow\n\n```js\nisEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd);\n```\n\nReturns whether an event is in the time window or not, remind that `eventStart`, `eventEnd`, `windowStart`, `windowEnd`\nare all moment objects.\n\n### 2.Locale support(Refer to [this example](https://stephenchou1017.github.io/scheduler/#/locale) for details.)\n\n#### SchedulerData.config.resourceName\n\nThe locale string of resource name.\n\n#### SchedulerData.config.taskName\n\nThe locale string of task name.\n\n#### SchedulerData.config.agendaViewHeader\n\nThe locale string of agenda view header.\n\n#### SchedulerData.config.addMorePopoverHeaderFormat\n\nThe locale string of add more popover header format.\n\n#### SchedulerData.config.eventItemPopoverDateFormat\n\nThe locale string of event item popover date format.\n\n#### SchedulerData.config.nonAgendaDayCellHeaderFormat\n\nThe locale string of non-agenda view cell header format of day view type.\n\n#### SchedulerData.config.nonAgendaOtherCellHeaderFormat\n\nThe locale string of non-agenda view cell header format of other view types.\n\n#### SchedulerData.behaviors.getDateLabelFunc\n\nUsed to resolve the locale string of date label of Scheduler component.(Refer to the [getDateLabel](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/behaviors.js) func for example)\n\n### 3.SchedulerData.config(See the [config.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/config.js) for details.)\n\n#### schedulerWidth\n\nThe width of Scheduler. If schedulerWidth is a number, Scheduler will use fixed width layout, while if schedulerWidth is a percentage,\nScheduler will use responsive layout. And in the responsive layout:\n`actual width of Scheduler = (SchedulerData.documentWidth - SchedulerData.config.besidesWidth) * SchedulerData.config.schedulerWidth`\n`SchedulerData.documentWidth` is the window width of browser and will change automatically when resized.\n\n#### schedulerMaxHeight\n\nThe max height of Scheduler. If the desired height is bigger than the max height, the header row of Scheduler will be\nfrozen and vertical scroll bar will appear, but this won't happen when the max height is set to `0`. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/freezefirstrow).\n\n#### tableHeaderHeight\n\nHeight of Scheduler table header.\n\n#### agendaResourceTableWidth\n\nWidth of the left Scheduler resource column in agenda view.\n\n#### agendaMaxEventWidth\n\nMax width of an event item in agenda view.\n\n#### dayResourceTableWidth, weekResourceTableWidth, monthResourceTableWidth, yearResourceTableWidth, quarterResourceTableWidth\n\nWidth of the left Scheduler resource column in resource view and task view of different view types.\n\n#### dayCellWidth, weekCellWidth, monthCellWidth, yearCellWidth, quarterCellWidth\n\nWidth of Scheduler table cells in resource view and task view of different view types.\n\n#### dayMaxEvents, weekMaxEvents, monthMaxEvents, yearMaxEvents, quarterMaxEvents\n\nMax events count of a cell in resource view and task view of different view types. A '+N more' will appear when exceeded.\nRefer to [this example](https://stephenchou1017.github.io/scheduler/#/addmore).\n\n#### eventItemHeight\n\nHeight of an event item in 3 views.\n\n#### eventItemLineHeight\n\nLine height of an event item in 3 views.\n\n#### nonAgendaSlotMinHeight\n\nMin height of a slot in non-agenda views, default 0, means there is no min height.\n\n#### dayStartFrom\n\nStart hour rendered from in `ViewTypes.Day` in resource view and task view, default 0.\n\n#### dayStopTo\n\nEnd hour rendered to in `ViewTypes.Day` in resource view and task view, default 23.\n\n#### defaultEventBgColor\n\nDefault event item background color in 3 views, will be override if there is a `bgColor` property in event object.\n\n#### selectedAreaColor\n\nSelected cells color in resource view and task view, cells are selectable only when `creatable` is `true`.\n\n#### nonWorkingTimeHeadColor\n\nColor of non-working time head cells. Modify `SchedulerData.behaviors.isNonWorkingTimeFunc` to re-define non-working time.\nRefer the `isNonWorkingTime` func in the [behaviors.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/behaviors.js).\n\n#### nonWorkingTimeHeadBgColor\n\nBackground color of non-working time head cells.\n\n#### nonWorkingTimeBodyBgColor\n\nBackground color of non-working time body cells.\n\n#### summaryColor\n\nColor of cell summary. Modify `SchedulerData.behaviors.getSummaryFunc` to display summary in a cell.\nRefer the `getSummary` func in the [behaviors.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/behaviors.js).\n\n#### summaryPos\n\nPosition of cell summary, supports `SummaryPos.Top`, `SummaryPos.TopRight`, `SummaryPos.TopLeft`, `SummaryPos.Bottom`,\n`SummaryPos.BottomRight` and `SummaryPos.BottomLeft`.\n\n#### startResizable\n\nControls whether to resize the start of every event item in resource view and task view. If `false`, all item starts are\nnon-resizable, if `true`, all item starts are resizable except those who have a `resizable` or `startResizable`\nproperty and its value is `false`.\n\n#### endResizable\n\nControls whether to resize the end of every event item in resource view and task view. If `false`, all item ends are\nnon-resizable, if `true`, all item ends are resizable except those who have a `resizable` or `endResizable`\nproperty and its value is `false`.\n\n#### movable\n\nControls whether to move every event item in resource view and task view. If `false`, all items are\nnon-movable, if `true`, all items are movable except those who have a `movable` property and its value is `false`.\n\n#### creatable\n\nControls whether to create new event item in resource view and task view.\n\n#### crossResourceMove\n\nControls whether to cross-slot move an event item in resource view and task view. If `false`, the `slotId` and `slotName`\nwon't change in the `moveEvent` method. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/nocrossslotmove).\n\n#### checkConflict\n\nControls whether to check conflicts when creating, resizing or moving an event item in resource view and task view. If\n`true`, Scheduler will call the `conflictOccurred` function if given. Refer to\n[this example](https://stephenchou1017.github.io/scheduler/#/overlapcheck).\n\n#### scrollToSpecialMomentEnabled\n\nControls Scheduler whether to scroll to special moment automatically when the time window contains special moment. If `true`, Scheduler\nhorizontal bar will scroll to special moment after calling `setScrollToSpecialMoment(true)` to SchedulerData. Use `SchedulerData.behaviors.getScrollSpecialMomentFunc`\nto tell Scheduler what time the special moment is.\n\n#### eventItemPopoverEnabled\n\nControls Scheduler whether to display event item popover when moving mouse on an event item, default `true`.\n\n#### calendarPopoverEnabled\n\nControls Scheduler whether to display calendar popover when clicking on a date label in header, default `true`.\n\n#### recurringEventsEnabled\n\nControls Scheduler whether to support recurring event, refer to [this feature request](https://github.com/StephenChou1017/react-big-scheduler/issues/8), default `true`.\nIf `true`, SchedulerData will filter out those template events who has a `rrule` string property in `setEvents` method,\ngenerate the recurring events in the time window, and insert them into the event array in the right orders. The recurring events\ngenerated from the same template event, all have a new id like `${templateEvent.id}-${number}`, and have a `recurringEventId`\nproperty with the value `templateEvent.id`.\n\n#### headerEnabled\n\nControls Scheduler whether to display header, default `true`.\n\n#### displayWeekend\n\nControls Scheduler whether to display weekends in non-agenda view, default `true`.\n\n#### relativeMove\n\nControls Scheduler whether to move events(only DnDTypes.EVENT type) relatively or absolutely, default `true`, means relatively.\n\n#### minuteStep\n\nMinute step for day view type in non-agenda view, can be 10, 12, 15, 20, 30, 60, etc, default 30.\n\n#### views\n\nArray of view that Scheduler will support.\n\n### 4.SchedulerData.behaviors(See the [behaviors.js](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/behaviors.js) for details.)\n\n#### getEventTextFunc\n\n```js\ngetEventTextFunc(schedulerData, event);\n```\n\nMethod that defines the text displayed in the `event`.\n\n#### isNonWorkingTimeFunc\n\n```js\nisNonWorkingTimeFunc(schedulerData, time);\n```\n\nMethod that defines non-working time.\n\n#### getSummaryFunc\n\n```js\ngetSummary(\n  schedulerData,\n  headerEvents,\n  slotId,\n  slotName,\n  headerStart,\n  headerEnd\n);\n```\n\nMethod that defines the summary text displayed in the Scheduler cells.Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/summary).\n\n#### getCustomDateFunc\n\n```js\ngetCustomDate(schedulerData, num, (date = undefined));\n```\n\nMethod that controls the start and end of time window when current view type is Custom, Custom1 or Custom2.Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/customtimewindow).\n\n#### getNonAgendaViewBodyCellBgColorFunc\n\n```js\ngetNonAgendaViewBodyCellBgColor(schedulerData, slotId, header);\n```\n\nMethod that sets the background color of cells dynamically.\n\n#### getScrollSpecialMomentFunc\n\n```js\ngetScrollSpecialMoment(schedulerData, startMoment, endMoment);\n```\n\nMethod that defines the special moment Scheduler will scroll to automatically, when the time window contains that moment.\n\n### 5.Scheduler.propTypes\n\n#### schedulerData\n\n```js\nschedulerData: PropTypes.object.isRequired;\n```\n\nView model of the Scheduler component, provides data.\n\n#### prevClick\n\n```js\nprevClick: PropTypes.func.isRequired;\nprevClick(schedulerData);\n```\n\nCallback function fired when the left point bracket '\u003c' is clicked.\n\n#### nextClick\n\n```js\nnextClick: PropTypes.func.isRequired;\nnextClick(schedulerData);\n```\n\nCallback function fired when the right point bracket '\u003e' is clicked.\n\n#### onViewChange\n\n```js\nonViewChange: PropTypes.func.isRequired;\nonViewChange(schedulerData, view);\n```\n\nCallback function fired when the Scheduler view changed. `view` is a json such as { viewType: ViewTypes.Month,\nshowAgenda: true, isEventPerspective: false}.\n\n#### onSelectDate\n\n```js\nonSelectDate: PropTypes.func.isRequired;\nonSelectDate(schedulerData, date);\n```\n\nCallback function fired when a new date is selected. `date` is the new selected data, a string in `YYYY-MM-DD` format.\n\n#### eventItemClick\n\n```js\neventItemClick: PropTypes.func;\neventItemClick(schedulerData, event);\n```\n\nCallback function fired when you click an event item.\n\n#### updateEventStart\n\n```js\nupdateEventStart: PropTypes.func;\nupdateEventStart(schedulerData, event, newStart);\n```\n\nCallback function fired when resizing the start of the `event`, `newStart` is a string in `YYYY-MM-DD HH:mm:ss` format.\n\n#### updateEventEnd\n\n```js\nupdateEventEnd: PropTypes.func;\nupdateEventEnd(schedulerData, event, newEnd);\n```\n\nCallback function fired when resizing the end of the `event`, `newEnd` is a string in `YYYY-MM-DD HH:mm:ss` format.\n\n#### moveEvent\n\n```js\nmoveEvent: PropTypes.func;\nmoveEvent((schedulerData, event, slotId, slotName, newStart, newEnd));\n```\n\nCallback function fired when moving the `event`. `slotId`, `slotName` are the new `id` and `name` of the slot moving into,\nbut they won't change if the `SchedulerData.config.crossResourceMove` is `false`. `newStart`, `newEnd` are the new beginning\nand ending of the `event`.\n\n#### newEvent\n\n```js\nnewEvent: PropTypes.func;\nnewEvent(schedulerData, slotId, slotName, start, end, type, item);\n```\n\nCallback function fired when creating a new event, or dragging an external item and dropping it into the resource view or task\nview. `slotId` and `slotName` are the slot creating in or dropping into, `start`, `end` are the beginning and ending of the\nevent. If it's a drag\u0026drop operation, the `type` is the DnDType of DnDSource registered to Scheduler, and the `item` is the\nexternal item.\n\n#### leftCustomHeader, rightCustomHeader\n\n```js\nleftCustomHeader: PropTypes.object;\nrightCustomHeader: PropTypes.object;\n```\n\nComponent you need to put in the Scheduler header, it could be a div or a react component. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/customheader).\n\n#### conflictOccurred\n\n```js\nconflictOccurred: PropTypes.func;\nconflictOccurred(\n  schedulerData,\n  action,\n  event,\n  type,\n  slotId,\n  slotName,\n  start,\n  end\n);\n```\n\nCallback function fired when there is a conflict. This could happen when creating, resizing or moving an event, and when  \n `SchedulerData.config.checkConflict` is `true`.\n\n#### eventItemTemplateResolver\n\n```js\neventItemTemplateResolver: PropTypes.func;\neventItemTemplateResolver(\n  schedulerData,\n  event,\n  bgColor,\n  isStart,\n  isEnd,\n  mustAddCssClass,\n  mustBeHeight,\n  agendaMaxEventWidth\n);\n```\n\nUse this function, you can customize the event style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customeventstyle).\n\n### eventItemPopoverTemplateResolver\n\n```js\neventItemPopoverTemplateResolver: PropTypes.func;\neventItemPopoverTemplateResolver(\n  schedulerData,\n  eventItem,\n  title,\n  start,\n  end,\n  statusColor\n);\n```\n\nUse this function, you can customize the event's popover style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/custompopover).\n\n#### slotItemTemplateResolver\n\n```js\nslotItemTemplateResolver: PropTypes.func;\nslotItemTemplateResolver(schedulerData, slot, slotClickedFunc, width, clsName);\n```\n\nUse this function, you can customize the left slot style.\n\n#### nonAgendaCellHeaderTemplateResolver\n\n```js\nnonAgendaCellHeaderTemplateResolver: PropTypes.func;\nnonAgendaCellHeaderTemplateResolver(\n  schedulerData,\n  item,\n  formattedDateItems,\n  style\n);\n```\n\nUse this function, you can customize the table header cell style. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/customtableheaders).\n\n#### onScrollLeft, onScrollRight\n\n```js\nonScrollLeft: PropTypes.func;\nonScrollLeft(schedulerData, schedulerContent, maxScrollLeft);\nonScrollRight: PropTypes.func;\nonScrollRight(schedulerData, schedulerContent, maxScrollLeft);\n```\n\nCallback function fired when the scheduler content div scrolls to leftmost or rightmost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).\n\n#### onScrollTop, onScrollBottom\n\n```js\nonScrollTop: PropTypes.func;\nonScrollTop(schedulerData, schedulerContent, maxScrollTop);\nonScrollBottom: PropTypes.func;\nonScrollBottom(schedulerData, schedulerContent, maxScrollTop);\n```\n\nCallback function fired when the scheduler content div scrolls to topmost or bottommost. Refer to [this example](https://stephenchou1017.github.io/scheduler/#/infinitescroll).\n\n#### slotClickedFunc\n\n```js\nslotClickedFunc: PropTypes.func;\n```\n\nIf it's set, slots will be clickable, and will fire this function when a slot is clicked. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/resourceclickable).\n\n#### dndSources\n\n```js\ndndSources: PropTypes.array;\n```\n\nDnDSource array that registered to Scheduler. Use [DnDSource](https://github.com/StephenChou1017/react-big-scheduler/blob/master/src/DnDSource.js),\nwe can simplify the drag and drop coding in React-Big-Scheduler. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/draganddrop).\n\n#### onSetAddMoreState\n\n```js\nonSetAddMoreState: PropTypes.func;\nonSetAddMoreState(newState);\n```\n\nCallback function fired when a '+N more' is clicked, is used to control the visibility and the position of the `AddMorePopover`.\n`newState` is a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer\nto [this example](https://stephenchou1017.github.io/scheduler/#/addmore).\n\n#### subtitleGetter\n\n```js\nsubtitleGetter: PropTypes.func;\nsubtitleGetter(schedulerData, event);\n```\n\nUse this function, you can display a subtitle in the `EventItemPopover`.\n\n#### viewEventClick\n\n```js\nviewEventClick: PropTypes.func;\nviewEventClick(schedulerData, event);\n```\n\nCallback function fired when you click one operation link in the `EventItemPopover`. The operation link won't appear if this\nfunction isn't set.\n\n#### viewEventText\n\n```js\nviewEventText: PropTypes.string;\n```\n\nText of one operation link in the `EventItemPopover`. The operation link won't appear if this text isn't set.\n\n#### viewEvent2Click\n\n```js\nviewEvent2Click: PropTypes.func;\nviewEvent2Click(schedulerData, event);\n```\n\nCallback function fired when you click the other operation link in the `EventItemPopover`. The other operation link won't\nappear if this function isn't set.\n\n#### viewEvent2Text\n\n```js\nviewEvent2Text: PropTypes.string;\n```\n\nText of the other operation link in the `EventItemPopover`. The other operation link won't appear if this text isn't set.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStephenChou1017%2Freact-big-scheduler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FStephenChou1017%2Freact-big-scheduler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStephenChou1017%2Freact-big-scheduler/lists"}