Search results

Open Editor Window Manually in React Schedule component

15 Oct 2021 / 3 minutes to read

Open Editor Window externally

Schedule allows user to manually open the event editor on specific time or on certain events using openEditor method as shown below.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}>{
    private scheduleObj: ScheduleComponent;
    private onClickButton1(): void {
        let cellData: Object ={
        startTime: new Date(2018, 1, 15, 10, 0),
        endTime: new Date(2018, 1, 15, 11, 0),
        };
        this.scheduleObj.openEditor(cellData,'Add');
    }
    private onClickButton2(): void {
        let eventData: Object ={
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30)
    };
    this.scheduleObj.openEditor(eventData,'Save');
    }
    render() {
    return (<div>
        <ButtonComponent id='btn1' title='Click to open Editor' onClick={this.onClickButton1.bind(this)}>Click to open Editor</ButtonComponent>
        <ButtonComponent id='btn2' title='Click to open Event Editor' onClick={this.onClickButton2.bind(this)}>Click to open Event Editor</ButtonComponent>
        <ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate= {new Date(2018, 1, 15)}
        eventSettings= { { dataSource: this.scheduleData } } >
            <ViewsDirective>
                <ViewDirective option='Day' />
                <ViewDirective option='Week' />
                <ViewDirective option='WorkWeek' />
                <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month]} />
        </ScheduleComponent>
    </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!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" />
    <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>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
class App extends React.Component {
    onClickButton1() {
        let cellData = {
            startTime: new Date(2018, 1, 15, 10, 0),
            endTime: new Date(2018, 1, 15, 11, 0),
        };
        this.scheduleObj.openEditor(cellData, 'Add');
    }
    onClickButton2() {
        let eventData = {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30)
        };
        this.scheduleObj.openEditor(eventData, 'Save');
    }
    render() {
        return (<div>
        <ButtonComponent id='btn1' title='Click to open Editor' onClick={this.onClickButton1.bind(this)}>Click to open Editor</ButtonComponent>
        <ButtonComponent id='btn2' title='Click to open Event Editor' onClick={this.onClickButton2.bind(this)}>Click to open Event Editor</ButtonComponent>
        <ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.scheduleData }}>
            <ViewsDirective>
                <ViewDirective option='Day'/>
                <ViewDirective option='Week'/>
                <ViewDirective option='WorkWeek'/>
                <ViewDirective option='Month'/>
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month]}/>
        </ScheduleComponent>
    </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Open editor window on single click

By default, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using openEditor method in eventClick and cellClick events of scheduler and setting false to showQuickInfo. The following example shows how to open editor window on single click of cells and appointments.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, CellClickEventArgs, EventClickArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { schedulerData } from './datasource';

class App extends React.Component<{}, {}>{
    private scheduleObj: ScheduleComponent;
    private onCellClick(args: CellClickEventArgs): void {
        this.scheduleObj.openEditor(args, 'Add');
    }
    private onEventClick(args: EventClickArgs): void {
      if (!(args.event as any).RecurrenceRule) {
        this.scheduleObj.openEditor(args.event, 'Save');
        }
        else {
        this.scheduleObj.quickPopup.openRecurrenceAlert();
        }
    }
  
    render() {
    return (<div>
        <ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate= {new Date(2021, 7, 15)}
        eventSettings= { { dataSource: this.schedulerData } } showQuickInfo = {false} eventClick={this.onEventClick.bind(this)}
        cellClick={this.onCellClick.bind(this)} >
            <ViewsDirective>
                <ViewDirective option='Day' />
                <ViewDirective option='Week' />
                <ViewDirective option='WorkWeek' />
                <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month]} />
        </ScheduleComponent>
    </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!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" />
    <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>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component {
    onCellClick(args) {
        this.scheduleObj.openEditor(args, 'Add');
    }
    onEventClick(args) {
        if (!args.event.RecurrenceRule) {
            this.scheduleObj.openEditor(args.event, 'Save');
        }
        else {
            this.scheduleObj.quickPopup.openRecurrenceAlert();
        }
    }
    render() {
        return (<div>
        <ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate={new Date(2021, 7, 15)} eventSettings={{ dataSource: this.schedulerData }} showQuickInfo={false} eventClick={this.onEventClick.bind(this)} cellClick={this.onCellClick.bind(this)}>
            <ViewsDirective>
                <ViewDirective option='Day'/>
                <ViewDirective option='Week'/>
                <ViewDirective option='WorkWeek'/>
                <ViewDirective option='Month'/>
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month]}/>
        </ScheduleComponent>
    </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));