A scheduler and resource planning component built for React and made for modern browsers (IE10+)
A scheduler and resource planning component built for React and made for modern browsers (IE10+), IE needs babel-polyfill.
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).
Inspired by Full Calendar Scheduler.
npm install react-big-scheduler --save
//1. import import Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT} from 'react-big-scheduler' //include `react-big-scheduler/lib/css/style.css` for styles, link it in html or import it here import 'react-big-scheduler/lib/css/style.css' import moment from 'moment' ...//2. create the view model, put it in the props obj let schedulerData = new SchedulerData(new moment().format(DATE_FORMAT), ViewTypes.Week); //set locale moment to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States). moment.locale('zh-cn'); schedulerData.setLocaleMoment(moment); //set resources here or later let resources = [ { 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' }, ]; schedulerData.setResources(resources); //set events here or later, //the event array should be sorted in ascending order by event.start property, otherwise there will be some rendering errors let events = [ { id: 1, start: '2017-12-18 09:30:00', end: '2017-12-19 23:30:00', resourceId: 'r1', title: 'I am finished', bgColor: '#D9D9D9' }, { id: 2, start: '2017-12-18 12:30:00', end: '2017-12-26 23:30:00', resourceId: 'r2', title: 'I am not resizable', resizable: false }, { id: 3, start: '2017-12-19 12:30:00', end: '2017-12-20 23:30:00', resourceId: 'r3', title: 'I am not movable', movable: false }, { id: 4, start: '2017-12-19 14:30:00', end: '2017-12-20 23:30:00', resourceId: 'r1', title: 'I am not start-resizable', startResizable: false }, { id: 5, start: '2017-12-19 15:30:00', end: '2017-12-20 23:30:00', resourceId: 'r2', title: 'R2 has recurring tasks every week on Tuesday, Friday', rrule: 'FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR', bgColor: '#f759ab' } ]; schedulerData.setEvents(events);
...
//3. render the scheduler component, mind that the Scheduler component should be placed in a DragDropContext(father or ancestor). ... const {schedulerData} = this.props; ...
npm install
npm run example
If you fail to execute the
npm installcommand, remove the package-lock.json file and try again.
SchedulerData is the view model of Scheduler, we can modify it to control the view of the Scheduler.
constructor(date=moment().format(DATE_FORMAT), viewType = ViewTypes.Week, showAgenda = false, isEventPerspective = false, newConfig = undefined, newBehaviors=undefined localeMoment = undefined)
dateis a string in
YYYY-MM-DDformat, and is the initial date Scheduler will render. Take the date
2017-12-20for example, Scheduler will render the time window of the week from
2017-12-18to
2017-12-24in
ViewTypes.Weekview type, and will render the time window of the
2017-12month in
ViewTypes.Monthview type.
viewTypeis the initial view type, now Scheduler supports
Day,
Week,
Month,
Quarter,
Year5 built-in view types, in addition Scheduler now supports
Custom,
Custom1,
Custom23 custom view types at the same time, in which you can control the time window yourself, refer to this example.
viewType,
showAgendaand
isEventPerspectiveare a group which should be contained in the SchedulerData.config.views array, and they together decide which view should be rendered. When
showAgendaand
isEventPerspectiveare both
false, Scheduler will render the resource view, refer to this example.
showAgendais a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is read only.
isEventPerspectiveis 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
groupIdand
groupNameproperty to every event object, so that the events having the same
groupIdwill belong to the same big task and be rendered in the same slot in task view. If
groupIdand
groupNameare not provided, SchedulerData will take the
idas the
groupId, and take the
titleas the
groupName. See the
eventsForTaskViewin the DemoData.js for details.
newConfigis a config object, used to override the default config fully or partly.
newBehaviorsis a config object, used to override the default behaviors fully or partly.
localeMomentis a locale moment object, which is unified used in react-big-scheduler. If not provided, Scheduler will come with English(en, United States) locale strings.
setLocaleMoment(localeMoment);
Used to set locale moment to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States)
setResources(resources);
Used to set the resources(the slots in resource view), make sure that there are no duplicated
resource.idin the
resources. See the demo
resourcesin the DemoData.js.
setEvents(events);
Used to set the events. the event array should be sorted in ascending order by event.start property. See the demo
eventsin the DemoData.js. If we use the task view, we'd better add the
groupIdand the
groupNameproperty to each event object, see the
eventsForTaskViewin the DemoData.js for details.
prev();
Let the time window scroll to the left once. When
SchedulerData,viewTypeis
ViewTypes.Month, the time window will scroll a month, when
SchedulerData,viewTypeis
ViewTypes.Week, the time window will scroll a week.
SchedulerData.eventswill be clear after calling this method.
next();
Let the time window scroll to the right once.
SchedulerData.eventswill be clear after calling this method.
setDate((date = moment().format(DATE_FORMAT)));
Let the time window jump to the provided
datedirectly.
SchedulerData.eventswill be clear after calling this method.
setViewType( (viewType = ViewTypes.Week), (showAgenda = false), (isEventPerspective = false) );
Tell SchedulerData to change current view, the
viewType,
showAgendaand
isEventPerspectivegroup should be provided, and should be contained in the
SchedulerData.config.viewsarray.
SchedulerData.eventswill be clear after calling this method.
setEventGroups(eventGroups);
Used to set the event groups(the slots in task view), make sure that there are no duplicated
eventGroup.idin the
eventGroups. This method is optional, and is needed only when
SchedulerData.eventGroupsAutoGeneratedis
false.
setEventGroupsAutoGenerated(autoGenerated);
Tell SchedulerData to generate
SchedulerData.eventGroupsautomatically or not. If
true, SchedulerData will generate the event groups(slots) automatically according to the
event.groupIdand 'event.groupName' automatically. If
groupIdand 'groupName' are not provided, SchedulerData will take
event.idand
event.titleinstead.
setMinuteStep(minuteStep);
Used to set minute step for daily view and refresh the render data.
toggleExpandStatus(slotId);
Used to toggle slot's(and its children's) expand status.
getMinuteStepsInHour();
Used to get minute steps in an hour, it equals 60 / SchedulerData.config.minuteStep.
addResource(resource);
Add the
resourceto the
SchedulerData.resources, make sure that
resource.idis not duplicated. Refer to this example.
addEventGroup(eventGroup);
Add the
eventGroupto the
SchedulerData.eventGroups, make sure that
eventGroup.idis not duplicated. Please note that the
eventGroupadded may be override when
SchedulerData.eventGroupsAutoGeneratedis
trueand
SchedulerData.eventGroupsis auto-generated.
addEvent(newEvent);
Add the
newEventto the
SchedulerData.events, make sure that
newEvent.idis not duplicated. SchedulerData will place the
newEventin the right index according to the
newEvent.startproperty.
updateEventStart(event, newStart);
Update the
newStartto the
event.start,
newStartis a string in
YYYY-MM-DD HH:mm:ssformat(similarly hereinafter). SchedulerData will replace the
eventin the right index according to the
newStartvalue.
updateEventEnd(event, newEnd);
Update the
newEndto the
event.end.
moveEvent(event, newSlotId, newSlotName, newStart, newEnd);
Update the
newSlotId,
newSlotName,
newStart,
newEndof the
event. In resource view, new slot is a resource, while in task view, new slot is a event group. SchedulerData will replace the
eventin the right index according to the
newStartvalue.
removeEvent(event);
Remove the given event from
SchedeulerData.events.
removeEventById(eventId);
Remove event from
SchedeulerData.eventsby the given event id.
getSlots();
Returns the slot array,
SchedulerData.resourcesin resource view,
SchedulerData.eventGroupsin task view.
getSlotById(slotId);
Returns the slot by
slotId, returns
undefinedif not found.
getResourceById(resourceId);
Returns the resource by
resourceId, returns
undefinedif not found.
isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd);
Returns whether an event is in the time window or not, remind that
eventStart,
eventEnd,
windowStart,
windowEndare all moment objects.
The locale string of resource name.
The locale string of task name.
The locale string of agenda view header.
The locale string of add more popover header format.
The locale string of event item popover date format.
The locale string of non-agenda view cell header format of day view type.
The locale string of non-agenda view cell header format of other view types.
Used to resolve the locale string of date label of Scheduler component.(Refer to the getDateLabel func for example)
The width of Scheduler. If schedulerWidth is a number, Scheduler will use fixed width layout, while if schedulerWidth is a percentage, Scheduler will use responsive layout. And in the responsive layout:
actual width of Scheduler = (SchedulerData.documentWidth - SchedulerData.config.besidesWidth) * SchedulerData.config.schedulerWidth
SchedulerData.documentWidthis the window width of browser and will change automatically when resized.
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.
Height of Scheduler table header.
Width of the left Scheduler resource column in agenda view.
Max width of an event item in agenda view.
Width of the left Scheduler resource column in resource view and task view of different view types.
Width of Scheduler table cells in resource view and task view of different view types.
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.
Height of an event item in 3 views.
Line height of an event item in 3 views.
Min height of a slot in non-agenda views, default 0, means there is no min height.
Start hour rendered from in
ViewTypes.Dayin resource view and task view, default 0.
End hour rendered to in
ViewTypes.Dayin resource view and task view, default 23.
Default event item background color in 3 views, will be override if there is a
bgColorproperty in event object.
Selected cells color in resource view and task view, cells are selectable only when
creatableis
true.
Color of non-working time head cells. Modify
SchedulerData.behaviors.isNonWorkingTimeFuncto re-define non-working time. Refer the
isNonWorkingTimefunc in the behaviors.js.
Background color of non-working time head cells.
Background color of non-working time body cells.
Color of cell summary. Modify
SchedulerData.behaviors.getSummaryFuncto display summary in a cell. Refer the
getSummaryfunc in the behaviors.js.
Position of cell summary, supports
SummaryPos.Top,
SummaryPos.TopRight,
SummaryPos.TopLeft,
SummaryPos.Bottom,
SummaryPos.BottomRightand
SummaryPos.BottomLeft.
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
resizableor
startResizableproperty and its value is
false.
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
resizableor
endResizableproperty and its value is
false.
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
movableproperty and its value is
false.
Controls whether to create new event item in resource view and task view.
Controls whether to cross-slot move an event item in resource view and task view. If
false, the
slotIdand
slotNamewon't change in the
moveEventmethod. Refer to this example.
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
conflictOccurredfunction if given. Refer to this example.
Controls Scheduler whether to scroll to special moment automatically when the time window contains special moment. If
true, Scheduler horizontal bar will scroll to special moment after calling
setScrollToSpecialMoment(true)to SchedulerData. Use
SchedulerData.behaviors.getScrollSpecialMomentFuncto tell Scheduler what time the special moment is.
Controls Scheduler whether to display event item popover when moving mouse on an event item, default
true.
Controls Scheduler whether to display calendar popover when clicking on a date label in header, default
true.
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
rrulestring property in
setEventsmethod, 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
recurringEventIdproperty with the value
templateEvent.id.
Controls Scheduler whether to display header, default
true.
Controls Scheduler whether to display weekends in non-agenda view, default
true.
Controls Scheduler whether to move events(only DnDTypes.EVENT type) relatively or absolutely, default
true, means relatively.
Minute step for day view type in non-agenda view, can be 10, 12, 15, 20, 30, 60, etc, default 30.
Array of view that Scheduler will support.
getEventTextFunc(schedulerData, event);
Method that defines the text displayed in the
event.
isNonWorkingTimeFunc(schedulerData, time);
Method that defines non-working time.
getSummary( schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd );
Method that defines the summary text displayed in the Scheduler cells.Refer to this example.
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.
getNonAgendaViewBodyCellBgColor(schedulerData, slotId, header);
Method that sets the background color of cells dynamically.
getScrollSpecialMoment(schedulerData, startMoment, endMoment);
Method that defines the special moment Scheduler will scroll to automatically, when the time window contains that moment.
schedulerData: PropTypes.object.isRequired;
View model of the Scheduler component, provides data.
prevClick: PropTypes.func.isRequired; prevClick(schedulerData);
Callback function fired when the left point bracket '<' is clicked.
nextClick: PropTypes.func.isRequired; nextClick(schedulerData);
Callback function fired when the right point bracket '>' is clicked.
onViewChange: PropTypes.func.isRequired; onViewChange(schedulerData, view);
Callback function fired when the Scheduler view changed.
viewis a json such as { viewType: ViewTypes.Month, showAgenda: true, isEventPerspective: false}.
onSelectDate: PropTypes.func.isRequired; onSelectDate(schedulerData, date);
Callback function fired when a new date is selected.
dateis the new selected data, a string in
YYYY-MM-DDformat.
eventItemClick: PropTypes.func; eventItemClick(schedulerData, event);
Callback function fired when you click an event item.
updateEventStart: PropTypes.func; updateEventStart(schedulerData, event, newStart);
Callback function fired when resizing the start of the
event,
newStartis a string in
YYYY-MM-DD HH:mm:ssformat.
updateEventEnd: PropTypes.func; updateEventEnd(schedulerData, event, newEnd);
Callback function fired when resizing the end of the
event,
newEndis a string in
YYYY-MM-DD HH:mm:ssformat.
moveEvent: PropTypes.func; moveEvent((schedulerData, event, slotId, slotName, newStart, newEnd));
Callback function fired when moving the
event.
slotId,
slotNameare the new
idand
nameof the slot moving into, but they won't change if the
SchedulerData.config.crossResourceMoveis
false.
newStart,
newEndare the new beginning and ending of the
event.
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.
slotIdand
slotNameare the slot creating in or dropping into,
start,
endare the beginning and ending of the event. If it's a drag&drop operation, the
typeis the DnDType of DnDSource registered to Scheduler, and the
itemis the external item.
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: 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.checkConflictis
true.
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: 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: PropTypes.func; slotItemTemplateResolver(schedulerData, slot, slotClickedFunc, width, clsName);
Use this function, you can customize the left slot style.
nonAgendaCellHeaderTemplateResolver: PropTypes.func; nonAgendaCellHeaderTemplateResolver( schedulerData, item, formattedDateItems, style );
Use this function, you can customize the table header cell style. Refer to this example.
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: 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: 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: 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: 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.
newStateis a json such as {headerItem: headerItem, left: 20, top: 20, height: 100}. Refer to this example.
subtitleGetter: PropTypes.func; subtitleGetter(schedulerData, event);
Use this function, you can display a subtitle in the
EventItemPopover.
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: PropTypes.string;
Text of one operation link in the
EventItemPopover. The operation link won't appear if this text isn't set.
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: PropTypes.string;
Text of the other operation link in the
EventItemPopover. The other operation link won't appear if this text isn't set.