@hammaadhrasheedh/react-event-calendar NPM

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

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>
  );

calendar react-calendar react-event-calendar react

@testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom postcss typescript web-vitals

@everything-registry/sub-chunk-384 @zalastax/nolb-_ham

2 years ago

2 years ago

2 years ago

2 years ago