DayPilot Editions
DayPilot Lite
The Navigator date picker component is included in @daypilot/daypilot-lite-react package.
DayPilot Pro
The Navigator is included in DayPilot Pro for JavaScript.
Tutorials
- React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using the React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS. - React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
Example
import React, {Component} from 'react'; import {DayPilot, DayPilotNavigator} from "@daypilot/daypilot-lite-react"; class DatePicker extends Component { constructor(props) { super(props); this.state = { startDate: null }; } render() { return ( <DayPilotNavigator selectMode={"Week"} showMonths={3} skipMonths={3} onTimeRangeSelected={ args => { this.setState({ startDate: args.day }); }} /> ); } } export default Calendar;