7

React Calendar: Rendering JSX in Events

 3 years ago
source link: https://code.daypilot.org/79731/react-calendar-rendering-jsx-in-events
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.
neoserver,ios ssh client
How to render custom JSX components in events displayed by the React Calendar component.
react calendar rendering jsx in events

Downloads

React project with source code for download (JavaScript, JSX).
211 kB
Languages
JavaScript
Technologies
JSX, React

Features

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.

How to Add an Icon using Active Areas

react calendar event icon active area

This example adds an icon to the calendar event box using active areas. Active area is a built-in mechanism for adding custom elements at specified locations with Calendar (events, grid cells, time headers, etc.). You can define visibility (always visible or visible on hover), CSS class, trigger special actions (add drag handles, open bubbles with details on hover) or define you own click event handler. Event active areas are supported during image export as well.

onBeforeEventRender: args => {

  // ...

  args.data.areas = [
    {right: 6, top: 6, width: 17, height: 17, image: "info-17-inverted-rounded-semi.svg", onClick: args=> this.showDetails(args.source)},
    ];
},

How to Add an Icon using JSX

react calendar event icon jsx component

You can define custom event content using JSX in onBeforeEventDomAdd event handler:

onBeforeEventDomAdd: args => {
  args.element = <div>
    {args.e.data.text}
    <div style={{position: "absolute", right: "25px", top: "5px", height: "17px", width: "17px"}}
         onClick={()=>this.showDetails(args.e)}>
      <img src={"info-17-semi.svg"} alt={"Info icon"}/>
    </div>
  </div>;
}

Full Source Code

Calendar.js

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

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: "2022-02-02",
      viewType: "Week",
      cellHeight: 30,
      timeRangeSelectedHandling: "Enabled",
      onTimeRangeSelected: function (args) {
        DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
          var dp = args.control;
          dp.clearSelection();
          if (!modal.result) { return; }
          dp.events.add(new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: modal.result
          }));
        });
      },
      onBeforeEventRender: args => {
        args.data.backColor = "#93c47d";
        args.data.barHidden = true;
        args.data.fontColor = "white";
        args.data.borderColor = "darker";

        args.data.areas = [
          {right: 6, top: 6, width: 17, height: 17, image: "info-17-inverted-rounded-semi.svg", onClick: args=> this.showDetails(args.source)},
          ];
      },
      onBeforeEventDomAdd: args => {
        args.element = <div>
          {args.e.data.text}
          <div style={{position: "absolute", right: "25px", top: "5px", height: "17px", width: "17px"}}
               onClick={()=>this.showDetails(args.e)}>
            <img src={"info-17-semi.svg"} alt={"Info icon"}/>
          </div>
        </div>;
      }
    };
  }

  showDetails(e) {
   DayPilot.Modal.alert(e.data.text);
  }

  componentDidMount() {

    // load resource and event data
    this.setState({
      events: [
        {
          id: 1,
          text: "Event 1",
          start: "2022-02-01T09:00:00",
          end: "2022-02-01T14:00:00",
        },
        {
          id: 2,
          text: "Event 2",
          start: "2022-02-02T10:00:00",
          end: "2022-02-02T15:00:00",
        }
      ]
    });

  }

  render() {
    return (
      <div>
        <DayPilotCalendar
          {...this.state}
          ref={component => {
            this.calendar = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Calendar;
Share
Ask a Question

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK