React Weekly Calendar Tutorial | DayPilot Code
source link: https://code.daypilot.org/42221/react-weekly-calendar-tutorial
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Features
React 17 application that builds event calendar UI using React Event Calendar component from DayPilot Pro package
The React calendar appearance is customized using CSS
Built-in date picker that can be used for switching the visible week
React project available for download
The React project includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.
React Calendar Component
You can add the React calendar component to your JSX using <DayPilotCalendar>
tag:
import React, {Component} from 'react'; import {DayPilot, DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { render() { return ( <div> <DayPilotCalendar /> </div> ); } } export default Calendar;
Out of the box, the React calendar component displays the current date. Later in this tutorial, we will see how to enable week view and set custom start date.
The DayPilotCalendar
React component is available as part of DayPilot Pro JavaScript, React package (daypilot-pro-react
). This package is hosted at npm.daypilot.org.
You can add it to your React application using npm
or yarn
.
npm install https://npm.daypilot.org/daypilot-pro-react/trial/2021.2.5000.tar.gz --save
yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2021.2.5000.tar.gz
Weekly Calendar
By default, the calendar displays one day (day view). There are several modes available:
WorkWeek
Days (custom number of days)
Resources (custom columns)
We will switch the calendar to the week view using viewType
property:
import React, {Component} from 'react'; import {DayPilot, DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { constructor(props) { super(props); this.state = { viewType: "Week" }; } render() { var {...config} = this.state; return ( <div> <DayPilotCalendar {...config} /> </div> ); } } export default Calendar;
React Calendar: Appearance Customization
We will make a couple of changes to the calendar appearance.
By default, the calendar events display a duration bar at the left side. It indicates the real event duration in case that in doesn't match the grid cells exactly.
In our React application, we will turn the duration bar off using durationBarVisible property:
import React, {Component} from 'react'; import {DayPilot, DayPilotCalendar, DayPilotNavigator} from "daypilot-pro-react"; import "./CalendarStyles.css"; class Calendar extends Component { constructor(props) { super(props); this.state = { // ... durationBarVisible: false, // ... }; } render() { var {...config} = this.state; return ( <div> <DayPilotCalendar {...config} /> </div> ); } } export default Calendar;
As the next step, we will customize the appearance of the calendar events using CSS.
The calendar styles are set by a CSS theme. The calendar component includes a built-in theme which defines the default appearance ("calendar_default"
).
You can create your own theme using the online theme designer or you can simply override selected styles of the built-in theme. That's what we are going to do in this example:
CalendarStyles.css
/* adjusting the built-in theme */ /* calendar event */ .calendar_default_event_inner { background: #2e78d6; color: #fff; border: none; font-size: 10pt; padding: 5px; opacity: 0.8; }
This CSS overrides the default calendar event appearance - it will use white text on semi-transparent light blue background:
Date Picker: Navigator Component
In order to let users change the visible week, we will use a date picker component called Navigator. You can add the navigator to the React JSX page using <DayPilotNavigator>
tag:
render() { return ( <div> <DayPilotNavigator /> // ... </div> ); }
The navigator fires onTimeRangeSelected event whenever a user clicks a date:
render() { return ( <div> <DayPilotNavigator onTimeRangeSelected={ args => { console.log("You clicked: " + args.day); }} /> // ... </div> ); }
We will use this event to change the startDate
property of the state
object. React will detect the change and the calendar component will be updated automatically.
import React, {Component} from 'react'; import {DayPilot, DayPilotCalendar, DayPilotNavigator} from "daypilot-pro-react"; import "./CalendarStyles.css"; const styles = { wrap: { display: "flex" }, left: { marginRight: "10px" }, main: { flexGrow: "1" } }; class Calendar extends Component { constructor(props) { super(props); this.state = { viewType: "Week", durationBarVisible: false }; } render() { var {...config} = this.state; return ( <div style={styles.wrap}> <div style={styles.left}> <DayPilotNavigator selectMode={"week"} showMonths={3} skipMonths={3} onTimeRangeSelected={ args => { this.setState({ startDate: args.day }); }} /> </div> <div style={styles.main}> <DayPilotCalendar {...config} ref={component => { this.calendar = component && component.control; }} /> </div> </div> ); } } export default Calendar;
React Calendar: Loading Events
The calendar event data can be loaded by setting events
property of the state object:
componentDidMount() { // load event data this.setState({ startDate: "2021-10-11", events: [ { id: 1, text: "Event 1", start: "2021-10-11T10:30:00", end: "2021-10-11T13:00:00" }, { id: 2, text: "Event 2", start: "2021-10-12T09:30:00", end: "2021-10-12T11:30:00", backColor: "#38761d" }, { id: 2, text: "Event 3", start: "2021-10-12T12:00:00", end: "2021-10-12T15:00:00", backColor: "#cc4125" }, ] }); }
Full Source Code
Calendar.js
import React, {Component} from 'react'; import {DayPilot, DayPilotCalendar, DayPilotNavigator} from "daypilot-pro-react"; import "./CalendarStyles.css"; const styles = { wrap: { display: "flex" }, left: { marginRight: "10px" }, main: { flexGrow: "1" } }; class Calendar extends Component { constructor(props) { super(props); this.state = { viewType: "Week", durationBarVisible: false, timeRangeSelectedHandling: "Enabled", onTimeRangeSelected: async args => { const dp = this.calendar; const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1"); dp.clearSelection(); if (!modal.result) { return; } dp.events.add({ start: args.start, end: args.end, id: DayPilot.guid(), text: modal.result }); }, eventDeleteHandling: "Update", onEventClick: async args => { const dp = this.calendar; const modal = await DayPilot.Modal.prompt("Update event text:", args.e.text()); if (!modal.result) { return; } const e = args.e; e.data.text = modal.result; dp.events.update(e); }, }; } componentDidMount() { // load event data this.setState({ startDate: "2021-10-11", events: [ { id: 1, text: "Event 1", start: "2021-10-11T10:30:00", end: "2021-10-11T13:00:00" }, { id: 2, text: "Event 2", start: "2021-10-12T09:30:00", end: "2021-10-12T11:30:00", backColor: "#38761d" }, { id: 2, text: "Event 3", start: "2021-10-12T12:00:00", end: "2021-10-12T15:00:00", backColor: "#cc4125" }, ] }); } render() { var {...config} = this.state; return ( <div style={styles.wrap}> <div style={styles.left}> <DayPilotNavigator selectMode={"week"} showMonths={3} skipMonths={3} startDate={"2021-10-15"} selectionDay={"2021-10-15"} onTimeRangeSelected={ args => { this.setState({ startDate: args.day }); }} /> </div> <div style={styles.main}> <DayPilotCalendar {...config} ref={component => { this.calendar = component && component.control; }} /> </div> </div> ); } } export default Calendar;
History
June 13, 2021: Upgraded to DayPilot Pro for JavaScript 2021.2.5000
November 27, 2020: Upgraded to React 17, DayPilot Pro for JavaScript 2020.4.4784
September 20, 2019: Upgraded to React 16.9, DayPilot Pro for JavaScript 2019.3.4012
June 9, 2018: Initial release
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK