Mui-event-library NPM

MUI-EVENT-LIBRARY

Developed By: Ashish Arora (GitId: ashisharora1998)

This is a Full year event calendar created with the help of MUI DatePicker.You can use this library easily by importing the component inside your project.

There’s no such library available like this where you can easily pass dates to show events on a complete year calendar.

Steps to run this project:

Open the command prompt inside your project
npm install mui-event-library - - save
npm start

Example:

  <Calendar
    year="2023"
    values={["2023-12-18", "2023-11-18", "2023-01-12"]}
    selectBadgeBackgroundColor={"black"}
    selectBadgeTextColor={"white"}
    badgeTextColor={"black"}
    onDateClick={(e, day, isSelected) => console.log(e, day, isSelected)}
    dateFormat={"YYYY-MM-DD"}
  />

Props list:

selectBadgeBackgroundColor:

This prop sets a background color as a highlighter for your event badge to differentiate it from the other regular dates. All Event badges will have the same color.

selectBadgeTextColor:

This prop sets a text color for the event badge. (Default color: black)

badgeTextColor:

This prop sets a text color for the regular dates.

values:

Pass an array of formatted dates of events to highlight them on the calendar.ex:“12-02-2022”,”12-05-2022”,”12-02-2022”,”11-23-2022”,”11-18-2022”.

onDateClick:

Pass a function to perform any event on click of any date. This prop will return 3 values e, day, and isSelected. You can also use the e to add any tooltip or popover on click of any date.