Tutorials
React Monthly Calendar Editions
DayPilot Lite (Open-Source)
The DayPilot Lite for React package is available at @daypilot/daypilot-lite-react.
npm install @daypilot/daypilot-lite-react
DayPilot Pro
The monthly calendar component is included in DayPilot Pro for JavaScript.
You can install the daypilot-pro-vue package using a link from npm.daypilot.org.
Monthly Calendar Configurator
Instead of configuring the monthly component manually, you can also use the online Monthly Calendar UI Builder configurator. It lets you set the monthly calendar component properties and generate a new React project with all required dependencies.
How to add the React monthly calendar component to your application?
Insert the <DayPilotMonth> tag into your JSX page:
import React, {Component} from 'react'; import {DayPilotMonth} from "daypilot-pro-react"; class Month extends Component { render() { return ( <DayPilotMonth /> ); } } export default Month;
How to configure the React monthly calendar?
You can specify the monthly calendar properties using attributes of the <DayPilotMonth> tag:
import React, {Component} from 'react'; import {DayPilot, DayPilotMonth} from "daypilot-pro-react"; class Month extends Component { render() { return ( <DayPilotMonth startDate={DayPilot.Date.today()} /> ); } } export default Month;
How to load configuration from a React state object?
If you need to change the monthly calendar properties on the fly it's necessary to load the properties from the state object. You can load all properties at once using destructuring assignment.
import React, {Component} from 'react'; import {DayPilot, DayPilotMonth} from "daypilot-pro-react"; class Month extends Component { constructor(props) { super(props); this.state = { startDate: DayPilot.Date.today() }; } render() { const {...config} = this.state; return ( <DayPilotMonth {...config} ref={component => { this.calendar = component && component.control; }} /> ); } } export default Month;
How to access the monthly calendar methods?
In order to access the monthly calendar methods, you need to get a reference to DayPilot.Month object first. It's available as control property of the DayPilotMonth component:
import React, {Component} from 'react'; import {DayPilot, DayPilotMonth} from "daypilot-pro-react"; class Month extends Component { render() { var {...config} = this.state; return ( <div> <DayPilotMonth {...config} ref={component => { this.calendar = component && component.control; }} /> </div> ); } } export default Month;