React-week-calendar-opt NPM

react-week-calendar

A flexible week calendar implemented in React.js. Additional dependency is moment.js

Demo

Live demo: http://birik.github.io/react-week-calendar/

In order to run demo locally, clone the repo and run:

npm install
npm start

and open localhost:3000 in your browser.

Installation

npm install react-week-calendar --save

react-week-calendar in addition to react.js dependes on moment.js. You need to have it in your dependencies:

npm install moment --save

Usage

You need to import the component and styles in your application as follows:

import WeekCalendar from 'react-week-calendar';

import 'react-week-calendar/dist/style.less';
// or import css file
// import 'react-week-calendar/dist/style.css';

Props

Property	Type	Default	Description
`firstDay`	momentObj	moment()	The day of the first column
`numberOfDays`	number	7	How many days to show in calendar/ Number of columns
`scaleHeaderTitle`	string	''	The text for the top left cell
`headerCellComponent`	ReactComponent	HeaderCell	The react component that gets used for rendering of header cell
`dayFormat`	string	'dd., DD.MM'	formatter for the header cells
`startTime`	momentObj	moment({h: 0, m: 0})	From which time to show calendar
`endTime`	momentObj	moment({h: 23, m: 59})	Until which time to show calendar
`scaleUnit`	number	15	Pulsing of the calendar in minutes
`scaleFormat`	string	'HH:mm'	formatter for the scale cells
`cellHeight`	number	25	the height of the cell
`dayCellComponent`	ReactComponent	DayCell	The react component that gets used for rendering of calendar cell. If you want to start selection you need to call startSelection from props.
`selectedIntervals`	array	[]	Array of all selected intervals. Important that all intervals have start and end properties as momentObj. All object is sent to EventComponent
`onIntervalSelect`	func		Send back the array of selected intervals with start, end and all values from module
`onIntervalUpdate`	func		Send back the new values of interval
`onIntervalRemove`	func
`eventComponent`	ReactComponent	Event	The react component that gets used for rendering of intervals
`onEventClick`	func
`modalComponent`	ReactComponent	Modal	The react component that gets used for rendering of modal
`useModal`	bool	true	If false, after selection of the intervals the modal will be not shown and intervals will send back
`showModalCase`	array	'create', 'edit'	Cases in which to show the modal (create new interval vs. edit existing interval)
`eventSpacing`	number	15	The amount of horizontal space (in pixels) between events

If you want to change the styles of the component, you should overwrite the less variable. For example:

@import "~react-week-calendar/dist/style.less";

@calendar-max-height: 350px;
@header-height: 35px;
@column-min-width: 200px;
@scale-width: 100px;

Check all variables and default values in style.less

react calendar

prop-types

@infinitebrahmanuniverse/nolb-react-we @everything-registry/sub-chunk-2623

0.1.4

2 years ago