React Event Calendar

Live demo

Installation

npm install @jfschmiechen/react-event-calendar

API

Calendar Props

| Prop | Type | Description | Default | | ------------- |:---:| ------| :-------------:|
| items | [object] | This is an array of event objects. Each object needs a text, start, and end value. | Null | month | integer | Determines what month the calendar is viewing | Current month | year | integer | Determines what year the calendar is viewing | Current Year | config | object | The config object contains values that won't be changing often such as event declarations. See next table and examples below. | Null

Config Object

| Key | Type | Description | Default | | ----| -----| ----------- | ------- | | height | string | Height of calendar. Value must be calculable otherwise the calendar frame loses integrity. | 600px | | width | string | Width of calendar. Value must be calculable otherwise the calendar frame loses integrity. | 1000px | colors | object | Allows customization of calendar theme. Object contains primaryColor and secondaryColor fields |{ primaryColor: 'slateblue', secondaryColor: 'lightslategray' } | onEventClick | function | Takes a function that is passed the click event, calendar event, and an array of all events in it's tile. | Null | onTileClick | function | Takes a function that is passed an array of all events in the tile, and the click event. | Null | onPlusMoreClick | function | Functionally the same as onTileClick, but is triggered when the tile overflow text is clicked. | Null | weekDays | [string] | Starting on Sunday, this array contains names of each week day. If you want the day names to be in another language, override this with an array of the translated names. | ['Sunday', 'Monday', ...] | dateFormat | string | This needs to be set if you are using a different date format than the default value. That way, the calendar can parse dates correctly. See moment.js for more formats. | 'YYYY-MM-DD' |

Event Schema

| Key | Type | Description | | --- | ---- | ----------- | | text | string | This is the text that appears on the event itself. | | start | string | The date / date time the event starts. | end | string | The date / date time the event ends. | color | string | If this is not set the event will take on the primaryColor defined in the config.

• If your events have more fields than these, include them when you pass the events to the calendar and they will be available to use when the event listeners fire.

Example

import React from 'react';
import { EventCalendar, eventTypes } from '@jfschmiechen/react-event-calendar';

// Event source (array of event objects)
import events from './lib/resources/events-json';

let parsedEvents = [];
// Create shim so that the calendar can get the correct data from each event.
// In this example, I am using events from a google calendar.
events.items.map(event => {
    let tempObject = {};

    tempObject.start = event.start.dateTime ? event.start.dateTime : event.start.date;
    tempObject.end = event.end.dateTime ? event.end.dateTime : event.end.date;
    tempObject.text = event.summary;

    parsedEvents.push(tempObject);
});

// These colors allow customization to the theme.
// default colors are slateblue and lightslategray.
let colors = {
    primaryColor: 'slateblue',
    secondaryColor: 'lightslategray'
};

// The config contains all settings for the event calendar.
// See the API table to see all possible values.
let config = {
    colors,
    onEventClick: (e, event, eventArray) => console.log(event.type === eventTypes.SINGLE_DAY_TYPE),
    onTileClick: (e, eventArray) => console.log(eventArray),
    onPlusMoreClick: (e, eventArray) => console.log(eventArray)
};

// Lastly, pass the events and config to the calendar, and you are done.
function App() {
  return (
      <EventCalendar items={parsedEvents} month={5} year={2019} config={config} />
  );
}

export default App;

Notes

• Events passed to this component are deep copied in order to keep immutability.
• If calendar width is less than 450px OR height is less than 520px, the calendar will enter a mobile view since at that size the full size events are not legible.

Built With

• moment.js - I used this to handle dates and formatting.
• react-resize-detector - Used to make the calendar more responsive.
• materialUI - Used this to create calendar tiles and events.

Authors

• James Schmiechen - Learn more

License

This project is licensed under the MIT License - see the LICENSE.md file for details