0.0.5 • Published 6 years ago
rt-event-calendar v0.0.5
React Event Calendar
A React based event calendar with simple API with the purpose to simplify the booking of hourly events.
Installation
npm i rt-event-calendar --save is default from npmv5.0.0
API
| Name | Type | Default | isRequired | Description |
|---|---|---|---|---|
| workingTime | arrayOf(PropTypes.number) | --- | Yes | The array of two numbers for defining the start and end hours |
| weekDays | PropTypes.object | 'Monday' .... 'Sunday' | No | Object with Names for the days labels in week |
| weekStart | PropTypes.bool | true | No | Boolean to define the day when week should start. true - Monday, false - Sunday |
| busyHours | PropTypes.object | {} | No | Object with index of days as keys and arrays of checked hours as values |
| daysOff | PropTypes.array | [] | No | Array of indexes of days which are off |
| onClick | PropTypes.func | () => {} | No | Callback handler the hour click event. (clickedDay /index/, clickedHour /value from workingTime array / |
workingTime Array | (required)
workingTime: [8, 18] The hours will be rendered from (08.00 - 09.00) to the last one as (17.00 - 18.00)
weekDays Object
weekDays: {
0: 'Mon',
1: 'Tue',
2: 'Wed',
3: 'Thu',
4: 'Fri',
5: 'Sat',
6: 'Sun'
}weekStart Boolean
weekStart: true The week will start from the Monday
weekStart: false The week will start from the Sunday
busyHours Object
busyHours: {
0: [9, 10],
4: [13, 14]
}The hours (09.00 - 10.00) and (10.00 - 11.00) will be disabled on the Monday
The hours (13.00 - 14.00) and (14.00 - 15.00) will be disabled on the Friday
daysOff Array
daysOff: [1, 6] Tuesday and Sunday will be off
onClick Function | (clickedDayIndex, clickedHour)
handleClickEvent = (clickedDayIndex, clickedHour) => {
alert(`clicked ${clickedHour} in ${this.state.weekDays[clickedDayIndex]}`);
};Usage
import Calendar from 'rt-event-calendar';
....
<CalendarWeek
workingTime={this.state.workingTime}
weekDays={this.state.weekDays}
weekStart={this.state.weekStart}
busyHours={this.state.busyHours}
daysOff={this.state.daysOff}
onClick={this.handleClickEvent}
/>