❤
npm
Sign UpSign In

@aldabil/react-scheduler
TypeScript icon, indicating that this package has built-in type declarations

2.9.5 • Public • Published

React Scheduler Component

npm package Twitter URL

⚠️ Notice: This component uses mui/emotion/date-fns. if your project is not already using these libs, this component may not be suitable.

Installation

npm i @aldabil/react-scheduler

If you plan to use recurring events in your scheduler, install rrule package

Usage

import { Scheduler } from "@aldabil/react-scheduler";

Example

<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"),
    },
  ]}
/>

Scheduler Props

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: 
{
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,
hourRenderer?:(hour: string) => 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
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;
subtitle?: string;
start: Date;
end: Date;
disabled?: boolean;
recurring: RRule;
color?: string or "palette.path";
textColor?: string or "palette.path";
editable?: boolean;
deletable?: boolean;
draggable?: boolean;
allDay?: boolean;
agendaAvatar?: React.ReactElement | string
sx?: Mui sx prop
}
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 = { 
 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
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
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
}
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
viewerSubtitleComponent Function(event). Helper function to render custom subtitle 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 
{
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",
}
resourceHeaderComponent Function(resource). Override header component of resource
resourceViewMode Display resources mode.
_Options*: default
onResourceChange Function(resource: Resource): void. Triggered when the resource tabs changes, only applicable when resourceViewMode="tabs"
direction string. Table direction. rtl
dialogMaxWidth Edito dialog maxWith. Ex: lg
locale Locale of date-fns. Default: enUS
hourFormat Hour format.
Options: 12
timeZone String, time zone IANA ID
translations Object. Translations view props.
default: 
{
 navigation: {
 month: "Month",
 week: "Week",
 day: "Day",
 today: "Today"
 agenda: "Agenda"
 },
 form: {
 addTitle: "Add Event",
 editTitle: "Edit Event",
 confirm: "Confirm",
 delete: "Delete",
 cancel: "Cancel"
 },
 event: {
 title: "Title",
 subtitle: "Subtitle",
 start: "Start",
 end: "End",
 allDay: "All Day"
},
 validation: {
 required: "Required",
 invalidEmail: "Invalid Email",
 onlyNumbers: "Only Numbers Allowed",
 min: "Minimum {{min}} letters",
 max: "Maximum {{max}} letters"
 },
 moreEvents: "More...",
 noDataToDisplay: "No data to display",
 loading: "Loading..."
}
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.

SchedulerRef

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.

Demos

Todos

  • [ ] Tests
  • [x] Drag&Drop - partially
  • [ ] Resizable
  • [x] Recurring events - partially
  • [x] Localization
  • [x] Hour format 12 | 24

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.9.51,036latest

Version History

VersionDownloads (Last 7 Days)Published
2.9.51,036
2.9.416
2.9.3525
2.9.2209
2.9.12
2.9.049
2.8.82
2.8.71
2.8.61
2.8.51
2.8.488
2.8.344
2.8.2101
2.8.11
2.8.023
2.7.2688
2.7.256
2.7.2426
2.7.233
2.7.223
2.7.216
2.7.204
2.7.1945
2.7.181
2.7.172
2.7.161
2.7.151
2.7.143
2.7.133
2.7.121
2.7.114
2.7.10128
2.7.911
2.7.8107
2.7.71
2.7.61
2.7.56
2.7.41
2.7.31
2.7.21
2.7.132
2.7.01
2.6.141
2.6.1332
2.6.121
2.6.111
2.6.101
2.6.91
2.6.81
2.6.728
2.6.62
2.6.51
2.6.41
2.6.34
2.6.21
2.6.11
2.6.01
2.5.143
2.5.131
2.5.121
2.5.111
2.5.101
2.5.82
2.5.71
2.5.61
2.5.53
2.5.41
2.5.32
2.5.22
2.5.11
2.5.08
2.4.11
2.4.01
2.3.101
2.3.91
2.3.81
2.3.71
2.3.61
2.3.51
2.3.41
2.3.33
2.3.21
2.3.11
2.3.01
2.2.42
2.2.31
2.2.21
2.2.11
2.2.01
2.1.41
2.1.31
2.1.21
2.1.11
2.1.04
2.0.02
1.0.3822
1.0.371
1.0.361
1.0.351
1.0.341
1.0.332
1.0.321
1.0.311
1.0.301
1.0.291
1.0.281
1.0.271
1.0.261
1.0.251
1.0.241
1.0.231
1.0.221
1.0.211
1.0.201
1.0.191
1.0.181
1.0.171
1.0.161
1.0.151
1.0.141
1.0.131
1.0.121
1.0.111
1.0.101
1.0.91
1.0.81
1.0.78
1.0.61
1.0.51
1.0.41
1.0.31
1.0.21
1.0.11
1.0.01

Package Sidebar

Install

npm i @aldabil/react-scheduler

Repository

github.com/aldabil21/react-scheduler

Homepage

github.com/aldabil21/react-scheduler#readme

Weekly Downloads

2,324

Version

2.9.5

License

MIT

Unpacked Size

118 kB

Total Files

54

Last publish

Collaborators

  • aldabil21
Try on RunKit
Report malware