React Monthly Calendar

Monthly Calendar React Module

The monthly calendar component is included in DayPilot Pro for JavaScript. The DayPilot Pro library is available as a react module (daypilot-pro-react) which is published at npm.daypilot.org. You can add it to your project using NPM or Yarn.

NPM

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

Yarn

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

Make sure that you are using the latest version - you can get the installation command at 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.

React Monthly Calendar Component

Insert <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;

React Monthly Calendar Configuration

You can specify the monthly calendar properties using attributes of <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;

Loading Configuration from 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() {
    var {...config} = this.state;
    return (
        <DayPilotMonth
          {...config}
          ref={component => {
            this.calendar = component && component.control;
          }}
        />
    );
  }
}

export default Month;

Accessing 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;