Properties

NameTypeDefault
appointmentOpacity Number 0.7

Sets or gets the appointmentOpacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} appointmentOpacity={0.7}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
appointmentsMinHeight Number 18

Sets or gets the appointmentsMinHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} appointmentsMinHeight={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
appointmentDataFields Object { allDay: "allDay", background: "background", borderColor: "borderColor", color: "color", description: "description", draggable: "draggable", from: "from", hidden: "hidden", id: "id", location: "location", recurrencePattern: "recurrencePattern", recurrenceException: "recurrenceException", resizable: "resizable", resourceId: "resourceId", readOnly: "readOnly", subject: "subject", style: "style", status: "status", to: "to", tooltip: "tooltip", timeZone: "timeZone" }

Sets or gets the appointmentDataFields property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} appointmentDataFields={appointmentDataFields}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
appointmentTooltips Boolean true

Sets or gets the appointmentTooltips property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} appointmentTooltips={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
columnsHeight Number 30

Sets or gets the columnsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} columnsHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
contextMenu Boolean true

Sets or gets the contextMenu property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} contextMenu={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
contextMenuOpen Function null

Sets or gets the contextMenuOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} contextMenuOpen={contextMenuOpen}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
contextMenuClose Function null

Sets or gets the contextMenuClose property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} contextMenuClose={contextMenuClose}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
contextMenuItemClick Function null

Sets or gets the contextMenuItemClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} contextMenuItemClick={contextMenuItemClick}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
contextMenuCreate Function null

Sets or gets the contextMenuCreate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} contextMenuCreate={contextMenuCreate}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
changedAppointments Array []

Sets or gets the changedAppointments property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} changedAppointments={changedAppointments}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
disabled Boolean false

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
date jqxDate new $.jqx.date('todayDate')

Sets or gets the date property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
dayNameFormat String 'full'

Sets or gets the dayNameFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} dayNameFormat={'abbr'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
enableHover Boolean true

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} enableHover={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialog Boolean true

Sets or gets the editDialog property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialog={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogDateTimeFormatString String "dd/MM/yyyy hh:mm tt"

Sets or gets the editDialogDateTimeFormatString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogDateTimeFormatString={'dd-MM-yyyy HH:mm'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogDateFormatString String "dd/MM/yyyy"

Sets or gets the editDialogDateFormatString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogDateFormatString={'dd/MM/yyyy'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogOpen Function null

Sets or gets the editDialogOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogOpen={editDialogOpen}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogCreate Function null

Sets or gets the editDialogCreate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogCreate={editDialogCreate}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogKeyDown Function null

Sets or gets the editDialogKeyDown property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogKeyDown={editDialogKeyDown}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
editDialogClose Function null

Sets or gets the editDialogClose property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} editDialogClose={editDialogClose}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
exportSettings Object { serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}

Sets or gets the exportSettings property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} exportSettings={exportSettings}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
height Number 600

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} height={600}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
legendPosition String "bottom"

Sets or gets the legendPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} legendPosition={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
legendHeight Number 34

Sets or gets the legendHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} legendHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
localization Object

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} localization={localization}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
min jqxDate new $.jqx.date(0)

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} min={new $.jqx.date(2015, 1, 1)}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
max jqxDate new $.jqx.date(9999, 12, 31),

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} max={new $.jqx.date(2015, 1, 1)}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
ready Function null

Sets or gets the ready property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} ready={ready}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
renderAppointment Function null

Sets or gets the renderAppointment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} renderAppointment={renderAppointment}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rendering Function null

Sets or gets the rendering property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} rendering={rendering}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rendered Function null

Sets or gets the rendered property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} rendered={rendered}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rtl Boolean false

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
resources Object null

Sets or gets the resources property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} resources={resources}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rowsHeight Number 27

Sets or gets the rowsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} rowsHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
showToolbar Boolean true

Sets or gets the showToolbar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} showToolbar={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
showLegend Boolean false

Sets or gets the showLegend property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} showLegend={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
scrollBarSize Number 15

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} scrollBarSize={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
source Object null

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
statuses Object { free: "white", tentative: "tentative", busy: "transparent", outOfOffice: "#800080" }

Sets or gets the statuses property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} statuses={statuses}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
touchRowsHeight Number 37

Sets or gets the touchRowsHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} touchRowsHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
theme String ''

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
touchAppointmentsMinHeight Number 27

Sets or gets the touchAppointmentsMinHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} touchAppointmentsMinHeight={40}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
touchScrollBarSize Number 18

Sets or gets the touchScrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} touchScrollBarSize={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
timeZone String ''

Sets or gets the timeZone property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} timeZone={'UTC'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
touchDayNameFormat String 'abbr'

Sets or gets the touchDayNameFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} touchDayNameFormat={'abbr'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
toolBarRangeFormat String 'dd MMMM yyyy'

Sets or gets the toolBarRangeFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} toolBarRangeFormat={'dd MM yyyy'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
toolBarRangeFormatAbbr String 'dd MM yyyy'

Sets or gets the toolBarRangeFormatAbbr property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} toolBarRangeFormatAbbr={'dd MM yy'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
toolbarHeight Number 54

Sets or gets the toolbarHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} toolbarHeight={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
views Array ['dayView', 'weekView', 'monthView']

Sets or gets the views property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} views={views}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
view String

Sets or gets the view property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} view={'timelineWeekView'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
width Number 800

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date} width={600}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Events

appointmentChange Event

This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentChange event by type: jqxScheduler.

Code examples

Bind to the appointmentChange event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('appointmentChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

appointmentClick Event

This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentClick event by type: jqxScheduler.

Code examples

Bind to the appointmentClick event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('appointmentClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

appointmentDoubleClick Event

This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentDoubleClick event by type: jqxScheduler.

Code examples

Bind to the appointmentDoubleClick event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('appointmentDoubleClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

appointmentDelete Event

This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentDelete event by type: jqxScheduler.

Code examples

Bind to the appointmentDelete event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('appointmentDelete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

appointmentAdd Event

This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentAdd event by type: jqxScheduler.

Code examples

Bind to the appointmentAdd event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('appointmentAdd', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

bindingComplete Event

This event is triggered when the binding is completed.

Code example

Bind to the bindingComplete event by type: jqxScheduler.

Code examples

Bind to the bindingComplete event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

cellClick Event

This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code example

Bind to the cellClick event by type: jqxScheduler.

Code examples

Bind to the cellClick event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('cellClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

cellDoubleClick Event

This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code example

Bind to the cellDoubleClick event by type: jqxScheduler.

Code examples

Bind to the cellDoubleClick event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('cellDoubleClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

contextMenuOpen Event

This event is triggered when the context menu is opened. Event Arguments:

  • menu - jQuery Object which represents the jqxMenu.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuOpen event by type: jqxScheduler.

Code examples

Bind to the contextMenuOpen event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('contextMenuOpen', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

contextMenuClose Event

This event is triggered when the context menu is closed. Event Arguments:

  • menu - jQuery Object which represents the jqxMenu.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuClose event by type: jqxScheduler.

Code examples

Bind to the contextMenuClose event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('contextMenuClose', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

contextMenuItemClick Event

This event is triggered when the context menu item is clicked. Event Arguments:

  • menu - jQuery Object which represents the jqxMenu.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
  • item - the clicked menu item.

Code example

Bind to the contextMenuItemClick event by type: jqxScheduler.

Code examples

Bind to the contextMenuItemClick event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('contextMenuItemClick', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

contextMenuCreate Event

This event is triggered when the context menu item is created. Event Arguments:

  • menu - jQuery Object which represents the jqxMenu.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuCreate event by type: jqxScheduler.

Code examples

Bind to the contextMenuCreate event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('contextMenuCreate', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

dateChange Event

This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.

Code example

Bind to the dateChange event by type: jqxScheduler.

Code examples

Bind to the dateChange event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('dateChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

editRecurrenceDialogOpen Event

This event is triggered when the recurrence dialog is opened. Event Arguments:

  • dialog - jQuery Object which represents the jqxWindow.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.

Code examples

Bind to the editRecurrenceDialogOpen event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('editRecurrenceDialogOpen', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

editRecurrenceDialogClose Event

This event is triggered when the recurrence dialog is closed. Event Arguments:

  • dialog - jQuery Object which represents the jqxWindow.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the editRecurrenceDialogClose event by type: jqxScheduler.

Code examples

Bind to the editRecurrenceDialogClose event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('editRecurrenceDialogClose', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

editDialogCreate Event

This event is triggered when the edit dialog is created. Event Arguments:

  • dialog - jQuery Object which represents the jqxWindow.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
  • fields - Object with the following members:
    • subject - Subject input field.
    • subjectLabel - Subject label.
    • subjectContainer - Input and label HTML div container element.
    • location - Location input field.
    • locationLabel - Location label.
    • locationContainer - Input and label HTML div container element.
    • from - From datetime input field.
    • fromLabel - From label.
    • fromContainer - Input and label HTML div container element.
    • to - To Datetimeinput field.
    • toLabel - To label.
    • toContainer - Input and label HTML div container element.
    • allDay - AllDay checkbox field.
    • allDayLabel - AllDay label.
    • allDayContainer - Checkbox and label HTML div container element.
    • timeZone - Timezone DropDownList field.
    • timeZoneLabel - TimeZone label.
    • timeZoneContainer - DropDownList and label HTML div container element.
    • description - Description input field.
    • descriptionLabel - Description label.
    • descriptionContainer - Input and label HTML div container element.
    • color - Color DropDownList field.
    • colorLabel - Subject label.
    • colorContainer - DropDownList and label container element.
    • status - Status DropDownList field.
    • statusLabel - Status label.
    • statustContainer - DropDownList and label container element.
    • resource - Resource DropDownList field.
    • resourceLabel - Resource label.
    • resourceContainer - DropDownList and label container element.
    • buttonsField - buttons HTML div container HTML Element.
    • saveButton - Save button.
    • deleteButton - Delete button.
    • cancelButton - Cancel button.
    • daily.repeatDayInterval - NumberInput for daily repeat pattern.
    • daily.repeatDayLabel - Label HTML Element.
    • daily.panel - Daily repeat pattern HTML div container element.
    • weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
    • weekly.repeatWeekIntervalLabel - Label element.
    • weekly.repeatDaysLabel - Label element.
    • weekly.repeatDays - Array of Checkboxes.
    • weekly.panel - Weekly repeat pattern HTML div container element.
    • monthly.repeatMonth - NumberInput for monthly repeat pattern.
    • monthly.repeatMonthLabel - Label element.
    • monthly.repeatMonthDay - NumberInput for the month day in the pattern.
    • monthly.repeatMonthDayBool - RadioButton element.
    • monthly.repeatMonthDayLabel - Label element.
    • monthly.repeatDayOfWeekBool - RadioButton element.
    • monthly.repeatDayOfWeek - DropDownList element.
    • monthly.repeatDayOfWeekLabel - Label element.
    • monthly.repeatDayOfWeekType - DropDownList element.
    • monthly.panel - Monthly repeat pattern HTML div container element.
    • yearly.repeatYear - NumberInput for yearly repeat pattern.
    • yearly.repeatYearLabel - Label element.
    • yearly.repeatYearBool - RadioButton element.
    • yearly.repeatYearBoolLabel - Label element.
    • yearly.repeatYearMonth - DropDownList element.
    • yearly.repeatYearDay - NumberInput element.
    • yearly.repeatDayOfWeekBool - RadioButton element.
    • yearly.repeatDayOfWeekType - DropDownList element.
    • yearly.repeatDayOfWeekLabel - Label element.
    • yearly.repeatDayOfWeekMonth - DropDownList element.
    • yearly.panel - Yearly repeat pattern HTML div container element.
    • resetExceptions - Checkbox element.
    • resetExceptionsLabel - Label element.
    • resetExceptionsContainer - Checkbox and Label container element.
    • repeat - DropDownList element.
    • repeatLabel - Label element.
    • repeatContainer - DropDownList and Label container element.
    • repeatPanel - HTML div container element for repeat patterns.
    • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
    • repeatEndPanel.repeatEndNever - RadioButton element.
    • repeatEndPanel.repeatEndNeverLabel - Label element.
    • repeatEndPanel.repeatEndAfter - RadioButton element.
    • repeatEndPanel.repeatEndAfterValue - NumberInput element.
    • repeatEndPanel.repeatEndAfterLabel - Label element.
    • repeatEndPanel.repeatEndOn - RadioButton element.
    • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
    • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogCreate event by type: jqxScheduler.

Code examples

Bind to the editDialogCreate event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('editDialogCreate', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

editDialogOpen Event

This event is triggered when the edit dialog is opened. Event Arguments:

  • dialog - jQuery Object which represents the jqxWindow.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
  • fields - Object with the following members:
    • subject - Subject input field.
    • subjectLabel - Subject label.
    • subjectContainer - Input and label HTML div container element.
    • location - Location input field.
    • locationLabel - Location label.
    • locationContainer - Input and label HTML div container element.
    • from - From datetime input field.
    • fromLabel - From label.
    • fromContainer - Input and label HTML div container element.
    • to - To Datetimeinput field.
    • toLabel - To label.
    • toContainer - Input and label HTML div container element.
    • allDay - AllDay checkbox field.
    • allDayLabel - AllDay label.
    • allDayContainer - Checkbox and label HTML div container element.
    • timeZone - Timezone DropDownList field.
    • timeZoneLabel - TimeZone label.
    • timeZoneContainer - DropDownList and label HTML div container element.
    • description - Description input field.
    • descriptionLabel - Description label.
    • descriptionContainer - Input and label HTML div container element.
    • color - Color DropDownList field.
    • colorLabel - Subject label.
    • colorContainer - DropDownList and label container element.
    • status - Status DropDownList field.
    • statusLabel - Status label.
    • statustContainer - DropDownList and label container element.
    • resource - Resource DropDownList field.
    • resourceLabel - Resource label.
    • resourceContainer - DropDownList and label container element.
    • buttonsField - buttons HTML div container HTML Element.
    • saveButton - Save button.
    • deleteButton - Delete button.
    • cancelButton - Cancel button.
    • daily.repeatDayInterval - NumberInput for daily repeat pattern.
    • daily.repeatDayLabel - Label HTML Element.
    • daily.panel - Daily repeat pattern HTML div container element.
    • weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
    • weekly.repeatWeekIntervalLabel - Label element.
    • weekly.repeatDaysLabel - Label element.
    • weekly.repeatDays - Array of Checkboxes.
    • weekly.panel - Weekly repeat pattern HTML div container element.
    • monthly.repeatMonth - NumberInput for monthly repeat pattern.
    • monthly.repeatMonthLabel - Label element.
    • monthly.repeatMonthDay - NumberInput for the month day in the pattern.
    • monthly.repeatMonthDayBool - RadioButton element.
    • monthly.repeatMonthDayLabel - Label element.
    • monthly.repeatDayOfWeekBool - RadioButton element.
    • monthly.repeatDayOfWeek - DropDownList element.
    • monthly.repeatDayOfWeekLabel - Label element.
    • monthly.repeatDayOfWeekType - DropDownList element.
    • monthly.panel - Monthly repeat pattern HTML div container element.
    • yearly.repeatYear - NumberInput for yearly repeat pattern.
    • yearly.repeatYearLabel - Label element.
    • yearly.repeatYearBool - RadioButton element.
    • yearly.repeatYearBoolLabel - Label element.
    • yearly.repeatYearMonth - DropDownList element.
    • yearly.repeatYearDay - NumberInput element.
    • yearly.repeatDayOfWeekBool - RadioButton element.
    • yearly.repeatDayOfWeekType - DropDownList element.
    • yearly.repeatDayOfWeekLabel - Label element.
    • yearly.repeatDayOfWeekMonth - DropDownList element.
    • yearly.panel - Yearly repeat pattern HTML div container element.
    • resetExceptions - Checkbox element.
    • resetExceptionsLabel - Label element.
    • resetExceptionsContainer - Checkbox and Label container element.
    • repeat - DropDownList element.
    • repeatLabel - Label element.
    • repeatContainer - DropDownList and Label container element.
    • repeatPanel - HTML div container element for repeat patterns.
    • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
    • repeatEndPanel.repeatEndNever - RadioButton element.
    • repeatEndPanel.repeatEndNeverLabel - Label element.
    • repeatEndPanel.repeatEndAfter - RadioButton element.
    • repeatEndPanel.repeatEndAfterValue - NumberInput element.
    • repeatEndPanel.repeatEndAfterLabel - Label element.
    • repeatEndPanel.repeatEndOn - RadioButton element.
    • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
    • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogOpen event by type: jqxScheduler.

Code examples

Bind to the editDialogOpen event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('editDialogOpen', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

editDialogClose Event

This event is triggered when the edit dialog is closed. Event Arguments:

  • dialog - jQuery Object which represents the jqxWindow.
  • appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
  • fields - Object with the following members:
    • subject - Subject input field.
    • subjectLabel - Subject label.
    • subjectContainer - Input and label HTML div container element.
    • location - Location input field.
    • locationLabel - Location label.
    • locationContainer - Input and label HTML div container element.
    • from - From datetime input field.
    • fromLabel - From label.
    • fromContainer - Input and label HTML div container element.
    • to - To Datetimeinput field.
    • toLabel - To label.
    • toContainer - Input and label HTML div container element.
    • allDay - AllDay checkbox field.
    • allDayLabel - AllDay label.
    • allDayContainer - Checkbox and label HTML div container element.
    • timeZone - Timezone DropDownList field.
    • timeZoneLabel - TimeZone label.
    • timeZoneContainer - DropDownList and label HTML div container element.
    • description - Description input field.
    • descriptionLabel - Description label.
    • descriptionContainer - Input and label HTML div container element.
    • color - Color DropDownList field.
    • colorLabel - Subject label.
    • colorContainer - DropDownList and label container element.
    • status - Status DropDownList field.
    • statusLabel - Status label.
    • statustContainer - DropDownList and label container element.
    • resource - Resource DropDownList field.
    • resourceLabel - Resource label.
    • resourceContainer - DropDownList and label container element.
    • buttonsField - buttons HTML div container HTML Element.
    • saveButton - Save button.
    • deleteButton - Delete button.
    • cancelButton - Cancel button.
    • daily.repeatDayInterval - NumberInput for daily repeat pattern.
    • daily.repeatDayLabel - Label HTML Element.
    • daily.panel - Daily repeat pattern HTML div container element.
    • weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
    • weekly.repeatWeekIntervalLabel - Label element.
    • weekly.repeatDaysLabel - Label element.
    • weekly.repeatDays - Array of Checkboxes.
    • weekly.panel - Weekly repeat pattern HTML div container element.
    • monthly.repeatMonth - NumberInput for monthly repeat pattern.
    • monthly.repeatMonthLabel - Label element.
    • monthly.repeatMonthDay - NumberInput for the month day in the pattern.
    • monthly.repeatMonthDayBool - RadioButton element.
    • monthly.repeatMonthDayLabel - Label element.
    • monthly.repeatDayOfWeekBool - RadioButton element.
    • monthly.repeatDayOfWeek - DropDownList element.
    • monthly.repeatDayOfWeekLabel - Label element.
    • monthly.repeatDayOfWeekType - DropDownList element.
    • monthly.panel - Monthly repeat pattern HTML div container element.
    • yearly.repeatYear - NumberInput for yearly repeat pattern.
    • yearly.repeatYearLabel - Label element.
    • yearly.repeatYearBool - RadioButton element.
    • yearly.repeatYearBoolLabel - Label element.
    • yearly.repeatYearMonth - DropDownList element.
    • yearly.repeatYearDay - NumberInput element.
    • yearly.repeatDayOfWeekBool - RadioButton element.
    • yearly.repeatDayOfWeekType - DropDownList element.
    • yearly.repeatDayOfWeekLabel - Label element.
    • yearly.repeatDayOfWeekMonth - DropDownList element.
    • yearly.panel - Yearly repeat pattern HTML div container element.
    • resetExceptions - Checkbox element.
    • resetExceptionsLabel - Label element.
    • resetExceptionsContainer - Checkbox and Label container element.
    • repeat - DropDownList element.
    • repeatLabel - Label element.
    • repeatContainer - DropDownList and Label container element.
    • repeatPanel - HTML div container element for repeat patterns.
    • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
    • repeatEndPanel.repeatEndNever - RadioButton element.
    • repeatEndPanel.repeatEndNeverLabel - Label element.
    • repeatEndPanel.repeatEndAfter - RadioButton element.
    • repeatEndPanel.repeatEndAfterValue - NumberInput element.
    • repeatEndPanel.repeatEndAfterLabel - Label element.
    • repeatEndPanel.repeatEndOn - RadioButton element.
    • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
    • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogClose event by type: jqxScheduler.

Code examples

Bind to the editDialogClose event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('editDialogClose', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

viewChange Event

This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings.

Code example

Bind to the viewChange event by type: jqxScheduler.

Code examples

Bind to the viewChange event of jqxScheduler. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.on('viewChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Methods

NameReturn Type
addAppointment None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.addAppointment(1,Item1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

beginAppointmentsUpdate None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.beginAppointmentsUpdate();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

clearAppointmentsSelection None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.clearAppointmentsSelection();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

clearSelection None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.clearSelection();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

closeMenu None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.closeMenu();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

closeDialog None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.closeDialog();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

deleteAppointment None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.deleteAppointment(1,Item1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

destroy None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.destroy();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

endAppointmentsUpdate None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.endAppointmentsUpdate();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

ensureAppointmentVisible None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.ensureAppointmentVisible(1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

ensureVisible None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.ensureVisible(1,Item1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

exportData Object(optional) 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.exportData(xls);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

focus None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.focus();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

getAppointmentProperty Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.getAppointmentProperty(1,Item1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

getSelection Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.getSelection();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

getAppointments Array 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.getAppointments(1,Item1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

getDataAppointments Array 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.getDataAppointments();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

hideAppointmentsByResource None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.hideAppointmentsByResource(1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

openMenu None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.openMenu(10,20);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

openDialog None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.openDialog(10,20);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

selectAppointment None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.selectAppointment(1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

setAppointmentProperty None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.setAppointmentProperty(1,status,busy);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

selectCell None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.selectCell(1,false,1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

showAppointmentsByResource None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.showAppointmentsByResource(1);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

scrollWidth Number 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.scrollWidth();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

scrollHeight Number 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myScheduler.scrollHeight();
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

scrollLeft None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.scrollLeft(10);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

scrollTop None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScheduler, { jqx } from 'jqwidgets-react/react_jqxscheduler.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScheduler.scrollTop(10);
    }

    render() {       
        let source =
        {
            dataType: 'json',
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'about', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'company', type: 'string' },
                { name: 'name', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
            ],
            id: 'id',
            url: 'sampledata/appointments.txt'
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let appointmentDataFields =
        {
            from: 'start',
            to: 'end',
            id: 'id',
            description: 'about',
            location: 'address',
            subject: 'name',
            style: 'style',
            status: 'status'
        };
 
        let views =
        [
            { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
            { type: 'monthView', showWeekends: false }
        ];
 
        let date = new jqx.date(2016, 11, 23);
        return (
            <JqxScheduler ref='myScheduler'
                width={850} height={600} source={dataAdapter} view={'weekView'} views={views} 
                appointmentDataFields={appointmentDataFields} date={date}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));