Getting Started

Installation

npm i events-calendar

Make sure to also import the css somewhere in your application

import 'events-calendar/styles.css';

Creating your first calendar

import { EventsCalendar } from 'events-calendar';

export function FirstCalendarExample() {
    return (
        <div style={{ height: '560px', border: '1px solid #ccc' }}>
            <EventsCalendar events={[{ title: 'My first event!', end: new Date() }]} />
        </div>
    );
}

Result

Colors and multi-day events

To add colors to events, assign each event to one or more groups. If an event is assigned to multiple groups, the event will be shown with multiple colors.

To display multi-day events, add an end to the event.

import { EventsCalendar, useEventsCalendar } from 'events-calendar';
import { events } from './events'

export function ColorsExample() {
    // Optional: set initial calendar date
    const calendar = useEventsCalendar({ initialDate: '01-Aug-2024' });

    return (
        <EventsCalendar
            calendar={calendar}
            events={events}
        />
    );
}

Result

Adding time to events

To display an event along with a time, set isAllDay to false.

The calendar will attempt to read the time from the start and end properties. This can be overridden using the startTime property. If no end or endTime is provided, the event will default to a one-hour event.

The following calendar demonstrates how different permutations of isAllDay, start, end, startTime and endTime are parsed into valid event objects.

import { EventsCalendar, useEventsCalendar } from 'events-calendar';
import { events } from './events';

export function TimeExample() {
    // Optional: set initial calendar date
    const calendar = useEventsCalendar({ initialDate: '04-Aug-2024' });

    return <EventsCalendar calendar={calendar} events={events} />;
}

Result