Calendar

Description

Calendar is a calendar-like react component used to display dates with an additional content.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-calendar --save

Standard Calendar (monthly view)

Configuration

let  datesContent  =  {
    //Sets the content of the dates by adding the date as object literal.
    //YYYY-MM-DD  format
	"2022-04-01":  { 
		content:  [<div>COMP1</div>,<span>COMP2</span>]  //An array of components or JSX Element
	},
} 

const  extractSelectedDates  = (val) => {
	...Statement
}

<Calendar
	type="monthly"
	date="Apr 2022"
	data={datesContent}
	selected={['2022-04-01', '2022-04-02']}
	currentDate="2022-04-01"
	getSelected={(event  =>  extractSelectedDates(event)}
/>

Calendar (with specific date range)

Configuration

let  datesContent  =  {
    //Sets the content of the dates by adding the date as object literal.
    //YYYY-MM-DD  format
	"2022-04-01":  { 
		content:  [<div>COMP1</div>,<span>COMP2</span>]  //An array of components or JSX Element
	},
} 

const  extractSelectedDates  = (val) => {
	...Statement
}

<Calendar
	type="date-range"
    date={{from:  '2022-04-01',  to:  '2022-04-15'}} 
	data={datesContent}
	selected={['2022-04-01', '2022-04-02']}
	currentDate="2022-04-01"
	getSelected={(event  =>  extractSelectedDates(event)}
/>

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
type	String	Required	Define the type of calendar to use Possible Values: "monthly" - display all days of the month "date-range" - display a specified date range of the month
date	Object \| String	Required	Defines the date to display String Format: used for monthly type "Mmm YYYY" - ex (Apr 2022) Object Properties: used for date-range type from: string (YYYY-MM-DD) - Define the start date to: string (YYYY-MM-DD) - Define the end date
selected	Array[...String]	Optional	Sets the selected dates on the calendar. date format (YYYY-MM-DD)
viewOnly	Boolean	Optional	Sets the calendar to view only and will disable date selection
currentDate	String	Optional	Sets the current date on the calendar. date format (YYYY-MM-DD)
getSelected	Function	Required	A function to trigger upon selecting a date. The selected dates can be extracted in the function arguments

References

Repository Link: https://bitbucket.org/empowerteams/empower-calendar

NPM Package: npm: empower-calendar

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

Front End