Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@aldabil/react-scheduler

Package Overview
Dependencies
0
Maintainers
1
Versions
47
Issues
File Explorer

Advanced tools

@aldabil/react-scheduler

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

    2.2.1latest

Version published
Maintainers
1
Yearly downloads
9,347
increased by340.48%

Weekly downloads

Readme

Source

React Scheduler Component

npm package Twitter URL

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

Options

OptionValue
heightnumber. Min height of table.
Default: 600
viewstring. Initial view to load. options: "week", "month", "day".
Default: "week" (if it's not null)
monthObject. Month view props.
default: {
weekDays: [0, 1, 2, 3, 4, 5],
weekStartOn: 6,
startHour: 9,
endHour: 17,
}
weekObject. Month view props.
default: {
weekDays: [0, 1, 2, 3, 4, 5],
weekStartOn: 6,
startHour: 9,
endHour: 17,
step: 60
}
dayObject. Month view props.
default: {
startHour: 9,
endHour: 17,
step: 60
}
selectedDateDate. Initial selected date.
Default: new Date()
eventsArray of Objects.
Default: []
remoteEventsFunction(query: string). Return promise of array of events. Used for remote data. Query returns start and end timestamps as the user navigation changes the dates currently in view. Example query value: ?start=Sat May 08 2021 00:00:00 GMT+0100 (British Summer Time)&end=Thu May 13 2021 23:59:59 GMT+0100 (British Summer Time). Working example visible here: https://codesandbox.io/s/remote-data-j13ei
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
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
}
viewerExtraComponentFunction(fields, event) OR Component. Additional component in event viewer popper
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",
}
recourseHeaderComponentFunction(resource). Override header component of resource
resourceViewModeDisplay resources mode.
Options: "default", "tabs"
directionstring. Table direction. "rtl", "ltr"
dialogMaxWidthEdito dialog maxWith. Ex: "lg", "md", "sm"... Default:"md"
localeLocale of date-fns. Default:enUS
onEventDropFunction(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

Demos

Todos

Keywords

FAQs

What is @aldabil&#x2F;react-scheduler?

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

Is @aldabil&#x2F;react-scheduler popular?

The npm package @aldabil&#x2F;react-scheduler receives a total of 127 weekly downloads. As such, @aldabil&#x2F;react-scheduler popularity was classified as not popular.

Is @aldabil&#x2F;react-scheduler well maintained?

We found that @aldabil&#x2F;react-scheduler demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 04 Apr 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc