Scheduler-calendarr NPM

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

calendar scheduler TimeandDate availability

clsx formik moment

@everything-registry/sub-chunk-2715

4.0.0

1 year ago