React Event Calendar

NPM Module

You can get the daypilot-pro-react module at npm.daypilot.org:

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

React Event Calendar Component

The event calendar component is available using <DayPilotCalendar> tag:

import React, {Component} from 'react';
import {DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {
    render() {
        return (
            <DayPilotCalendar />
        );
    }
}

export default Calendar;

React Calendar Configuration

You can use all standard DayPilot.Calendar properties and events with the React calendar component:

import React, {Component} from 'react';
import {DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {
    render() {
        return (
            <DayPilotCalendar 
              viewType="Week"
            />
        );
    }
}

export default Calendar;

Accessing DayPilot.Calendar Object

In order to invoke the calendar component methods, it's necessary to get a DayPilot.Calendar object reference:

import React, {Component} from 'react';
import {DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {
    render() {
        return (
            <DayPilotCalendar 
              viewType={"Week"}
              ref={component => {
                this.calendar = component && component.control;
              }}
            />
        );
    }
}

export default Calendar;

The DayPilot.Calendar object is now stored in calendar property of the Calendar class. We can use it to invoke the DayPilot.Calendar class methods, such as message():

import React, {Component} from 'react';
import {DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {
  render() {
    return (
      <DayPilotCalendar
        viewType={"Week"}
        onTimeRangeSelected={args => {
          this.calendar.message("Selected range: " + args.start.toString("hh:mm tt") + " - " + args.end.toString("hh:mm tt"));
        }}
        ref={component => {
          this.calendar = component && component.control;
        }}
      />
    );
  }
}

export default Calendar;