Sets or gets the appointments opacity.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} appointmentOpacity={0.7}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minimum height of appointments in the all day area, month view and timeline views.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'monthView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} appointmentsMinHeight={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the appointments data fields. A data field should match a field defined in the dataAdapter's source object. For example: If your have a data field called "start" in your source object, you should add 'from: "start"' in the appointmentDataFields definition.

• allDay - boolean field. Defines whether the appointment is all day appointment.
• background - string field. Expects Hex string. Defines the appointment's background.
• borderColor - string field. Expects Hex string. Defines the appointment's border color.
• color - string field. Expects Hex string. Defines the appointment's text color.
• description - string field. Defines the appointment's description.
• draggable - boolean field. Defines whether the user can drag the appointment.
• from - jqxDate field. Defines the appointment's start.
• hidden - boolean field. Defines whether the appointment is displayed.
• id - string/number field. Defines the Id of the appointment.
• location - string field. Defines the appointment's location.
• recurrencePattern - string field. Defines the appointment's recurrence rule. Ex: "FREQ=DAILY;". List of supported keywords:
  • FREQ - "DAILY" / "WEEKLY" / "MONTHLY" / "YEARLY". The FREQ rule part identifies the type of recurrence rule. This rule part MUST be specified in the recurrence rule.
  • COUNT - number. The Count rule part defines the number of occurrences at which to range-bound the recurrence.
  • UNTIL - string like "UNTIL=20160919T210000Z". The UNTIL rule part defines a date-time value where the recurrence ends.
  • BYDAY - string like "MO,TU". The BYDAY rule part specifies a COMMA character (US-ASCII decimal 44) separated list of days of the week; MO indicates Monday; TU indicates Tuesday; WE indicates Wednesday; TH indicates Thursday; FR indicates Friday; SA indicates Saturday; SU indicates Sunday. Each BYDAY value can also be preceded by a positive (+n) or negative (-n) integer. If present, this indicates the nth occurrence of the specific day within the MONTHLY or YEARLY RRULE. For example, within a MONTHLY rule, +1MO (or simply 1MO) represents the first Monday within the month, whereas -1MO represents the last Monday of the month.
  • BYMONTHDAY - string like 15, 30. The BYMONTHDAY rule part specifies a COMMA character (ASCII decimal 44) separated list of days of the month. Valid values are 1 to 31
  • BYMONTH - number like 1. The BYMONTH rule part specifies a month of the year. Valid values are 1 to 12.
  • INTERVAL - number like 1. The INTERVAL rule part contains a positive integer representing how often the recurrence rule repeats. The default value is "1",
  Examples: "FREQ=WEEKLY;BYDAY=MO,WE", "FREQ=MONTHLY;BYMONTHDAY=10,15;COUNT=20", "FREQ=DAILY;INTERVAL=3;COUNT=10", "FREQ=MONTHLY;BYDAY=-2FR;COUNT=7", "FREQ=YEARLY;COUNT=30;BYMONTH=3"
• recurrenceException - string field. Defines the exceptions of the recurrence rule. The bound value should be a string or comma separated list of Date strings. Example: "2016-11-24 09:00:00,2016-11-26 12:00:00"
• resizable - boolean field. Defines whether the user can resize the appointment.
• resourceId - string/number field. Defines the appointment's resource.
• readOnly - boolean field. Defines whether the appointment is editable.
• subject - string field. Defines the appointment's subject.
• style - string field. Expects Hex string. Defines the appointment's style. When defined it sets the background, border color and text color of the appointment.
• status - string field. Defines the appointment's status. See the statuses property for available statuses.
• to - jqxDate field. Defines the appointment's end.
• tooltip - string field. Defines the appointment's tooltip displayed on mouse hover.
• timeZone - string field. Defines the appointment's time zone. See timeZones for the list of timeZones.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether Scheduler appointments are with tooltips enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} appointmentTooltips={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Schedulers' columns height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} columnsHeight={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Scheduler's context menu is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} contextMenu={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a function called when the context menu is opened.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        contextMenuOpen: (menu: any, appointment: any, event: any): any => {
          alert('Context menu opened!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} contextMenuOpen={this.state.contextMenuOpen}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a function called when the context menu is closed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        contextMenuClose: (menu: any, appointment: any, event: any): any => {
          alert('Context menu closed!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} contextMenuClose={this.state.contextMenuClose}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a function called when a context menu item is clicked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        contextMenuItemClick: (menu: any, appointment: any, event: any): any => {
          alert('Context menu item click!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} contextMenuItemClick={this.state.contextMenuItemClick}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a function called when the context menu is created.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        contextMenuCreate: (menu: any, settings: any): any => {
          alert('Context menu created!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} contextMenuCreate={this.state.contextMenuCreate}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets an array with newly added, deleted or updated appointments. Each element in the Array is an object which has:

• type - "Update", "Delete", "Add".
• appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Sets or gets whether the Scheduler is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's Date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} dayNameFormat={'abbr'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether cells hover is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} enableHover={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether Edit Dialog is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialog={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is not allDay appointment.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogDateTimeFormatString={'dd-MM-yyyy HH:mm'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is allDay appointment.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogDateFormatString={'dd/MM/yyyy'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        editDialogOpen: (dialog: any, fields: any, editAppointment: any): any => {
          alert('Edit dialog opened!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogOpen={this.state.editDialogOpen}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        editDialogCreate: (dialog: any, fields: any, editAppointment: any): any => {
          alert('Edit dialog created!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogCreate={this.state.editDialogCreate}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        editDialogKeyDown: (dialog: any, fields: any, editAppointment: any, event: any): any => {
          alert('Edit dialog key down!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogKeyDown={this.state.editDialogKeyDown}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        editDialogClose: (dialog: any, fields: any, editAppointment: any): any => {
          alert('Edit dialog closed!');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} editDialogClose={this.state.editDialogClose}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Data Export settings used by jqxScheduler when exportData is called. See also the exportData method.

• serverURL - determines the URL of the save-file.php.
• characterSet - determines the char set.
• fileName - determines the file's name. Set this to null if you want to export the data to a local variable.
• dateTimeFormatString - determines the dates formatting in the exported file.
• resourcesInMultipleICSFiles - determines whether multiple ICS files will be generated when the Scheduler has resources. Each file will include appointments only from a specific resource.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        exportSettings: {
          serverURL: null,
          characterSet: null,
          fileName: "jqxScheduler"
        },
        ready: () => {
          this.$refs.myScheduler.exportData('pdf')
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} exportSettings={this.state.exportSettings}
        ready={this.state.ready}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} height={600}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's legendPosition. Possible values: "top" and "bottom".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} legendPosition={'top'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's legend height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} legendHeight={40}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's localization.

{
	// separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{"name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// short date pattern
		d: "M/d/yyyy",
		// long date pattern
		D: "dddd, MMMM dd, yyyy",
		// short time pattern
		t: "h:mm tt",
		// long time pattern
		T: "h:mm:ss tt",
		// long date, short time pattern
		f: "dddd, MMMM dd, yyyy h:mm tt",
		// long date, long time pattern
		F: "dddd, MMMM dd, yyyy h:mm:ss tt",
		// month/day pattern
		M: "MMMM dd",
		// month/year pattern
		Y: "yyyy MMMM",
		// S is a sortable format that does not vary by culture
		S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
    agendaViewString: "Agenda",
    agendaAllDaystring: "all day",
    agendaDateColumn: "Date",
    agendaTimeColumn: "Time",
    agendaAppointmentColumn: "Appointment",
	backstring: "Back",
	forwardstring: "Forward",
	toolBarPreviousButtonstring: "previous",
	toolBarNextButtonstring: "next",
	emptyDatastring: "No data to display",
	loadstring: "Loading...",
	clearstring: "Clear",
	todaystring: "Today",
	dayViewstring: "Day",
	weekViewstring: "Week",
	monthViewstring: "Month",
	timelineDayViewstring: "Timeline Day",
	timelineWeekViewstring: "Timeline Week",
	timelineMonthViewstring: "Timeline Month",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",
	editRecurringAppointmentDialogTitlestring: "Edit Recurring Appointment",
	editRecurringAppointmentDialogContentstring: "Do you want to edit only this occurrence or the series?",
	editRecurringAppointmentDialogOccurrencestring: "Edit Occurrence",
	editRecurringAppointmentDialogSeriesstring: "Edit The Series",
	editDialogTitlestring: "Edit Appointment",
	editDialogCreateTitlestring: "Create New Appointment",
	contextMenuEditAppointmentstring: "Edit Appointment",
	contextMenuCreateAppointmentstring: "Create New Appointment",
	editDialogSubjectstring: "Subject",
	editDialogLocationstring: "Location",
	editDialogFromstring: "From",
	editDialogTostring: "To",
	editDialogAllDaystring: "All day",
	editDialogExceptionsstring: "Exceptions",
	editDialogResetExceptionsstring: "Reset on Save",
	editDialogDescriptionstring: "Description",
	editDialogResourceIdstring: "Owner",
	editDialogStatusstring: "Status",
	editDialogColorstring: "Color",
	editDialogColorPlaceHolderstring: "Select Color",
	editDialogTimeZonestring: "Time Zone",
	editDialogSelectTimeZonestring: "Select Time Zone",
	editDialogSavestring: "Save",
	editDialogDeletestring: "Delete",
	editDialogCancelstring: "Cancel",
	editDialogRepeatstring: "Repeat",
	editDialogRepeatEverystring: "Repeat every",
	editDialogRepeatEveryWeekstring: "week(s)",
	editDialogRepeatEveryYearstring: "year(s)",
	editDialogRepeatEveryDaystring: "day(s)",
	editDialogRepeatNeverstring: "Never",
	editDialogRepeatDailystring: "Daily",
	editDialogRepeatWeeklystring: "Weekly",
	editDialogRepeatMonthlystring: "Monthly",
	editDialogRepeatYearlystring: "Yearly",
	editDialogRepeatEveryMonthstring: "month(s)",
	editDialogRepeatEveryMonthDaystring: "Day",
	editDialogRepeatFirststring: "first",
	editDialogRepeatSecondstring: "second",
	editDialogRepeatThirdstring: "third",
	editDialogRepeatFourthstring: "fourth",
	editDialogRepeatLaststring: "last",
	editDialogRepeatEndstring: "End",
	editDialogRepeatAfterstring: "After",
	editDialogRepeatOnstring: "On",
	editDialogRepeatOfstring: "of",
	editDialogRepeatOccurrencesstring: "occurrence(s)",
	editDialogRepeatSavestring: "Save Occurrence",
	editDialogRepeatSaveSeriesstring: "Save Series",
	editDialogRepeatDeletestring: "Delete Occurrence",
	editDialogRepeatDeleteSeriesstring: "Delete Series",
	editDialogStatuses:
	{
		free: "Free",
		tentative: "Tentative",
		busy: "Busy",
		outOfOffice: "Out of Office"
	},
    loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",	
}

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        localization: {
          days: {
            names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
          }
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} localization={this.state.localization}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's minimum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        min: new jqx.date(2018, 11, 12),
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} min={this.state.min}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's maximum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        max: new jqx.date(2018, 12, 1),
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} max={this.state.max}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a function called when the Scheduler is rendered and ready for usage.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        ready: (): any => {
          alert('ready');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} ready={this.state.ready}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is object with the following members:

• appointment - object which has the appointmentDataFields. See appointmentDataFields property.
• width - integer. Gets the appointment's width.
• height- integer. Gets the appointment's height.
• textColor - hex string. Gets or sets the appointment's text color.
• background - hex string. Gets or sets the appointment's background color.
• borderColor - hex string. Gets or sets the appointment's border color.
• style - hex string. Gets or sets the appointment's style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.
• cssClass - string. This can be used for adding CSS Class to the appointment.
• html - html string. This can be used for replacing the appointment's HTML Content.
• view - string. Gets the current view - 'dayView', 'weekView', 'monthView', timelineDayView', 'timelineWeekView', 'timelineMonthView'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        renderAppointment: (data: any): any => {
          alert('render appointment');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} renderAppointment={this.state.renderAppointment}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a function called by the Scheduler when the Scheduler's rendering function is called.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        rendering: (): any => {
          alert('rendering');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} rendering={this.state.rendering}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets a function called by the Scheduler when the Scheduler is rendered.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        rendered: (): any => {
          alert('rendered');
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} rendered={this.state.rendered}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Scheduler is displayed with Right to Left layout.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's resource object. The object can have the following members:

• source - dataAdapter or Array.
• colorScheme - string which defines the appoinment's style depending on its resourceId. Values from 'scheme01' to 'scheme27'.
• orientation - string which defines the resources representation. Values - 'none', 'horizontal', 'vertical'.
• dataField - string which defines the resourceId. If your appointment's resource field is 'calendar', this dataField should be set to 'calendar'.
• resourceColumnWidth - Integer which defines the Scheduler columns width when 'orientation' is 'horizontal'.
• resourceRowHeight - Integer which defines the Scheduler resource group row height when 'orientation' is 'vertical'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler rows height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} rowsHeight={40}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Scheduler's navigation toolbar is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} showToolbar={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Scheduler's legend bar is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbars size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} scrollBarSize={20}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler appointments data source. The property should point to dataAdapter instance.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler appointments statuses.

Sets or gets the Scheduler rows height on touch device.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} touchRowsHeight={40}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minimum height of appointments on touch devices in the all day area, month view and timeline views.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} touchAppointmentsMinHeight={40}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbars size on touch devices.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} touchScrollBarSize={20}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler's Time Zone. Possible values:

'Dateline Standard Time' - (offsetMinutes: -720, offsetHours: -12, text: '(UTC-12:00) International Date Line West')
'UTC-11' - (offsetMinutes: -660, offsetHours: -11, text: '(UTC-11:00) Coordinated Universal Time-11')
'Hawaiteratoran Standard Time' - (offsetMinutes: -600, offsetHours: -10, text: '(UTC-10:00) Hawaiterator')
'Alaskan Standard Time' - (offsetMinutes: -540, offsetHours: -9, text: '(UTC-09:00) Alaska' ,
'Pacific Standard Time (Mexico)' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Baja California' ,
'Pacific Standard Time' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Pacific Time (US & Canada)' ,
'US Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Arizona')
'Mountain Standard Time (Mexico)' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Chihuahua, La Paz, Mazatlan' ,
'Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Mountain Time (US & Canada)' ,
'Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central Time (US & Canada)' ,
'Central America Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central America')
'Canada Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Saskatchewan')
'Central Standard Time (Mexico)' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Guadalajara, Mexico City, Monterrey' ,
'SA Pacific Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Bogota, Lima, Quito, Rio Branco')
'Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Eastern Time (US & Canada)' ,
'US Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Indiana (East)' ,
'Venezuela Standard Time' - (offsetMinutes: -270, offsetHours: -4.5, text: '(UTC-04:30) Caracas')
'Atlantic Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Atlantic Time (Canada)' ,
'Paraguay Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Asuncion' ,
'Central Brazilian Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Cuiaba' ,
'Pacific SA Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Santiago' ,
'SA Western Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Georgetown, La Paz, Manaus')
'Newfoundland Standard Time' - (offsetMinutes: -210, offsetHours: -3.5, text: '(UTC-03:30) Newfoundland' ,
'SA Eastern Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Cayenne, Fortaleza')
'Argentina Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Buenos Aires' ,
'E. South America Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Brasilia' ,
'Bahia Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Salvador' ,
'Montevideo Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Montevideo' ,
'Greenland Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Greenland' ,
'UTC-02' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Coordinated Universal Time-02')
'Mid-Atlantic Standard Time' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Mid-Atlantic - Old' ,
'Azores Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Azores' ,
'Cape Verde Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Cape Verde Is.')
'Morocco Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Casablanca' ,
'UTC' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Coordinated Universal Time')
'GMT Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Dublin, Edinburgh, Lisbon, London' ,
'Greenwich Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Monrovia, Reykjavik')
'Central European Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb' ,
'Namibia Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Windhoek' ,
'W. Central Africa Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) West Central Africa')
'W. Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Amsterdam, Berlin, Rome' ,
'Central Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Belgrade, Budapest, Prague' ,
'Romance Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Brussels, Copenhagen, Madrid, Paris' ,
'FLE Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Helsinki, Kyiv, Riga, Sofia' ,
'South Africa Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Harare, Pretoria')
'Turkey Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Istanbul' ,
'GTB Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Athens, Bucharest' ,
'Libya Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Tripoli' ,
'E. Europe Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) E. Europe' ,
'Jordan Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Amman' ,
'Middle East Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Beirut' ,
'Egypt Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Cairo' ,
'Syria Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Damascus' ,
'Israel Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Jerusalem' ,
'Arab Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kuwait, Riyadh')
'E. Africa Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Nairobi')
'Arabic Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Baghdad' ,
'Kaliningrad Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kaliningrad, Minsk' ,
'Iran Standard Time' - (offsetMinutes: 210, offsetHours: 3.5, text: '(UTC+03:30) Tehran' ,
'Mauritius Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Port Louis' ,
'Georgian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Tbilisi')
'Caucasus Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Yerevan' ,
'Arabian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Abu Dhabi, Muscat')
'Azerbaijan Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Baku' ,
'Russian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Moscow, St. Petersburg, Volgograd' ,
'Afghanistan Standard Time' - (offsetMinutes: 270, offsetHours: 4.5, text: '(UTC+04:30) Kabul')
'Pakistan Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Islamabad, Karachi' ,
'West Asia Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Ashgabat, Tashkent')
'India Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi')
'Sri Lanka Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Sri Jayawardenepura')
'Nepal Standard Time' - (offsetMinutes: 345, offsetHours: 5.75, text: '(UTC+05:45) Kathmandu')
'Central Asia Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Astana')
'Bangladesh Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Dhaka' ,
'Ekaterinburg Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Ekaterinburg' ,
'Myanmar Standard Time' - (offsetMinutes: 390, offsetHours: 6.5, text: '(UTC+06:30) Yangon (Rangoon)')
'SE Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Bangkok, Hanoi, Jakarta')
'N. Central Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Novosibirsk' ,
'Ulaanbaatar Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Ulaanbaatar')
'China Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Beijing, Chongqing, Hong Kong')
'Singapore Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Kuala Lumpur, Singapore')
'North Asia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Krasnoyarsk' ,
'Taipei Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Taipei')
'W. Australia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Perth' ,
'Korea Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Seoul')
'North Asia East Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Irkutsk' ,
'Tokyo Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Osaka, Sapporo, Tokyo')
'AUS Central Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Darwin')
'Cen. Australia Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Adelaide' ,
'West Pacific Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Guam, Port Moresby')
'Tasmania Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Hobart' ,
'E. Australia Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Brisbane')
'AUS Eastern Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Canberra, Melbourne, Sydney' ,
'Yakutsk Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Yakutsk' ,
'Vladivostok Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Vladivostok' ,
'Central Pacific Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Solomon Is., New Caledonia')
'Magadan Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Magadan' ,
'Kamchatka Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Petropavlovsk-Kamchatsky - Old' ,
'Fiji Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Fiji' ,
'New Zealand Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Auckland, Wellington' ,
'UTC+12' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Coordinated Universal Time+12')
'Tonga Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Nuku\'alofa')
'Samoa Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Samoa')
						   

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} timeZone={'UTC'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} touchDayNameFormat={'abbr'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the toolbar's date format.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} toolBarRangeFormat={'dd MM yyyy'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the toolbar's date format when the Scheduler's width is not enough for displaying the full format.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} toolBarRangeFormatAbbr={'dd MM yy'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Scheduler toolbar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler, { ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
 
class App extends React.PureComponent<{}, ISchedulerProps> {
  private myScheduler = React.createRef<JqxScheduler>(); 
 
  constructor(props: {}) {
    super(props);
 
    const appointments = new Array();
    const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
    }
    const appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
    }
    const appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    const source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    
    this.state = {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myScheduler.current!.ensureAppointmentVisible('id1');
  }
  
  public render() {
    return (
      <JqxScheduler ref={this.myScheduler} 
        date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
        resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
        views={this.state.views} toolbarHeight={60}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);