jwf-year-calendar

A full react version of Paul-DS' js-year-calendar, https://github.com/year-calendar/js-year-calendar. Built with support from JWF Process Solutions Ltd.

Installation

• From the Node package manager, using the following command: npm install jwf-year-calendar or npm i jwf-year-calendar
• From Yarn, using the following command: yarn add jwf-year-calendar

Usage

The calendar can be created using the following javascript code :

import Calendar from 'jwf-year-calendar';

render() {
    return (<Calendar />);
}

Using options

You can specify props to customize the calendar for your needs:

render() {
    return (
        <Calendar enableRangeSelection={true} weekStart={0}/>
    );
}

The props are as follows

Option name	Description	Type	Default value
contextMenuItems	Specifies the items of the default context menu. This returns a callback function	array	[]
dataSource	The elements that must be displayed on the calendar.	array or function	[]
disabledDays	The days that must be displayed as disabled.	array	[]
enableRangeSelection	Specifies whether the range selection is enabled.	boolean	false
weekStart	The starting day of the week. This option overrides the parameter define in the language file.	number	0
darkMode	Allows user to select if they want the contextmenu and day tile to display in dark mode or not	boolean	'false'

Event name	Description	Parameter
onRangeSelected	Function fired when a date range is selected.	{ startDate, endDate }
onYearChange	Function fired when the visible year of the calendar is changed.	{ currentYear }