react-event-calendar

A monthly calendar view component for React

A Bootstrap 4 based React component to display monthly scheduled events calendar.

Features

• Monthly calendar view
• Can display different types of events (events on exact date, time range events)
• Modern styling and layout (Bootstrap 4)

Installation

npm install react-monthly-events

Demo

Online demo is available! https://react-monthly-events.herokuapp.com/

Working example

You can quickly setup this calendar component on your local machine and see how it works:
lzakrzewski/react-monthly-events-sandbox

Basic usage

import React, { Component } from 'react';
import MonthlyEvents from 'react-monthly-events';

class YourComponent extends Component {
    render() {
        const currentMonth = new Date('2017-01-01');
        const events = [
            { 
                id: 'event-1', 
                start: '2017-01-03 18:00:00', 
                end: '2017-01-03 19:30:00', 
                allDay: false, 
                event: 'Learn ReactJS' 
            },
            { 
                id: 'event-2', 
                start: '2017-01-04 17:01:00',  
                allDay: false, 
                event: 'Go home' 
            },
        ];
        
        return (
            <div className="row">
                <MonthlyEvents
                    currentMonth={ currentMonth }
                    events={ events }
                />
            </div>
        );
    }
}

Props

• currentMonth indicates a month to display. For example if you want to display the calendar page for February 2017 you need to provide any date between "2017-02-01" and "2017-02-28".
  It can be string, an instance of moment or an instance of Date Object.
• events is an array of events to display. The component will filter out the all events from not matching months.

Structure of the event objects

| name | description | type | required | |---------|--------------------------------------------------------------------------------------------------------------------|------------|----------| | id | an unique identifier for the event | string | true | | start | a date when the event starts | ISO string | true | | event | a name of the event | ISO string | true | | allDay | when it is true the event will be a "bar" on the top of a cell when it is false the event will appear as "dot" | boolean | true | | end | a date when the event ends | ISO string | false |

{
    id: 'event-1',
    start: '2017-02-01',
    end: '2017-02-02',
    event: 'Learn ReactJS',
    allDay: false
}

Dependencies

• Bootstrap: "4.x"
• Moment.js: "2.x",
• Lodash: "4.x",
• React: "16.x"