Demo |
---|
Try it now! |
Simple, extensible scheduler and calendar components for React, modeled after Google Calendar.
- Provides a month-by-month calendar component, and a week-by-week scheduler component
- Automatically resizes overlapping events to best fit the screen
- Supports click-and-drag event creation
- Supports daily, weekly, biweekly, weekday, and annual repeating events
- Works with native JS
Date
objects - Provides a condensed mobile view for small screens
- Entirely self-contained, with each fitting cleanly into unstyled
<div>
s - Fully customizable either by class names or
style
prop - Accessible and ARIA-compliant
- Dependency-free other than React itself
- Exposes simple interfaces for working with components' data
- Includes a custom (optional)
useArrayState
React hook to simplify appending to and deleting from a state array
- Includes a custom (optional)
To install, run:
$ npm install --save @cubedoodl/react-simple-scheduler
# Or:
$ yarn add @cubedoodl/react-simple-scheduler
Minimal usage of both modules (including the custom hook) is as follows:
import React, { useState } from "react";
import { Calendar, Scheduler, useArrayState } from "@cubedoodl/react-simple-scheduler";
function App(){
const [selected, setSelected] = useState(new Date());
const [events, setEvents, addEvent] = useArrayState();
return (
<>
<Calendar
selected={selected}
setSelected={setSelected}
/>
<Scheduler
events={events}
selected={selected}
setSelected={setSelected}
onRequestAdd={(evt) => addEvent(evt)}
onRequestEdit={(evt) => alert("Edit element requested")}
/>
</>
);
}
This is relatively similar to what is contained in the demo.
The currently-selected date.
- Type:
Date
- Required: Yes
The React function to change the value of selected
.
- Type:
(val: Date) => void
- Required: Yes
The style objects to be passed to the calendar's elements.
- Type:
{
container: React.CSSProperties; // Refers to a <div> with className="react-simple-calendar"
head: React.CSSProperties; // Refers to a <div> with className="head"
body: React.CSSProperties; // Refers to a <table> with className="body"
}
- Required: No
The array of events to be drawn on the scheduler.
- Type:
Array<SchedulerExistingEvent>
interface SchedulerExistingEvent {
from: Date;
to: Date;
name: string;
calendar: { name: string; enabled: boolean; }
style?: React.CSSProperties
}
- Required: Yes
The currently-selected date.
- Type:
Date
- Required: Yes
The React function to change the value of selected
.
- Type:
(val: Date) => void
- Required: Yes
The function called when the user requests a new event be created.
- Type:
(evt: SchedulerEvent) => void
- Required: Yes
- Note: The scheduler does not automatically add the new event to the
events
array.
The function called when the user clicks on an existing event.
- Type:
(evt: SchedulerEvent) => void
- Required: Yes
Whether click-and-drag event creation is enabled.
- Type:
boolean
- Required: No
- Default:
true
The style objects to be passed to the calendar's elements.
- Type:
{
container: React.CSSProperties; // Refers to a <div> with className="react-simple-scheduler"
head: React.CSSProperties; // Refers to a <div> with className="head"
body: React.CSSProperties; // Refers to a <div> with className="body"
}
- Required: No
Note: Calendar.scss
provides the default styles, and is written to be as minimal and readable as possible.
The main calendar container, containing all visible elements.
The header containing the month name and forward/back buttons.
The main body of the calendar, containing day buttons.
An individual day in the calendar. Has the class .selected
when it is clicked, and .today
when it is the current date.
Note: Scheduler.scss
provides the default styles, and is written to be as minimal and readable as possible.
The main scheduler container, containing all visible elements.
The header containing the month name, forward/back buttons, and "Today" button.
The main body of the calendar, containing the table and added elements.
The table containing hour-by-hour blocks. Stores little information/style on its own, but the size of <td>
s within it are used to compute the positions of added elements.
An added event in the scheduler. If it is currently being created (i.e. click-and-dragged), it has the .current
class as well.
A wrapper around React's standard useState
hook, as well as two utility functions for adding and removing elements respectively.
- Type:
useArrayState(initial: Array | null) => [
Array,
(new_val: Array | null) => void,
(new_el: any) => void,
(to_remove: any) => void
]
- Example:
const [arr, setArr, addEl, removeEl] = useArrayState();
setArr([ 1, 2, 3 ]); // arr is now [ 1, 2, 3 ]
addEl(4); // arr is now [ 1, 2, 3, 4 ]
removeEl(2); // arr is now [ 1, 3, 4 ]
First, install dependencies with:
$ npm
# Or:
$ yarn
Next, build the library with:
$ npm run rollup
# Or:
$ yarn run rollup
This will create an ES module in dist/
.
To start the demo application, run:
$ cd demo
$ npm run start
# Or:
$ yarn run start
- More accesibility features