custom-calendar-react v1.0.2

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

Data types