React Event Calendar

A small & customizable react calendar component to show your daily events for a given month.

Features

• Dotted and filled days for events
• Customize day rendering
• Customize event rendering
• Show Holidays
• Click a day to get the data to showcase on another component

Demo

Demo

Installation

Install react-event-calendar with npm

  npm install @hammaadhrasheedh/react-event-calendar

Styles

Get styles for the calendar

  import '@hammaadhrasheedh/react-event-calendar/dist/themes/default.css'

Other out of the box styling options

  import '@hammaadhrasheedh/react-event-calendar/dist/themes/circular.css'
  import '@hammaadhrasheedh/react-event-calendar/dist/themes/clean.css'
  import '@hammaadhrasheedh/react-event-calendar/dist/themes/neumorphic.css'
  import '@hammaadhrasheedh/react-event-calendar/dist/themes/dark.css'

Simple Example

import { Calendar } from '@hammaadhrasheedh/react-event-calendar'

var events = [
    {
        date: "2022-05-02",
        color: "red",
    },
    {
        date: new Date('2022-05-23'),
        color: "pink",
    },
    {
        date: "2022-05-02",
        color: "#c3c3c3",
    },
];

<Calendar
    eventType="Fill"
    date={'2022-05-09'}
    events={events}
/>

Props

| Prop | Type | Description | Example | | :-------- | :------- | :------- | :------------------------- | | defaultSelected | Moment\|Date\|string | Selects a day by deafult when calendar renders | '2022-12-22' | | holidays | Array<Moment\|Date\|string> | Highlight holidays in unified style | ['2022-12-22', new Date(), moment()]| | events | Array<Object> | Events to mark on the calendar | [{date: "2022-05-02", color: "red", extraData:any}] | | eventType | 'Dots' \| 'Fill' | Determines how the events will be dispalyed in calendar. Default: 'Dots'| | | prefixID | string | Prefixes to the unique id to each date block | | | defaultDayFormater | string | Format how days are displayed in calednder. Default: 'DD' | moment docs | | date | Moment\|Date\|string | Determines which month to be shown in calendar, Default: today | '2022-12-22' \| new Date() \| moment() | | displayWeek | Boolean | Show or hide week section of calendar | | | dateFormat | string | Format how calendar date is displayed in header of calednder. Default: 'MMM YYYY' | moment docs | | headerType | 'EvenSpread' \| 'ActionSeparate' | Formats the layout of the header ( date and action buttons) | |

Methods

| Prop | Params | Description | Example | | :-------- | :------- | :------- | :------------------------- | | renderDay | {isToday, defaultFormatedDay, day, isSelectedDay, isSameMonth, isHoliday, events, index} | Function to customize the render of the full day block | Render Day | | renderDayContent | {isToday, defaultFormatedDay, day, isSelectedDay, isSameMonth, isHoliday, events, index} | Function to customize the content the day | | | renderEvent | event, index | Function to customize the UI of the events | | | prevBtn | | Function to customize the icon/content of previous button | | | nextBtn | | Function to customize the icon/content of next button | | | onClickDay | day | Calls the function when a day is clicked | |

Examples

Render Day

const renderDay = ({
    isToday,
    defaultFormatedDay,
    day,
    isSelectedDay,
    isSameMonth,
    isHoliday,
    events,
    index,
  }) => {

    //   hide days from other months
    if(!isSameMonth){
      return null
    }

    return (
      <div>
        <div
          className={`day-block cursor-pointer\
           ${isToday ? "current-day" : ""}\
           ${isSelectedDay ? "selected-day" : ""}\
           ${!isSameMonth ? "another-month-day" : ""}\
           ${isHoliday ? "holiday" : ""} 
       `}
        >
          {defaultFormatedDay}
        </div>
      </div>
    );
  };

Render Event

  const eventsStyles =  `.events-container{
    top:0;
    right:0;
  }
  .has-events .day{
    color:white
  }
  `

  const renderEvent = (event:any, index:any) => {
    return (
      <div style={{backgroundImage: event.extraData.gradient, width:'100%', height:'100%', zIndex:-1}}>
      </div>
    )

  }
  return (
    <div>
      <style> {eventsStyles} </style>
      <Calendar
        date={"2022-05-09"}
        renderEvent={renderEvent}
        events={[
          {
            date: "2022-05-21",
            color: "#c3c3c3",
            extraData:{gradient:'linear-gradient(to top, #f77062 0%, #fe5196 100%)'}
          },
        ]}
      />
    </div>
  );