Search results

Editor customization

Custom editor template

The event window can be customized by making use of the editorTemplate API. Here, the custom design is built with the required fields through the script template and its type should be text/x-template.

Each field defined through it should contain the e-field class, so as to allow the processing of those fields in the default event object from internal source. The ID of this customized script template section is assigned to the editorTemplate option, so that this customized fields will be replaced onto the default editor window.

As we are using our Syncfusion sub-components within this editor in the below demo, the custom defined form elements needs to be configured as required Syncfusion components such as DropDownList and DateTimePicker which needs to be done within the popupOpen event. This particular step can be skipped, if the user needs to simply use the normal form design with applicable fields.

Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';

class App extends React.Component<{}, {}>{
  private scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];
  private onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type === 'Editor') {
      let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
      statusElement.setAttribute('name', 'EventType');
    }
  }
  private editorTemplate(props): JSX.Element {
    return (<table className="custom-event-editor" style={ { width: '100%', cellpadding: '5' } }><tbody>
      <tr><td className="e-textlabel">Summary</td><td style={ { colspan: '4' } }>
        <input id="Summary" className="e-field e-input" type="text" name="Subject" style={ { width: '100%' } } />
      </td></tr>
      <tr><td className="e-textlabel">Status</td><td style={ { colspan: '4' } }>
        <DropDownListComponent id="EventType" placeholder='Choose status' className="e-field" style={ { width: '100%' } }
          dataSource={['New', 'Requested', 'Confirmed']}>
        </DropDownListComponent>
      </td></tr>
      <tr><td className="e-textlabel">From</td><td style={ { colspan: '4' } }>
        <DateTimePickerComponent id="StartTime" className="e-field"></DateTimePickerComponent>
      </td></tr>
      <tr><td className="e-textlabel">To</td><td style={ { colspan: '4' } }>
        <DateTimePickerComponent id="EndTime" className="e-field"></DateTimePickerComponent>
      </td></tr>
      <tr><td className="e-textlabel">Reason</td><td style={ { colspan: '4' } }>
        <textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50}
          style={ { width: '100%', height: '60px !important', resize: 'vertical' } }></textarea>
      </td></tr></tbody></table >
    );
  }
  render() {
    return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
    ref={schedule => this.scheduleObj = schedule}
    eventSettings={ { dataSource: this.data } } editorTemplate={this.editorTemplate.bind(this)} showQuickInfo={false}
    popupOpen={this.onPopupOpen.bind(this)} >
              <ViewsDirective>
                <ViewDirective option='Day' />
                <ViewDirective option='Week' />
                <ViewDirective option='WorkWeek' />
                <ViewDirective option='Month' />
              </ViewsDirective>
              <Inject services={[Day, Week, WorkWeek, Month]} />
            </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing the quick pop-ups

The quick pop up window can be customized by making use of the popupOpen event which will trigger when a pop up window is about to open. In the below demo an additional description field is added.

Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek,
  PopupOpenEventArgs, ActionEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { Input } from '@syncfusion/ej2-inputs';
import { createElement } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';

class App extends React.Component<{}, {}>{
  private data: Object[] = extend([], scheduleData, null, true) as Object[];
  private onActionBegin(args: ActionEventArgs): void {
    if (args.requestType === 'eventCreate') {
      let eventData: any = args.data;
      eventData.Description = document.getElementById("DescriptionValue").innerText;
    }
  }
  private onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type === 'QuickInfo') {
      if(args.target.classList.contains("e-work-cells")){
        if (!args.element.querySelector('.custom-field-row')) {
          let row: Element = createElement('div', { className: 'custom-field-row' });
          let formElement: Element = args.element.querySelector('.e-schedule-form');
          formElement.appendChild(row);
          let container: Element = createElement('div', { className: 'custom-field-container' });
          let classNames: string = 'e-field e-custom-description';
          let inputEle: HTMLInputElement = createElement('input', {
            className: classNames, attrs: { type: 'text', value :'', name: 'Description'}
          }) as HTMLInputElement;
          container.appendChild(inputEle);
          row.appendChild(container);
          Input.createInput({
            element: inputEle as HTMLInputElement, floatLabelType: 'Auto',
            properties: {
              enableRtl: this.scheduleObj.enableRtl,
              placeholder: "Description"
            }
          });
          let element: Element = document.querySelector(".e-custom-description");
          element.addEventListener("keypress", function (e:any) {
            document.getElementById("DescriptionValue").innerHTML = e.target.value;
          });
        }
      } else if(args.target.classList.contains("e-appointment")){
        let eventData: any = args.data;
        let row: Element = createElement('div', { className: 'e-event-description' });
        row.textContent = eventData.Description;
        let element: Element = args.element.querySelector('.e-subject-wrap');
        element.parentNode.insertBefore(row, element.nextSibling);
      }
    }
  }
   render() {
    return <ScheduleComponent width= '100%' height='550px' selectedDate= {new Date(2018, 1, 15)} showQuickInfo= {false} eventSettings={ { dataSource: this.data } } popupOpen={this.onPopupOpen.bind(this)}
    actionBegin={this. onActionBegin.bind(this)}>
            <ViewsDirective>
                <ViewDirective option='Day' />
                <ViewDirective option='Week' />
                <ViewDirective option='WorkWeek' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek]} />
        </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>