Socket
Socket
Sign inDemoInstall

@aldabil/react-scheduler

Package Overview
Dependencies
110
Maintainers
1
Versions
132
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @aldabil/react-scheduler

React scheduler component based on Material-UI & date-fns


Version published
Maintainers
1
Created

Readme

Source

React Scheduler Component

npm package Twitter URL

:warning: 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

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

PropValue
heightnumber. Min height of table.
Default: 600
viewstring. Initial view to load. options: "week", "month", "day".
Default: "week" (if it's not null)
agendaboolean. Activate agenda view
alwaysShowAgendaDaysboolean. if true, day rows without events will be shown
monthObject. 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
}
weekObject. 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
}
dayObject. Day view props.
default:
{
startHour: 9,
endHour: 17,
step: 60,
cellRenderer?:(props: CellProps) => JSX.Element,
hourRenderer?:(hour: string) => JSX.Element,
navigation: true
}
selectedDateDate. Initial selected date.
Default: new Date()
navigationboolean. Show/Hide top bar date navigation.
Default: true
navigationPickerPropsCalendarPickerProps for top bar date navigation. Ref: CalendarPicker API
disableViewNavigatorboolean. Show/Hide top bar date View navigator.
Default: false
eventsArray of ProcessedEvent.
Default: []
type ProcessedEvent = {
event_id: number or string;
title: string;
start: Date;
end: Date;
disabled?: boolean;
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
}
eventRendererFunction(event:ProcessedEvent): JSX.Element.
A function that overrides the event item render function, see demo Custom Event Renderer below
editableboolean. 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.
deletableboolean. 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.
draggableboolean. Whether activate drag&drop for the events, this is applied to all events, and can be overridden in each event property, see ProcessedEvent type.
getRemoteEventsFunction(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";
}
fieldsArray of extra fields with configurations.
Example:
 { 
name: "description",
type: "input" ,
config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....
}
loadingboolean. Loading state of the calendar table
loadingComponentCustom component to override the default CircularProgress
onConfirmFunction(event, action). Return promise with the new added/edited event use with remote data.
action: "add", "edit"
onDeleteFunction(id) Return promise with the deleted event id to use with remote data.
customEditorFunction(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
}
customViewerFunction(event: ProcessedEvent, close: () => void). Used to render fully customized content of the event popper. If used, viewerExtraComponent & viewerTitleComponent will be ignored
viewerExtraComponentFunction(fields, event) OR Component. Additional component in event viewer popper
viewerTitleComponentFunction(event). Helper function to render custom title in event popper
disableViewerboolean. If true, the viewer popover will be disabled globally
resourcesArray. 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",
}
resourceFieldsObject. Map the resources correct fields.
Example:
{
idField: "admin_id",
textField: "title",
subTextField: "mobile",
avatarField: "title",
colorField: "background",
}
resourceHeaderComponentFunction(resource). Override header component of resource
resourceViewModeDisplay resources mode.
Options: "default" | "vertical" | "tabs"
directionstring. Table direction. "rtl" | "ltr"
dialogMaxWidthEdito dialog maxWith. Ex: "lg" | "md" | "sm"... Default:"md"
localeLocale of date-fns. Default:enUS
hourFormatHour format.
Options: "12" | "24"...Default: "12"
timeZoneString, time zone IANA ID: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
translationsObject. 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",
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..."
}
onEventDropFunction(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
onEventClickFunction(event: ProcessedEvent): void. Triggered when an event item is clicked
onEventEditFunction(event: ProcessedEvent): void. Triggered when an event item is being edited from the popover
onCellClickFunction(start: Date, end: Date, resourceKey?: string, resourceVal?: string
onSelectedDateChangeFunction(date: Date): void. Triggered when the selectedDate prop changes by navigation date picker or today button
onViewChangeFunction(view: View, agenda?: boolean): void. Triggered when navigation view changes
stickyNavigationIf true, the navigation controller bar will be sticky
onClickMoreFunction(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
  • Drag&Drop - partially
  • Resizable
  • Recurring events
  • Localization
  • Hour format 12 | 24

Keywords

FAQs

Last updated on 25 May 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc