Features

License

Apache License 2.0

How to install the React calendar component?

react weekly calendar component open source day view

You can add the React calendar component to your JSX using <DayPilotCalendar> tag:

import React, {Component} from 'react';
import {DayPilot, DayPilotCalendar} from "@daypilot/daypilot-lite-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 the open-source DayPilot Lite calendar/scheduling library. The React package is available at NPM (@daypilot/daypilot-lite-react).

You can add it to your React application using npm or yarn:

NPM

npm install @daypilot/daypilot-lite-react

Yarn

yarn add @daypilot/daypilot-lite-react

How to add a weekly calendar to your React application?

react weekly calendar component open source date

You can add a weekly calendar by changing the React calendar component configuration object. By default, the calendar displays one day (day view). There are several modes available:

  • Day

  • Week

  • WorkWeek

  • Days (custom number of days)

  • Resources

The “Resources” mode was added recently. It lets you add a resource calendar to your React application. This mode displays custom resources (people, rooms, locations, tools) as columns in the calendar.

We will switch the calendar to the week view using viewType property:

import React, {Component} from 'react';
import {DayPilot, DayPilotCalendar} from "@daypilot/daypilot-lite-react";

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewType: "Week"
    };
  }

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

export default Calendar;

How to customize the appearance of the React calendar?

We will make a couple of changes to the calendar appearance using the configuration object and CSS.

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.

react weekly calendar component tutorial open source duration bar

In our React application, we will turn the duration bar off using durationBarVisible property:

react weekly calendar component tutorial open source duration bar off

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

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // ...
      durationBarVisible: false,
      // ...
    };
  }

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

export default Calendar;

In 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;
    border-radius: 5px;
    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:

react weekly calendar component tutorial open source css

How to add a React date picker to the calendar?

react weekly calendar component tutorial open source date picker

In order to let users change the visible week, we will use a React 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 date picker event to change the startDate property of the Calendar component:

1. First, it is necessary to get access to the DayPilot.Calendar object that controls the weekly calendar. We add a ref attribute to the React calendar component (<DayPilotCalendar>). This will store a reference to the React calendar in this.calendarRef which we initialize using React.createRef() in the component constructor.

constructor(props) {
  // ...
  this.calendarRef = React.createRef();
}

render() {
  return (
    <DayPilotCalendar 
      ref={this.calendarRef}
    />
  );
}

2. We add a special calendar() getter returns the control property of the current so we can access it as this.calendar in our React application.

get calendar() {
  return this.calendarRef.current.control;
}

This is how the date-changing logic looks now in our application:

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

const styles = {
  wrap: {
    display: "flex"
  },
  left: {
    marginRight: "10px"
  },
  main: {
    flexGrow: "1"
  }
};

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    this.state = {
      viewType: "Week",
      durationBarVisible: false
    };
  }

  get calendar() {
    return this.calendarRef.current.control;
  }

  render() {
    const {...config} = this.state;
    return (
      <div style={styles.wrap}>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"week"}
            showMonths={3}
            skipMonths={3}
            onTimeRangeSelected={ args => {
              this.calendar.update({
                startDate: args.day
              });
            }}
          />
        </div>
        <div style={styles.main}>
        <DayPilotCalendar
          {...config}
          ref={this.calendarRef}
        />
        </div>
      </div>
    );
  }
}

export default Calendar;

How to load calendar events in React?

react weekly calendar component tutorial open source loading events

The calendar event data can be loaded using the update() method of the Calendar component. The events property of the options parameter specifies the new event data set:

componentDidMount() {

  // load event data
  this.calendar.update({
    startDate: "2023-03-07",
    events: [
      {
        id: 1,
        text: "Event 1",
        start: "2023-03-07T10:30:00",
        end: "2023-03-07T13:00:00"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2023-03-08T09:30:00",
        end: "2023-03-08T11:30:00",
        backColor: "#6aa84f"
      },
      {
        id: 3,
        text: "Event 3",
        start: "2023-03-08T12:00:00",
        end: "2023-03-08T15:00:00",
        backColor: "#f1c232"
      },
      {
        id: 4,
        text: "Event 4",
        start: "2023-03-06T11:30:00",
        end: "2023-03-06T14:30:00",
        backColor: "#cc4125"
      },
    ]
  });
}

Full Source Code

And here is the full source code of our React calendar/scheduler component that displays events customized using CSS:

Calendar.js

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

const styles = {
  wrap: {
    display: "flex"
  },
  left: {
    marginRight: "10px"
  },
  main: {
    flexGrow: "1"
  }
};

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    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);
      },
    };
  }

  get calendar() {
    return this.calendarRef.current.control;
  }

  componentDidMount() {

    const events = [
      {
        id: 1,
        text: "Event 1",
        start: "2023-03-07T10:30:00",
        end: "2023-03-07T13:00:00"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2023-03-08T09:30:00",
        end: "2023-03-08T11:30:00",
        backColor: "#6aa84f"
      },
      {
        id: 3,
        text: "Event 3",
        start: "2023-03-08T12:00:00",
        end: "2023-03-08T15:00:00",
        backColor: "#f1c232"
      },
      {
        id: 4,
        text: "Event 4",
        start: "2023-03-06T11:30:00",
        end: "2023-03-06T14:30:00",
        backColor: "#cc4125"
      },
    ];

    const startDate = "2023-03-07";

    this.calendar.update({startDate, events});

  }

  render() {
    return (
      <div style={styles.wrap}>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"week"}
            showMonths={3}
            skipMonths={3}
            startDate={"2023-03-07"}
            selectionDay={"2023-03-07"}
            onTimeRangeSelected={ args => {
              this.calendar.update({
                startDate: args.day
              });
            }}
          />
        </div>
        <div style={styles.main}>
          <DayPilotCalendar
            {...this.state}
            ref={this.calendarRef}
          />
        </div>
      </div>
    );
  }
}

export default Calendar;

History

  • July 18, 2022: Upgraded to React 18. Using DayPilot Lite for JavaScript 2022.3.393.

  • December 31, 2021: Switched to the open-source DayPilot Lite library (2021.4.341)

  • 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