| Name | Type | Default |
|---|---|---|
| appointmentOpacity | number | 0.7 |
|
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);
|
||
| appointmentsMinHeight | number | 18 |
|
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);
|
||
| appointmentDataFields | SchedulerAppointmentDataFields | { allDay: "allDay", background: "background", borderColor: "borderColor", color: "color", description: "description", draggable: "draggable", from: "from", hidden: "hidden", id: "id", location: "location", recurrencePattern: "recurrencePattern", recurrenceException: "recurrenceException", resizable: "resizable", resourceId: "resourceId", readOnly: "readOnly", subject: "subject", style: "style", status: "status", to: "to", tooltip: "tooltip", timeZone: "timeZone" } |
|
SchedulerFREQ: "DAILY" | "WEEKLY" | "MONTHLY" | "YEARLY"
Interface SchedulerAppointmentDataFields { allDay?: boolean; background?: string; borderColor?: string; color?: string; description?: string; draggable?: boolean; from?: string; hidden?: boolean; id?: number | string; location?: string; recurrencePattern?: SchedulerRecurrencePattern; recurrenceException?: string; resizable?: boolean; resourceId?: number | string; readOnly?: boolean; subject?: string; style?: string; status?: string; to?: string; tooltip?: string; timeZone?: string; } Interface SchedulerRecurrencePattern { FREQ?: SchedulerFREQ; COUNT?: number; UNTIL?: string; BYDAY?: string; BYMONTHDAY?: string; BYMONTH?: number; INTERVAL?: number; } 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.
/* 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);
|
||
| appointmentTooltips | boolean | true |
|
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);
|
||
| columnsHeight | number | 30 |
|
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);
|
||
| contextMenu | boolean | true |
|
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);
|
||
| contextMenuOpen | (menu: SchedulerContextMenuOpen['menu'], appointment: SchedulerContextMenuOpen['appointment'], event: SchedulerContextMenuOpen['event']) => void | null |
|
Interface SchedulerContextMenuOpen {
menu?: any; appointment?: any; event?: any; } 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);
|
||
| contextMenuClose | (menu: SchedulerContextMenuClose['menu'], appointment: SchedulerContextMenuClose['appointment'], event: SchedulerContextMenuClose['event']) => void | null |
|
Interface SchedulerContextMenuClose {
menu?: any; appointment?: any; event?: any; } 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);
|
||
| contextMenuItemClick | (menu: SchedulerContextMenuItemClick['menu'], appointment: SchedulerContextMenuItemClick['appointment'], event: SchedulerContextMenuItemClick['event']) => boolean | null |
|
Interface SchedulerContextMenuItemClick {
menu?: any; appointment?: any; event?: any; } 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);
|
||
| contextMenuCreate | (menu: SchedulerContextMenuCreate['menu'], settings: SchedulerContextMenuCreate['settings']) => void | null |
|
Interface SchedulerContextMenuCreate {
menu?: any; settings?: any; } 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);
|
||
| changedAppointments | Array<SchedulerChangedAppointments> | [] |
|
SchedulerType: "Update" | "Delete" | "Add"
Interface SchedulerAppointmentDataFields { allDay?: boolean; background?: string; borderColor?: string; color?: string; description?: string; draggable?: boolean; from?: string; hidden?: boolean; id?: number | string; location?: string; recurrencePattern?: SchedulerRecurrencePattern; recurrenceException?: string; resizable?: boolean; resourceId?: number | string; readOnly?: boolean; subject?: string; style?: string; status?: string; to?: string; tooltip?: string; timeZone?: string; } Interface SchedulerChangedAppointments { type?: SchedulerType; appointment?: SchedulerAppointmentDataFields; } Gets an array with newly added, deleted or updated appointments. Each element in the Array is an object which has:
|
||
| disabled | boolean | false |
|
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);
|
||
| date | any | new $.jqx.date('todayDate') |
|
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);
|
||
| dayNameFormat | string | 'full' |
|
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);
|
||
| enableHover | boolean | true |
|
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);
|
||
| editDialog | boolean | true |
|
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);
|
||
| editDialogDateTimeFormatString | string | "dd/MM/yyyy hh:mm tt" |
|
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);
|
||
| editDialogDateFormatString | string | "dd/MM/yyyy" |
|
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);
|
||
| editDialogOpen | (dialog?: SchedulerEditDialogOpen['dialog'], fields?: SchedulerEditDialogOpen['fields'], editAppointment?: SchedulerEditDialogOpen['editAppointment']) => void | null |
|
Interface SchedulerEditDialogOpen {
dialog?: any; fields?: any; editAppointment?: any; } /* 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);
|
||
| editDialogCreate | (dialog?: SchedulerEditDialogCreate['dialog'], fields?: SchedulerEditDialogCreate['fields'], editAppointment?: SchedulerEditDialogCreate['editAppointment']) => void | null |
|
Interface SchedulerEditDialogCreate {
dialog?: any; fields?: any; editAppointment?: any; } /* 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);
|
||
| editDialogKeyDown | (dialog?: SchedulerEditDialogKeyDown['dialog'], fields?: SchedulerEditDialogKeyDown['fields'], editAppointment?: SchedulerEditDialogKeyDown['editAppointment'], event?: SchedulerEditDialogKeyDown['event']) => boolean | null |
|
Interface SchedulerEditDialogKeyDown {
dialog?: any; fields?: any; editAppointment?: any; event?: any; } /* 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);
|
||
| editDialogClose | (dialog?: SchedulerEditDialogClose['dialog'], fields?: SchedulerEditDialogClose['fields'], editAppointment?: SchedulerEditDialogClose['editAppointment']) => void | null |
|
Interface SchedulerEditDialogClose {
dialog?: any; fields?: any; editAppointment?: any; } /* 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);
|
||
| exportSettings | SchedulerExportSettings | { serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false} |
|
Interface SchedulerExportSettings {
serverURL?: string; characterSet?: string; fileName?: string; dateTimeFormatString?: string; resourcesInMultipleICSFiles?: boolean; } Determines the Data Export settings used by jqxScheduler when
/* 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);
|
||
| height | number | string | 600 |
|
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);
|
||
| legendPosition | string | "bottom" |
|
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);
|
||
| legendHeight | number | 34 |
|
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);
|
||
| localization | any | |
|
Sets or gets the Scheduler's localization. /* 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);
|
||
| min | any | new $.jqx.date(0) |
|
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);
|
||
| max | any | new $.jqx.date(9999, 12, 31), |
|
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);
|
||
| ready | () => void | null |
|
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);
|
||
| renderAppointment | (data: SchedulerRenderAppointment['data']) => any | null |
|
Interface SchedulerRenderAppointment {
data?: any; } Sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is object with the following members:
/* 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);
|
||
| rendering | () => void | null |
|
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);
|
||
| rendered | () => void | null |
|
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);
|
||
| rtl | boolean | false |
|
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);
|
||
| resources | SchedulerResources | null |
|
SchedulerOrientation: "none" | "horizontal" | "vertical"
Interface SchedulerResources { source?: string; colorScheme?: string; orientation?: SchedulerOrientation; dataField?: string; resourceColumnWidth?: number; resourceRowHeight?: number; } Sets or gets the Scheduler's resource object. The object can have the following members:
/* 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);
|
||
| rowsHeight | number | 27 |
|
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);
|
||
| showToolbar | boolean | true |
|
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);
|
||
| showLegend | boolean | false |
|
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);
|
||
| scrollBarSize | number | 15 |
|
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);
|
||
| source | any | null |
|
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);
|
||
| statuses | SchedulerStatuses | { free: "white", tentative: "tentative", busy: "transparent", outOfOffice: "#800080" } |
|
Interface SchedulerStatuses {
free?: string; tentative?: string; busy?: string; doNotDisturb?: string; outOfOffice?: string; } Sets or gets the Scheduler appointments statuses. |
||
| touchRowsHeight | number | 37 |
|
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);
|
||
| theme | string | '' |
/* 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);
|
||
| touchAppointmentsMinHeight | number | 27 |
|
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);
|
||
| touchScrollBarSize | number | 18 |
|
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);
|
||
| timeZone | string | '' |
|
Sets or gets the Scheduler's Time Zone. Possible values: /* 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);
|
||
| touchDayNameFormat | SchedulerTouchDayNameFormat | 'abbr' |
|
SchedulerTouchDayNameFormat: "shortest" | "firstTwoLetters" | "firstLetter" | "abbr" | "full"
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);
|
||
| toolBarRangeFormat | string | 'dd MMMM yyyy' |
|
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);
|
||
| toolBarRangeFormatAbbr | string | 'dd MM yyyy' |
|
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);
|
||
| toolbarHeight | number | 54 |
|
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);
|
||
| views | Array<any> | ['dayView', 'weekView', 'monthView'] |
|
Sets or gets the Scheduler's views. Each view in the Array can be string or object. strings are: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView', 'agendaView'. If it is an object it can have the following members:
/* 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);
|
||
| view | SchedulerViewsType | |
|
SchedulerViewsType: "dayView" | "weekView" | "monthView" | "timelineDayView" | "timelineWeekView" | "timelineMonthView"
Sets or gets the Scheduler's view. Possible vales: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView' and 'timelineMonthView' or the view's Index in the views object. /* 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);
|
||
| width | number | string | 800 |
|
Sets or gets the Scheduler's width. /* 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} width={600}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| appointmentChange | Event | |
|
This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property. Code examples
Bind to the
/* 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} onAppointmentChange={this.onAppointmentChange}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onAppointmentChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| appointmentClick | Event | |
|
This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property. Code examples
Bind to the
/* 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} onAppointmentClick={this.onAppointmentClick}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onAppointmentClick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| appointmentDoubleClick | Event | |
|
This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property. Code examples
Bind to the
/* 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} onAppointmentDoubleClick={this.onAppointmentDoubleClick}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onAppointmentDoubleClick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| appointmentDelete | Event | |
|
This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property. Code examples
Bind to the
/* 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} onAppointmentDelete={this.onAppointmentDelete}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onAppointmentDelete(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| appointmentAdd | Event | |
|
This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property. Code examples
Bind to the
/* 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} onAppointmentAdd={this.onAppointmentAdd}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onAppointmentAdd(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| bindingComplete | Event | |
|
This event is triggered when the binding is completed. Code examples
Bind to the
|
||
| cellClick | Event | |
|
This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object. Code examples
Bind to the
/* 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} onCellClick={this.onCellClick}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onCellClick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| cellDoubleClick | Event | |
|
This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object. Code examples
Bind to the
/* 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} onCellDoubleClick={this.onCellDoubleClick}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onCellDoubleClick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| contextMenuOpen | Event | |
|
This event is triggered when the context menu is opened. Event Arguments:
Code examples
Bind to the
/* 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} onContextMenuOpen={this.onContextMenuOpen}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onContextMenuOpen(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| contextMenuClose | Event | |
|
This event is triggered when the context menu is closed. Event Arguments:
Code examples
Bind to the
/* 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} onContextMenuClose={this.onContextMenuClose}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onContextMenuClose(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| contextMenuItemClick | Event | |
|
This event is triggered when the context menu item is clicked. Event Arguments:
Code examples
Bind to the
/* 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} onContextMenuItemClick={this.onContextMenuItemClick}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onContextMenuItemClick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| contextMenuCreate | Event | |
|
This event is triggered when the context menu item is created. Event Arguments:
Code examples
Bind to the
/* 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} onContextMenuCreate={this.onContextMenuCreate}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onContextMenuCreate(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| dateChange | Event | |
|
This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects. Code examples
Bind to the
/* 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} onDateChange={this.onDateChange}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onDateChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| editRecurrenceDialogOpen | Event | |
|
This event is triggered when the recurrence dialog is opened. Event Arguments:
Code examples
Bind to the
|
||
| editRecurrenceDialogClose | Event | |
|
This event is triggered when the recurrence dialog is closed. Event Arguments:
Code examples
Bind to the
|
||
| editDialogCreate | Event | |
|
This event is triggered when the edit dialog is created. Event Arguments:
Code examples
Bind to the
/* 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} onEditDialogCreate={this.onEditDialogCreate}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onEditDialogCreate(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| editDialogOpen | Event | |
|
This event is triggered when the edit dialog is opened. Event Arguments:
Code examples
Bind to the
/* 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} onEditDialogOpen={this.onEditDialogOpen}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onEditDialogOpen(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| editDialogClose | Event | |
|
This event is triggered when the edit dialog is closed. Event Arguments:
Code examples
Bind to the
/* 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} onEditDialogClose={this.onEditDialogClose}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onEditDialogClose(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| viewChange | Event | |
|
This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings. Code examples
Bind to the
/* 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} onViewChange={this.onViewChange}
date={this.state.date} source={this.state.source} view={'weekView'} showLegend={true}
resources={this.state.resources} appointmentDataFields={this.state.appointmentDataFields}
views={this.state.views}
/>
);
}
private onViewChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| addAppointment | item | |
|
Adds a new appointment. |
||
| beginAppointmentsUpdate | None | |
|
Begins an update process and stops the Scheduler's rendering and appointments rendering. |
||
| clearAppointmentsSelection | None | |
|
Clears the appointments selection. |
||
| clearSelection | None | |
|
Clears cells selection. |
||
| closeMenu | None | |
|
Closes the context menu. |
||
| closeDialog | None | |
|
Closes the edit dialog. |
||
| deleteAppointment | appointmenId | |
|
Deletes an 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');
this.myScheduler.current!.deleteAppointment('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);
|
||
| destroy | None | |
|
Destroys the Scheduler and removes it from the DOM. /* 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');
this.myScheduler.current!.destroy();
}
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);
|
||
| endAppointmentsUpdate | None | |
|
Ends the update process and resumes the Scheduler's rendering. The method works together with the beginAppointmentsUpdate. |
||
| ensureAppointmentVisible | id | |
|
Scrolls to an appointment if it is out of the visible area. |
||
| ensureVisible | item, resourceId | |
|
Scrolls to a Date. |
||
| exportData | format | |
|
Exports jqxScheduler's data to ICS, Excel, HTML, XML, JSON, CSV or TSV. See also the /* 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');
this.myScheduler.current!.exportData('xls');
}
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);
|
||
| focus | None | |
|
Focuses the Scheduler. /* 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');
this.myScheduler.current!.focus();
}
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);
|
||
| getAppointmentProperty | appointmentId, name | |
|
Gets the value of an Appointment property. /* 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');
this.myScheduler.current!.getAppointmentProperty('id1','subject');
}
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);
|
||
| getSelection | None | |
|
Gets the cells selection. Returns an object with the following members:
/* 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');
this.myScheduler.current!.getSelection();
}
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);
|
||
| getAppointments | None | |
|
Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the appointmentDataFields. See appointmentDataFields property. /* 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');
this.myScheduler.current!.getAppointments();
}
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);
|
||
| getDataAppointments | None | |
|
Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the fields defined in the dataAdapter's source object. /* 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');
this.myScheduler.current!.getDataAppointments();
}
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);
|
||
| hideAppointmentsByResource | resourcesId | |
|
Hides appointments by given resourceId. /* 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');
this.myScheduler.current!.hideAppointmentsByResource('Room 1');
}
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);
|
||
| openMenu | left, top | |
|
Opens the context menu. |
||
| openDialog | left, top | |
|
Opens the edit dialog. |
||
| selectAppointment | appointmentId | |
|
Selects an 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');
this.myScheduler.current!.selectAppointment('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);
|
||
| setAppointmentProperty | appointmentId, name, value | |
|
Sets the value of an appointment's property. |
||
| selectCell | date, allday, resourceId | |
|
Selects a cell. /* 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');
this.myScheduler.current!.selectCell(new jqx.date(2018, 11, 23),false,null);
}
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);
|
||
| showAppointmentsByResource | resourceId | |
|
Shows appointments by given resourceId. |
||
| scrollWidth | None | |
|
Returns the scrollbable width. /* 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');
this.myScheduler.current!.scrollWidth();
}
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);
|
||
| scrollHeight | None | |
|
Returns the scrollbable 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');
this.myScheduler.current!.scrollHeight();
}
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);
|
||
| scrollLeft | left | |
|
Scrolls horizontally to a given position. /* 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');
this.myScheduler.current!.scrollLeft(0);
}
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);
|
||
| scrollTop | top | |
|
Scrolls vertically to a given position. /* 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');
this.myScheduler.current!.scrollTop(10);
}
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);
|
||