Custom calendar for React with event management

Install instruction

npm i custom-calendar-react moment react-modal --save

Instruction

In index.js (root component) import react-modal

import Modal from 'react-modal';

then set app element

Modal.setAppElement('#root')

where is root is the app id where app is being rendered

then import the event calendar where you want to use it

import EventCalendar from 'custom-calendar-react'

then use the component as follows

<EventCalendar 
    ref={this.eventCal}
    eventUpdate={this.eventUpdate}
    eventDelete={this.eventDelete}
    eventCreate={this.eventCreate}
    controlClicked={this.controlClicked}
    date={new Date()} 
    events={[
        {
        name: 'Test Event 1',
        date: moment('15/10/2019 12:00 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 2',
        date: moment('15/10/2019 12:00 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 3',
        date: moment('15/10/2019 02:00 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 3_1',
        date: moment('15/10/2019 02:20 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 3_2',
        date: moment('15/10/2019 02:40 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 3_3',
        date: moment('15/10/2019 04:40 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        color: '#1f8413'
        },
        {
        name: 'Test Event 4',
        date: moment('20/10/2019 06:00 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        viewComponent: <TextView name="Test Event view"/>,
        editComponent: <TextView name="Test Event edit"/>,
        leadTimezone: 'America/Los_Angeles',
        },
        {
        name: 'Test Event 5',
        date: moment('11/09/2019 06:00 AM', 'DD/MM/YYYY HH:mm A').toDate(),
        },
        {
        name: 'Test Event 6',
        date: moment('22/11/2019 04:00 AM', 'DD/MM/YYYY HH:mm A').toDate(),
        },
        {
        name: 'Test Event 7',
        date: moment('22/11/2019 06:00 PM', 'DD/MM/YYYY HH:mm A').toDate(),
        }
    ]}
    slot={30}
    perPage={5}
    workingDays={['monday', 'tuesday', 'wednesday', 'thursday']}
    workingHours={{
        start: '11:00 AM',
        end: '06:30 PM'
    }}
    holidays={[
        {
        date: moment('14/10/2019', 'DD/MM/YYYY').toDate(),
        title: 'Holiday1'
        }, {
        date: moment('19/11/2019', 'DD/MM/YYYY').toDate(),
        title: 'Holiday2'
        }
    ]}
    showDisabledTimeFrames={true}
/>

in component constructor create a ref

this.eventCal = React.createRef();

use this to get data like weekDays

this.eventCal.current.getWeekDates()

which will return weeek start and end days

{
    start: Moment,
    end: Moment
}

to get current date

this.eventCal.current.getDate()

Props

| Name | Type | Default | React Componenteaning | |---|---|---|---| | date | Date | now | initial date to show in calendar | | events | Event[] | [] | All events available | | slot | number | 60 | Slot value for each day in minutes | | workingDays | string[] | [] | sunday, monday, tuesday etc.. | | workingHours | WorkingHour | null | working hours for working days | | holidays | Holiday[] | [] | Holiday list | | perPage | number | 2 | No of events to show in event listing | | eventUpdate | function | null | called when an event is updated | | eventDelete | function | null | called when an event is deleted | | eventCreate | function | null | called when an event is added | | eventFired | function(EVENT_OBJ) | null | called when any action button is clicked | | showDisabledTimeFrames | boolean | true | whether to show disabled timeframes or not |

Data types

| Type | Value | |---|---| | Event | {name: 'name of event', date: 'Date-time of event', viewComponent: React Component, editComponent: React Component, leadTimezone: 'timezone string'...} | |WorkingHour| {start:'10:00 AM',end:'06:30 PM'} | | Holiday | {date:Date, title: 'Title'} | | EVENT_OBJ | {date:Date, action: 'ACTION', view: 'CURRENT_VIEW'} | | ACTION | 'prev', 'next', 'day', 'month', 'week' | | CURRENT_VIEW | 'day', 'month', 'week' |