Ts-react-scheduler NPM

ts-react-scheduler

example-pic

Abstract:

Here you will find a ReactJS component with which you can display and organize your appointments in a web project. You can easily transfer an array of events to the component and the events are visualized. How you can do this is explained below.

Features:

Design based on Material-UI
Four date modes (day, week, month, year)
Togglable header elements
More than 70 properties to help you with an individual design
Functions as properties to help with the further use of the data
There is also an opportunity to display events as read-only
There is a dialog for configuring / exploring current event
Event dialog contains a color picker
Long lasting events can be marked
No required properties - you can start right away
Labels are configurable, which helps with translation
TypeScript implementation
...

Installation

npm install --save ts-react-scheduler

Usage

import {
    Scheduler
} from 'ts-react-scheduler';

...

<Scheduler />

CSS

./node_modules/ts-react-scheduler/dist/index.css;

Properties

Property	Type	Required	Default	Info
contentHeight	number	false	300
dayNameSun	string	false	Sunday	can be used for translation
dayNameMon	string	false	Monday	can be used for translation
dayNameTue	string	false	Tuesday	can be used for translation
dayNameWed	string	false	Wednesday	can be used for translation
dayNameThu	string	false	Thursday	can be used for translation
dayNameFri	string	false	Friday	can be used for translation
dayNameSat	string	false	Saturday	can be used for translation
events	array	false	Default Demo Events
eventDialogTitleCreate	string	false	Create Event	can be used for translation
eventDialogTitleUpdate	string	false	Update Event	can be used for translation
headerDateFormat	string	false	YYYY-MM-DD
headerTitle	string	false	Tsdev React Scheduler	can be used for translation
id	string	false	TsdevReactScheduler
labelDialogBtnCancel	string	false	Cancel	can be used for translation
labelDialogBtnCreate	string	false	Create	can be used for translation
labelDialogBtnDelete	string	false	Delete	can be used for translation
labelDialogBtnUpdate	string	false	Update	can be used for translation
labelHeaderBtnDay	string	false	Day	can be used for translation
labelHeaderBtnMonth	string	false	Month	can be used for translation
labelHeaderBtnToday	string	false	Today	can be used for translation
labelHeaderBtnWeek	string	false	Week	can be used for translation
labelHeaderBtnYear	string	false	Year	can be used for translation
labelDialogColor	string	false	Color	can be used for translation
labelDialogDescription	string	false	Description	can be used for translation
labelDialogEnd	string	false	End	can be used for translation
labelDialogLongLasting	string	false	Long Lasting	can be used for translation
labelDialogTitle	string	false	Title	can be used for translation
labelDialogUntil	string	false	Until	can be used for translation
labelDialogUntilDaily	string	false	Mark as daily event	can be used for translation
labelDialogUntilWeekly	string	false	Mark as weekly event	can be used for translation
labelDialogUntilMonthly	string	false	Mark as monthly event	can be used for translation
labelDialogUntilYearly	string	false	Mark as yearly event	can be used for translation
monthNameJan	string	false	January	can be used for translation
monthNameFeb	string	false	February	can be used for translation
monthNameMar	string	false	March	can be used for translation
monthNameApr	string	false	April	can be used for translation
monthNameMay	string	false	May	can be used for translation
monthNameJun	string	false	June	can be used for translation
monthNameJul	string	false	July	can be used for translation
monthNameAug	string	false	August	can be used for translation
monthNameSep	string	false	September	can be used for translation
monthNameOct	string	false	October	can be used for translation
monthNameNov	string	false	Novemver	can be used for translation
monthNameDec	string	false	December	can be used for translation
noDataText	string	false	No data	can be used for translation
onClickBtnDay	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number), eventsForDay (array)
onClickBtnMonth	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number), eventsForMonth (array)
onClickBtnNext	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number)
onClickBtnPrev	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number)
onClickBtnWeek	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number), eventsForWeek (array), week (number)
onClickBtnYear	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number), eventsForYear (array), week (number)
onCloseEventDialog	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number)
onCreateEvent	function	false	noop	first argument is an object with keys: newEvent (object), allEvents (array)
onDeleteEvent	function	false	noop	first argument is an object with keys: deletedEvent (object), filteredEvents (array)
onOpenEventDialog	function	false	noop	first argument is an object with keys: selectedYear (number), selectedMonth (number), selectedDay (number)
onUpdateEvent	function	false	noop	first argument is an object with keys: updatedEvent (object), allEvents (array)
readOnly	boolean	false	false
selectedYear	number	false	Current year
selectedMonth	number	false	Current month
selectedDay	number	false	Current day
showHeader	boolean	false	true
showHeaderAction	boolean	false	true
showHeaderBtnGroupDay	boolean	false	true
showHeaderBtnGroupWeek	boolean	false	true
showHeaderBtnGroupMonth	boolean	false	true
showHeaderBtnGroupYear	boolean	false	true
showHeaderDate	boolean	false	true
showHeaderLongLasting	boolean	false	true
showHeaderNavigation	boolean	false	true
showHeaderTitle	boolean	false	true
showNoDataAlert	boolean	false	true
subClass	string	false	''
tooltipHeaderBtnNext	string	false	Next	can be used for translation
tooltipHeaderBtnPrev	string	false	Previous	can be used for translation

Events:

The events are processed as an array of individual event items. An event item consists of several properties.

Event Item:

Property	Type	Required
color	string	yes
description	string	yes
id	string	yes
endYear	number	yes
endMonth	number	yes
endDay	number	yes
endHour	number	yes
endMinute	number	yes
isLongLastingDayItem	boolean	yes
isLongLastingWeekItem	boolean	yes
isLongLastingMonthItem	boolean	yes
isLongLastingYearItem	boolean	yes
startYear	number	yes
startMonth	number	yes
startDay	number	yes
startHour	number	yes
startMinute	number	yes
untilYear	number	yes
untilMonth	number	yes
untilDay	number	yes

Example:

import {
    Scheduler
} from 'ts-react-scheduler';

// ...

const myEvents = [];
const mySpecialEvent = {
    title: 'This is my title',
    description: 'This is only a demo description',
    color: '#64b5f6',
    startYear: 2020,
    startMonth: 8,
    startDay: 1,
    startHour: 3,
    startMinute: 45,
    endYear: 2020,
    endMonth: 8,
    endDay: 1,
    endHour: 4,
    endMinute: 45,
    untilYear: 2021,
    untilMonth: 8,
    untilDay: 1,
    isLongLastingDayItem: true,
    isLongLastingWeekItem: false,
    isLongLastingMonthItem: false,
    isLongLastingYearItem: true,
};

myEvents.push(mySpecialEvent);

// ...

<Scheduler events={myEvents}/>

How to ...

Create a new event:

Make sure the property for readOnly is set to false. Click the header button for Day. Then you can double-click on a corresponding time slot for when you are planning the event. A dialog opens where you can make settings. If the event slot (besides the time slot) is still free, you can double click here as well.

Update an event:

Make sure the property for readOnly is set to false. Click the header button for Day. Then you can click on a corresponding event item. A dialog opens where you can make settings. It is also possible to click on a long scaled event in the header.