rwc
react-week-calendar
npm i react-week-calendar
rwc

react-week-calendar

A flexible week calendar implemented in React.js.

by Evgeny

0.1.3 (see all)License:MITTypeScript:Not Found
npm i react-week-calendar
Readme

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

PropertyTypeDefaultDescription
firstDaymomentObjmoment()The day of the first column
numberOfDaysnumber7How many days to show in calendar/ Number of columns
scaleHeaderTitlestring''The text for the top left cell
headerCellComponentReactComponentHeaderCellThe react component that gets used for rendering of header cell
dayFormatstring'dd., DD.MM'formatter for the header cells
startTimemomentObjmoment({h: 0, m: 0})From which time to show calendar
endTimemomentObjmoment({h: 23, m: 59})Until which time to show calendar
scaleUnitnumber15Pulsing of the calendar in minutes
scaleFormatstring'HH:mm'formatter for the scale cells
cellHeightnumber25the height of the cell
dayCellComponentReactComponentDayCellThe react component that gets used for rendering of calendar cell. If you want to start selection you need to call startSelection from props.
selectedIntervalsarray[]Array of all selected intervals. Important that all intervals have start and end properties as momentObj. All object is sent to EventComponent
onIntervalSelectfuncSend back the array of selected intervals with start, end and all values from module
onIntervalUpdatefuncSend back the new values of interval
onIntervalRemovefunc
eventComponentReactComponentEventThe react component that gets used for rendering of intervals
onEventClickfunc
modalComponentReactComponentModalThe react component that gets used for rendering of modal
useModalbooltrueIf false, after selection of the intervals the modal will be not shown and intervals will send back
showModalCasearray['create', 'edit']Cases in which to show the modal (create new interval vs. edit existing interval)
eventSpacingnumber15The 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

Downloads/wk

368

GitHub Stars

42

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

5

OPEN PRs

19
VersionTagPublished
0.1.3
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate