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'},
                  ]
                },
                {
                  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"}]}]
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

Screenshots

Authors

• azadhmhd
• Mishhub
• Ashique-KV
• ayarshabeer

License

MIT © Stead