React-material-event-calendar NPM

React material event calendar

Simple calendar component based on @mui

Changes in 1.0.7

Reduce bundle size
Other performance fixes

Installation

npm i react-material-event-calendar

"peerDependencies": {
 "@mui/icons-material": "^5.0.0",
  "@mui/material": "^5.0.0",
 }

Usage

import Calendar from 'react-material-event-calendar'

function App() {

//selected days will be available here
 const getSelectedDays = (days) => {
      console.log(days)
  }
  const today = new Date();
  const currentMonth = today.getMonth();
  const currentYear = today.getFullYear();
  return (
    <div className="App">
      <header className="App-header">
      <Calendar month={currentMonth} title="Calendar" selectColor={'red'} getSelectedDays={getSelectedDays} year={currentYear} selectedDays={ {'2020-5': [{ '3': { 'info': 'testing', color :'red' } }, {'8': { 'info': 'testing2' }}] }} />
      </header>
    </div>
  );
}

Options

Currently, these options can be passed to the module

Property	Description	Sample value
title	Title of the component	calendar
days	You can pass in your custom day names as an array (By default it is english day names)	'Sunday', 'Monday'...
month	Initial month(MM) that has to shown when module renders	10 or 04
year	Initial year that(YYYY) has to shown when module renders	2020
selectColor	The color for selected field	red
getSelectedDays	callback function to receive date changes	(dates) => {}
onMonthOrYearChange	callback function to receive month or year change	(year,month) => {}
selectedDays	Here you can pass the dates which needs to be shown as preselected, info refers to tool tip to be shown and color refers to background color( default is blue).	{'2020-5': { '3': { 'info': 'testing', color :'red' } }}