Tsdev-react-scheduler NPM

tsdev-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.

Documented Version:

v1.0.0

Features:

Design based on Material-UI
Four date modes (day, week, month, year)
Togglable header elements
More than 70 properties help you with an individual design
Functions as properties help with the further use of the data
There is also an opportunity to display the events as read-only
There is a dialog for configuring/exploring the 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
...

Installation

npm install --save tsdev-react-scheduler

Import & Usage

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

...

<Scheduler />

CSS

./node_modules/tsdev-react-scheduler/dist/index.css

Storybook

./storybook-static/index.html

Properties

Property	Type	Required	Default	Info
contentHeight	number	false	307
dayNameSun	string	false	Sunday
dayNameMon	string	false	Monday
dayNameTue	string	false	Tuesday
dayNameWed	string	false	Wednesday
dayNameThu	string	false	Thursday
dayNameFri	string	false	Friday
dayNameSat	string	false	Saturday
events	array	false	Default Demo Events
eventDialogTitleCreate	string	false	Create Event
eventDialogTitleUpdate	string	false	Update Event
headerDateFormat	string	false	YYYY-MM-DD
headerTitle	string	false	Tsdev React Scheduler
id	string	false	TsdevReactScheduler
labelDialogBtnCancel	string	false	Cancel
labelDialogBtnCreate	string	false	Create
labelDialogBtnDelete	string	false	Delete
labelDialogBtnUpdate	string	false	Update
labelHeaderBtnDay	string	false	Day
labelHeaderBtnMonth	string	false	Month
labelHeaderBtnToday	string	false	Today
labelHeaderBtnWeek	string	false	Week
labelHeaderBtnYear	string	false	Year
labelDialogColor	string	false	Color
labelDialogDescription	string	false	Description
labelDialogEnd	string	false	End
labelDialogLongLasting	string	false	Long Lasting
labelDialogTitle	string	false	Title
labelDialogUntil	string	false	Until
labelDialogUntilDaily	string	false	Mark as daily event
labelDialogUntilWeekly	string	false	Mark as weekly event
labelDialogUntilMonthly	string	false	Mark as monthly event
labelDialogUntilYearly	string	false	Mark as yearly event
monthNameJan	string	false	January
monthNameFeb	string	false	February
monthNameMar	string	false	March
monthNameApr	string	false	April
monthNameMay	string	false	May
monthNameJun	string	false	June
monthNameJul	string	false	July
monthNameAug	string	false	August
monthNameSep	string	false	September
monthNameOct	string	false	October
monthNameNov	string	false	Novemver
monthNameDec	string	false	December
noDataText	string	false	No data
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)
onDeleteEvent	function	false	noop	first argument is an object with keys: deletedEvent (object), filtred events (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)
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
tooltipHeaderBtnPrev	string	false	Previous

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 'tsdev-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}/>

react reactjs material material-ui react-js tsdev library scheduler calendar

@material-ui/core @material-ui/icons @material-ui/lab classnames date-fns fontsource-roboto lodash moment prop-types react react-color react-dom uuid

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago