Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@aldabil/react-scheduler
Advanced tools
: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";
<Scheduler
view="month"
events={[
{
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"),
},
]}
/>
All props are optional
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) |
agenda | boolean. Activate agenda view |
alwaysShowAgendaDays | boolean. if true, day rows without events will be shown |
month | Object. Month view props. default: { |
week | Object. Week view props. default: { |
day | Object. Day view props. default: { |
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 |
disableViewNavigator | boolean. Show/Hide top bar date View navigator. Default: false |
events | Array of ProcessedEvent. Default: [] type ProcessedEvent = { |
eventRenderer | Function(event:ProcessedEvent): JSX.Element. A function that overrides the event item render function, see demo Custom Event Renderer below |
editable | boolean. 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. |
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(RemoteQuery). Return promise of array of events. Can be used as a callback to fetch events by parent component or fetch.type RemoteQuery = { |
fields | Array of extra fields with configurations. Example: { |
loading | boolean. Loading state of the calendar table |
loadingComponent | Custom component to override the default CircularProgress |
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: { |
customViewer | Function(event: ProcessedEvent, close: () => void). Used to render fully customized content of the event popper. If used, viewerExtraComponent & viewerTitleComponent will be ignored |
viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer popper |
viewerTitleComponent | Function(event). Helper function to render custom title in event popper |
disableViewer | boolean. If true, the viewer popover will be disabled globally |
resources | Array. Resources array to split event views with resources Example { |
resourceFields | Object. Map the resources correct fields. Example: { |
resourceHeaderComponent | Function(resource). Override header component of resource |
resourceViewMode | Display resources mode. Options: "default" | "vertical" | "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: { |
onEventDrop | Function(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 |
onEventClick | Function(event: ProcessedEvent): void. Triggered when an event item is clicked |
onEventEdit | Function(event: ProcessedEvent): void. Triggered when an event item is being edited from the popover |
onCellClick | Function(start: Date, end: Date, resourceKey?: string, resourceVal?: string |
onSelectedDateChange | Function(date: Date): void. Triggered when the selectedDate prop changes by navigation date picker or today button |
onViewChange | Function(view: View, agenda?: boolean): void. Triggered when navigation view changes |
stickyNavigation | If true, the navigation controller bar will be sticky |
onClickMore | Function(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>
<div>
<Button onClick={()=>{
calendarRef.current.scheduler.handleState("day", "view");
}}>
Change View
</Button>
<Button onClick={()=>{
calendarRef.current.scheduler.triggerDialog(true, {
start: /*Put the start date*/,
end: /*Put the end date*/
})
}}>
Add Event Tomorrow
</Button>
</div>
<Scheduler
ref={calendarRef}
events={EVENTS}
//...
/>
</Fragment>
};
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.
FAQs
React scheduler component based on Material-UI & date-fns
The npm package @aldabil/react-scheduler receives a total of 2,679 weekly downloads. As such, @aldabil/react-scheduler popularity was classified as popular.
We found that @aldabil/react-scheduler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.