Nuclear Pumpkin Mayhem

    @hammaadhrasheedh/react-event-calendar
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.31 • Public • Published

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

    Install

    npm i @hammaadhrasheedh/react-event-calendar

    DownloadsWeekly Downloads

    8

    Version

    0.1.31

    License

    MIT

    Unpacked Size

    73.5 kB

    Total Files

    47

    Last publish

    Collaborators

    • hammaadhrasheedh