React Weekly Calendar Tutorial

Features

• React Event Calendar component
• Uses CSS to customize the React calendar appearance
• Built-in date picker 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;

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

npm install https://npm.daypilot.org/daypilot-pro-react/trial/2018.2.3319.tar.gz --save

Yarn

yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2018.2.3319.tar.gz

Weekly Calendar

By default, the calendar displays one day. There are several modes available:

• Day
• Week
• WorkWeek
• Days (custom number of days)
• Resources (custom columns)

We will switch the calendar to the week view:

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.

The dimensions are controlled by calendar properties (we will change headerHeight, hourWidth, and cellHeight properties):

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 = {
      // ...
      headerHeight: 30,
      hourWidth: 60,
      cellHeight: 30,
      durationBarVisible: false,
      // ...
    };
  }

  render() {
    var {...config} = this.state;
    return (
      <div>
        <DayPilotCalendar
          {...config}
        />
      </div>
    );
  }
}

export default Calendar;

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 */


/* column header padding */
.calendar_default_colheader_inner {
    padding: 5px;
}


/* row header padding */
.calendar_default_rowheader_inner {
    padding: 5px;
}


/* 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 light blue background:

Date Picker: Navigator Component

In order to let uses change the visible week, we will use a date picker component called Navigator. You can add the navigator to the 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 = {
  left: {
    float: "left",
    width: "220px"
  },
  main: {
    marginLeft: "220px"
  }
};

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewType: "Week",
      headerHeight: 30,
      hourWidth: 60,
      cellHeight: 30,
      durationBarVisible: false
    };
  }


  render() {
    var {...config} = this.state;
    return (
      <div>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"week"}
            cellWidth={30}
            cellHeight={30}
            dayHeaderHeight={30}
            titleHeight={30}
            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 resource and event data
  this.setState({
    startDate: DayPilot.Date.today(),
    events: [
      {
        id: 1,
        text: "Event 1",
        start: "2018-06-04T10:30:00",
        end: "2018-06-04T13:00:00"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2018-06-05T12:00:00",
        end: "2018-06-05T14:00:00",
        backColor: "#38761d"
      }
    ]
  });
}

Full Source Code

Calendar.js

import React, {Component} from 'react';
import {DayPilot, DayPilotCalendar, DayPilotNavigator} from "daypilot-pro-react";
import "./CalendarStyles.css";

const styles = {
  left: {
    float: "left",
    width: "220px"
  },
  main: {
    marginLeft: "220px"
  }
};

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewType: "Week",
      headerHeight: 30,
      hourWidth: 60,
      cellHeight: 30,
      durationBarVisible: false,
      timeRangeSelectedHandling: "Enabled",
      onTimeRangeSelected: args => {
        let dp = this.calendar;
        DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
          dp.clearSelection();
          if (!modal.result) { return; }
          dp.events.add(new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: modal.result
          }));
        });
      },
      eventDeleteHandling: "Update",
      onEventClick: args => {
        let dp = this.calendar;
        DayPilot.Modal.prompt("Update event text:", args.e.text()).then(function(modal) {
          if (!modal.result) { return; }
          args.e.data.text = modal.result;
          dp.events.update(args.e);
        });
      },
    };
  }

  componentDidMount() {

    // load resource and event data
    this.setState({
      startDate: DayPilot.Date.today(),
      events: [
        {
          id: 1,
          text: "Event 1",
          start: DayPilot.Date.today().addHours(10),
          end: DayPilot.Date.today().addHours(14)
        },
        {
          id: 2,
          text: "Event 2",
          start: "2018-06-02T10:00:00",
          end: "2018-06-02T11:00:00",
          barColor: "#38761d",
          barBackColor: "#93c47d"
        }
      ]
    });
  }

  render() {
    var {...config} = this.state;
    return (
      <div>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"week"}
            cellWidth={30}
            cellHeight={30}
            dayHeaderHeight={30}
            titleHeight={30}
            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;