React-event-booker NPM

Intro

Event based calendar for react that allows disabling specific hour or day.

Setup

npm install react-event-booker
yarn add react-event-booker

Use

import React from 'react'
import Calendar from 'react-event-booker'
import 'react-event-booker/dist/style/styles.css'

function App() {
  const onClickedEvent = e => {
    console.log(e)
  }
  const onSelect = e => {
    console.log(e)
  }
  const onNavigation = e => {
    console.log(e)
  }
  const onViewChange = e => {
    console.log(e)
  }
  const events = [
    {
      start: new Date('2020-03-31T19:50:00+03:00'),
      end: new Date('2020-03-31T21:10:00+03:00'),
      title: 'Example event'
    }
  ]
  return (
    <div className='App'>
      <Calendar
        defaultView={'month'}
        onNavigation={onNavigation}
        onViewChange={onViewChange}
        events={events}
        onSelect={onSelect}
        onClickedEvent={onClickedEvent}
      />
    </div>
  )
}
export default App

Props

Prop	Required	Type	Description
onNavigation	True	Function	Callback funciton triggered when navigation happens
onViewChange	True	Function	Callback funciton triggered on view change
onSelect	True	Function	Calback function triggered when selection ends
onClickedEvent	True	Function	Calback function triggered when event clicked
events	True	Array	Array of event object. Event object = {start: Date , end: Date, title: String }
defaultView	false	Enum	One of 'month', 'day', 'week', 'agenda'
disabledDays	false	Array	Disables the given dates. Value is one or multiple of 'Sun', 'Mon', 'Tue','Wed','Thu','Fri','Sat'. Example: 'Sat', 'Sun'. Event on the disabled days are not shown in the calendar
disabledHours	false	Array	Disables the given hours of day. One or multiple of 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23. Example: 1,2. Event on the disabled hours are not shown in the calendar
weekends	false	Array	Remove the given days from work week view. Mandatory to get the work week working. The weekends days has to be in serial. Example 'Sat', 'Sun' or 'Fri', 'Sat'