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