4.0.0 • Published 2 years ago
scheduler-calendar v4.0.0
scheduler-calendar
Scheduler Calendar Component for React Js
Installation
npm install --save scheduler-calendar
Usage
import React, { Component } from 'react'
import SchedulerCalendar from 'scheduler-calendar'
import 'scheduler-calendar/dist/index.css'
class Example extends Component {
render() {
return (
<SchedulerCalendar
availabilities={[
{
day: "mon",
slots: [
{from: '09:00', to: '10:30'},
{from: '11:30', to: '13:00'},
{from: '14:30', to: '17:00'},
],
comment: "Test comment"
},
{
day: "2021-01-26",
slots: [
{from: '09:00', to: '10:30'},
{from: '11:30', to: '19:00'},
]
},
]}
availabilityType={'infinity'}
duration={10}
onIntervalChange={() => {}}
/>
)
}
}
SchedulerCalendar Props
Prop | Type | Description |
---|---|---|
availabilities | Array | List of availabilities. Eg. [{day: "mon", "slots": [{from: "11:00", to: "13:00"}], comment?: "Comment here"}] |
duration | number | Minimum duration of time interval |
onIntervalChange | Function | Callback when a interval is updated and it's contains the array of updated values |
availabilityType | string | values must be one of rolling (for number of days) or range or infinity |
availabilityEndDate | Moment | end of date range when availability type is 'range' |
availabilityStartDate | Moment | start of date range when availability type is 'range' |
availabilityRolling | number | number of rolling days when availability type is 'rolling' |
initialRenderOfRows | number | Optional. number of rows to render at initial |
totalNumOfRows | number | Optional. total number of rows for calendar |
tableContainerStyle | string | Optional. to style calendar |
dayContainerStyle | string | Optional. to style each cell of calendar |
dayTextStyle | string | Optional. to style day text |
intervalsWrapStyle | string | Optional. to style wrapper of interval shown in calendar |
is24hour | boolean | Optional. true if time in 24 hours |
topHeaderStyle | string | Optional. to style header container |
isBusinessDays | boolean | Optional. to avoid sundays and saturdays in rolling days |
isDisabledDateLocked | boolean | Optional. to turn off changing the availability for past date |
stylesOfDay | Function | Optional. Callback with 3 parameters ( day: Date, isAvailable: Boolean, isRolling: Boolean ) for conditional styling |
intervalStyles | Object | Optional. To style each intervals inside a cell |
customHeaderComponent | Function | Function to return custom header |
inputRef | any | Ref object |
isCommentEnabled | boolean | Optional. default false . to enable or disable comment sections for a day |
isEditEnabled | boolean | Optional. default true . to enable or disable edit availabilities |
Screenshots
Authors
License
MIT © Stead
4.0.0
2 years ago
3.2.0
3 years ago
3.1.0
3 years ago
3.0.0
3 years ago
2.2.8
3 years ago
2.2.7
3 years ago
2.2.6
3 years ago
2.2.5
3 years ago
2.2.4
3 years ago
2.2.3
3 years ago
2.2.1
3 years ago
2.2.2
3 years ago
2.2.0
3 years ago
2.1.3
3 years ago
2.1.2
3 years ago
2.1.1
3 years ago
2.0.4
3 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.2.3
3 years ago
1.3.0
3 years ago
1.2.0
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.1.0
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago