React Big Schedule 是一款基于 React 构建的强大而直观的调度器和资源规划解决方案。
React Big Schedule is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern, browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision.
Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots.
Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning.
To install react-big-schedule, use your preferred package manager:
# npm
npm install react-big-schedule
# yarn
yarn add react-big-schedule
# pnpm
pnpm add react-big-schedule
# bun
bun add react-big-schedule
Contributions to react-big-schedule are welcome! If you find a bug or want to contribute to the project, please follow these steps:
Please ensure that your code adheres to the project's coding conventions and includes appropriate tests.
React Big Schedule is released under the MIT License. See the LICENSE file for more details.
If you have any questions or need support, please create an issue in the GitHub repository.
React Big Schedule is developed and maintained by the React Big Schedule team. We would like to thank the open-source community for their valuable contributions and feedback.
Special thanks to the following contributors:
We would like to acknowledge the following projects for their inspiration and contributions:
We are continuously working on enhancing react-big-schedule and welcome your feedback and suggestions for future improvements.
1.) To install react-big-schedule, use your preferred package manager:
# npm
npm install react-big-schedule
# yarn
yarn add react-big-schedule
# pnpm
pnpm add react-big-schedule
# bun
bun add react-big-schedule
2.) Import dependencies
import { Scheduler, SchedulerData, ViewType, DATE_FORMAT } from "react-big-schedule";
import dayjs from "dayjs";
import "react-big-schedule/dist/css/style.css";
3.) Basic Usage
…
npm install (or yarn, pnpm, bun install)npm run fixnpm run devIf you fail to execute the installation command, remove the lock file (e.g., package-lock.json, bun.lockb) and try again.
SchedulerData is the view model of Scheduler, we can modify it to control the view of the Scheduler.
constructor(date=dayjs().format(DATE_FORMAT), viewType = ViewType.Week,
showAgenda = false, isEventPerspective = false,
newConfig = undefined, newBehaviors=undefined
localeDayjs = undefined)
date is a string in YYYY-MM-DD format, and is the initial date Scheduler will render. Take the date 2022-12-20
for example, Scheduler will render the time window of the week from 2022-12-18 to 2022-12-24 in ViewType.Week
view type, and will render the time window of the 2022-12 month in ViewType.Month view type.viewType is the initial view type, now Scheduler supports Day, Week, Month, Quarter, Year 5 built-in view types,
in addition Scheduler now supports Custom, Custom1, Custom2 3 custom view types at the same time, in which you can control
the time window yourself, refer to this example. viewType,
showAgenda and isEventPerspective are a group which should be contained in the SchedulerData.config.views array,
and they together decide which view should be rendered. When showAgenda and isEventPerspective are both false,
Scheduler will render the resource view, refer to this example.showAgenda is a bool value, if true, Scheduler will display the agenda view of current view type. Agenda view is
read only.isEventPerspective is 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 groupId and
groupName property to every event object, so that the events having the same groupId will belong to the same big task and
be rendered in the same slot in task view. If groupId and groupName are not provided, SchedulerData will take
the id as the groupId, and take the title as the groupName. See the eventsForTaskView in the
sample1.js for details.newConfig is a config object, used to override the default config
fully or partly.newBehaviors is a config object, used to override the default behaviors
fully or partly.localeDayjs is a locale dayjs object, which is unified used in react-big-scheduler. If not provided, Scheduler will come
with English(en, United States) locale strings.setSchedulerLocale(preset);
Used to set locale to the scheduler, it uses dayjs locales (List of supported locales) and it is loaded on demand.
preset will be locale imported from dayjs.
import * as dayjsLocale from 'dayjs/locale/pt-br';
setSchedulerLocale(dayjsLocale);
By default, Scheduler comes with English(en, United States)
setCalendarPopoverLocale(lang);
Used to set locale to the calendar popover. it uses antd locales (List of supported locales). By default, it comes with English(en, United States)
import * as antdLocale from 'antd/locale/pt_BR';
setCalendarPopoverLocale(antdLocale);
refer this for the demo of the locale.
setResources(resources);
Used to set the resources(the slots in resource view), make sure that there are no duplicated resource.id in the resources.
See the demo resources in the sample1.js.
setEvents(events);
Used to set the events. the event array should be sorted in ascending order by event.start property.
See the demo events in the sample1.js.
If we use the task view, we'd better add the groupId and the groupName property to each event object, see the
eventsForTaskView in the sample1.js for details.
Events support both YYYY-MM-DD HH:mm:ss datetime strings and YYYY-MM-DD date-only strings for start and end.
Date-only events are treated as spanning the full calendar day. Month view and the other scheduler views handle both
formats consistently.
prev();
Let the time window scroll to the left once. When SchedulerData,viewType is ViewType.Month, the time window will
scroll a month, when SchedulerData,viewType is ViewType.Week, the time window will scroll a week. SchedulerData.events
will be clear after calling this method.
next();
Let the time window scroll to the right once. SchedulerData.events will be clear after calling this method.
setDate((date = dayjs().format(DATE_FORMAT)));
Let the time window jump to the provided date directly. SchedulerData.events will be clear after calling this method.
setViewType((viewType = ViewType.Week), (showAgenda = false), (isEventPerspective = false));
Tell SchedulerData to change current view, the viewType, showAgenda and isEventPerspective group should be
provided, and should be contained in the SchedulerData.config.views array. SchedulerData.events will 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.id in the eventGroups.
This method is optional, and is needed only when SchedulerData.eventGroupsAutoGenerated is false.
setEventGroupsAutoGenerated(autoGenerated);
Tell SchedulerData to generate SchedulerData.eventGroups automatically or not. If true, SchedulerData will generate the event
groups(slots) automatically according to the event.groupId and 'event.grou
暂无开放 Issues，或尚未同步最近议题。