Properties

NameTypeDefault
appointmentOpacity Number 0.7

Sets or gets the appointmentOpacity property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentOpacity]="0.7">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
appointmentsMinHeight Number 18

Sets or gets the appointmentsMinHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentsMinHeight]="30">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
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" }
interface SchedulerAppointmentDataFields {
     allDay?: Boolean;
     background?: String;
     borderColor?: String;
     color?: String;
     description?: String;
     draggable?: Boolean;
     from?: String;
     hidden?: Boolean;
     id?: String | Number;
     location?: String;
     recurrencePattern?: SchedulerRecurrencePattern;
     recurrenceException?: String;
     resizable?: Boolean;
     resourceId?: String | Number;
     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 appointmentDataFields property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentDataFields]="appointmentDataFields">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
appointmentTooltips Boolean true

Sets or gets the appointmentTooltips property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentTooltips]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
columnsHeight Number 30

Sets or gets the columnsHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [columnsHeight]="40">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
contextMenu Boolean true

Sets or gets the contextMenu property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenu]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
contextMenuOpen (menu: Any, appointment: Any, event: Any) => Void null

Sets or gets the contextMenuOpen property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuOpen]="contextMenuOpen">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
contextMenuClose (menu: Any, appointment: Any, event: Any) => Void null

Sets or gets the contextMenuClose property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuClose]="contextMenuClose">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
contextMenuItemClick (menu: Any, appointment: Any, event: Any) => Boolean null

Sets or gets the contextMenuItemClick property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuItemClick]="contextMenuItemClick">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
contextMenuCreate (menu: Any, appointment: Any, event: Any) => Void null

Sets or gets the contextMenuCreate property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuCreate]="contextMenuCreate">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
changedAppointments Array<SchedulerChangedAppointments> []
interface SchedulerChangedAppointments {
     type?: SchedulerType;
     appointment?: SchedulerAppointmentDataFields;
}
interface SchedulerAppointmentDataFields {
     allDay?: Boolean;
     background?: String;
     borderColor?: String;
     color?: String;
     description?: String;
     draggable?: Boolean;
     from?: String;
     hidden?: Boolean;
     id?: String | Number;
     location?: String;
     recurrencePattern?: SchedulerRecurrencePattern;
     recurrenceException?: String;
     resizable?: Boolean;
     resourceId?: String | Number;
     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;
}
enum SchedulerType {
     Update,
     Delete,
     Add
}

Sets or gets the changedAppointments property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [changedAppointments]="changedAppointments">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [disabled]="true">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
date Any new jqx.date('todayDate')

Sets or gets the date property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
dayNameFormat String 'full'

Sets or gets the dayNameFormat property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [dayNameFormat]="'abbr'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
enableHover Boolean true

Sets or gets the enableHover property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [enableHover]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialog Boolean true

Sets or gets the editDialog property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialog]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogDateTimeFormatString String "dd/MM/yyyy hh:mm tt"

Sets or gets the editDialogDateTimeFormatString property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogDateTimeFormatString]="'dd-MM-yyyy HH:mm'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogDateFormatString String "dd/MM/yyyy"

Sets or gets the editDialogDateFormatString property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogDateFormatString]="'dd/MM/yyyy'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogOpen (dialog?: Any, fields?: Any, editAppointment?: Any) => Void null

Sets or gets the editDialogOpen property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogOpen]="editDialogOpen">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogCreate (dialog?: Any, fields?: Any, editAppointment?: Any) => Void null

Sets or gets the editDialogCreate property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogCreate]="editDialogCreate">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogKeyDown (dialog?: Any, fields?: Any, editAppointment?: Any, event?: Any) => Boolean null

Sets or gets the editDialogKeyDown property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogKeyDown]="editDialogKeyDown">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
editDialogClose (dialog?: Any, fields?: Any, editAppointment?: Any) => Void null

Sets or gets the editDialogClose property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogClose]="editDialogClose">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
exportSettings SchedulerExportSettings { serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}
interface SchedulerExportSettings {
     serverURL?: String;
     characterSet?: String;
     fileName?: String;
     dateTimeFormatString?: String;
     resourcesInMultipleICSFiles?: Boolean;
}

Sets or gets the exportSettings property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [exportSettings]="exportSettings">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
height String | Number 600

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [height]="600">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
legendPosition String "bottom"

Sets or gets the legendPosition property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [legendPosition]="'top'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
legendHeight Number 34

Sets or gets the legendHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [legendHeight]="40">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
localization Any

Sets or gets the localization property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [localization]="localization">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
min Any new jqx.date(0)

Sets or gets the min property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [min]="new jqx.date(2015, 1, 1)">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
max Any new jqx.date(9999, 12, 31),

Sets or gets the max property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [max]="new jqx.date(2015, 1, 1)">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
ready () => Void null

Sets or gets the ready property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [ready]="ready">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
renderAppointment (data: Any) => Any null

Sets or gets the renderAppointment property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [renderAppointment]="renderAppointment">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
rendering () => Void null

Sets or gets the rendering property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [rendering]="rendering">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
rendered () => Void null

Sets or gets the rendered property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [rendered]="rendered">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [rtl]="true">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
resources SchedulerResources null
interface SchedulerResources {
     source?: String;
     colorScheme?: String;
     orientation?: SchedulerOrientation;
     dataField?: String;
     resourceColumnWidth?: Number;
     resourceRowHeight?: Number;
}

Sets or gets the resources property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [resources]="resources">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
rowsHeight Number 27

Sets or gets the rowsHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [rowsHeight]="40">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
showToolbar Boolean true

Sets or gets the showToolbar property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [showToolbar]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
showLegend Boolean false

Sets or gets the showLegend property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [showLegend]="false">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
scrollBarSize Number 15

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [scrollBarSize]="20">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
source Any null

Sets or gets the source property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
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 statuses property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [statuses]="statuses">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
touchRowsHeight Number 37

Sets or gets the touchRowsHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [touchRowsHeight]="40">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [theme]="'energyblue'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
touchAppointmentsMinHeight Number 27

Sets or gets the touchAppointmentsMinHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [touchAppointmentsMinHeight]="40">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
touchScrollBarSize Number 18

Sets or gets the touchScrollBarSize property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [touchScrollBarSize]="20">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
timeZone String ''

Sets or gets the timeZone property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [timeZone]="'UTC'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
touchDayNameFormat enum:SchedulerTouchDayNameFormat 'abbr'
enum SchedulerTouchDayNameFormat {
     shortest,
     firstTwoLetters,
     firstLetter,
     abbr,
     full
}

Sets or gets the touchDayNameFormat property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [touchDayNameFormat]="'abbr'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
toolBarRangeFormat String 'dd MMMM yyyy'

Sets or gets the toolBarRangeFormat property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [toolBarRangeFormat]="'dd MM yyyy'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
toolBarRangeFormatAbbr String 'dd MM yyyy'

Sets or gets the toolBarRangeFormatAbbr property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [toolBarRangeFormatAbbr]="'dd MM yy'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
toolbarHeight Number 54

Sets or gets the toolbarHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [toolbarHeight]="60">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
views Array<Any> ['dayView', 'weekView', 'monthView']

Sets or gets the views property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [views]="views">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
view enum:SchedulerViewsType
enum SchedulerViewsType {
     dayView,
     weekView,
     monthView,
     timelineDayView,
     timelineWeekView,
     timelineMonthView
}

Sets or gets the view property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [view]="'timelineWeekView'">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}
width String | Number 800

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date" [width]="600">
</jqxScheduler>
`
})
export class AppComponent {
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

Events

appointmentChange Event

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

Code example

Bind to the appointmentChange event by type: jqxScheduler.

Code examples

Bind to the appointmentChange event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onAppointmentChange)="AppointmentChange($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
AppointmentChange(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

appointmentClick Event

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

Code example

Bind to the appointmentClick event by type: jqxScheduler.

Code examples

Bind to the appointmentClick event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onAppointmentClick)="AppointmentClick($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
AppointmentClick(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

appointmentDoubleClick Event

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

Code example

Bind to the appointmentDoubleClick event by type: jqxScheduler.

Code examples

Bind to the appointmentDoubleClick event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onAppointmentDoubleClick)="AppointmentDoubleClick($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
AppointmentDoubleClick(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

appointmentDelete Event

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

Code example

Bind to the appointmentDelete event by type: jqxScheduler.

Code examples

Bind to the appointmentDelete event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onAppointmentDelete)="AppointmentDelete($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
AppointmentDelete(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

appointmentAdd Event

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

Code example

Bind to the appointmentAdd event by type: jqxScheduler.

Code examples

Bind to the appointmentAdd event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onAppointmentAdd)="AppointmentAdd($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
AppointmentAdd(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

bindingComplete Event

This event is triggered when the binding is completed.

Code example

Bind to the bindingComplete event by type: jqxScheduler.

Code examples

Bind to the bindingComplete event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onBindingComplete)="BindingComplete($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
BindingComplete(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

cellClick Event

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

Code example

Bind to the cellClick event by type: jqxScheduler.

Code examples

Bind to the cellClick event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onCellClick)="CellClick($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
CellClick(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

cellDoubleClick Event

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

Code example

Bind to the cellDoubleClick event by type: jqxScheduler.

Code examples

Bind to the cellDoubleClick event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onCellDoubleClick)="CellDoubleClick($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
CellDoubleClick(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

contextMenuOpen Event

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

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

Code example

Bind to the contextMenuOpen event by type: jqxScheduler.

Code examples

Bind to the contextMenuOpen event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onContextMenuOpen)="ContextMenuOpen($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
ContextMenuOpen(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

contextMenuClose Event

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

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

Code example

Bind to the contextMenuClose event by type: jqxScheduler.

Code examples

Bind to the contextMenuClose event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onContextMenuClose)="ContextMenuClose($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
ContextMenuClose(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

contextMenuItemClick Event

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

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

Code example

Bind to the contextMenuItemClick event by type: jqxScheduler.

Code examples

Bind to the contextMenuItemClick event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onContextMenuItemClick)="ContextMenuItemClick($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
ContextMenuItemClick(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

contextMenuCreate Event

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

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

Code example

Bind to the contextMenuCreate event by type: jqxScheduler.

Code examples

Bind to the contextMenuCreate event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onContextMenuCreate)="ContextMenuCreate($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
ContextMenuCreate(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

dateChange Event

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

Code example

Bind to the dateChange event by type: jqxScheduler.

Code examples

Bind to the dateChange event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onDateChange)="DateChange($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
DateChange(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

editRecurrenceDialogOpen Event

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

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

Code example

Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.

Code examples

Bind to the editRecurrenceDialogOpen event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onEditRecurrenceDialogOpen)="EditRecurrenceDialogOpen($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
EditRecurrenceDialogOpen(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

editRecurrenceDialogClose Event

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

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

Code example

Bind to the editRecurrenceDialogClose event by type: jqxScheduler.

Code examples

Bind to the editRecurrenceDialogClose event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onEditRecurrenceDialogClose)="EditRecurrenceDialogClose($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
EditRecurrenceDialogClose(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

editDialogCreate Event

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

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

Code example

Bind to the editDialogCreate event by type: jqxScheduler.

Code examples

Bind to the editDialogCreate event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onEditDialogCreate)="EditDialogCreate($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
EditDialogCreate(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

editDialogOpen Event

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

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

Code example

Bind to the editDialogOpen event by type: jqxScheduler.

Code examples

Bind to the editDialogOpen event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onEditDialogOpen)="EditDialogOpen($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
EditDialogOpen(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

editDialogClose Event

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

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

Code example

Bind to the editDialogClose event by type: jqxScheduler.

Code examples

Bind to the editDialogClose event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onEditDialogClose)="EditDialogClose($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
EditDialogClose(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

viewChange Event

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

Code example

Bind to the viewChange event by type: jqxScheduler.

Code examples

Bind to the viewChange event of jqxScheduler.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler(onViewChange)="ViewChange($event)"
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent {
ViewChange(event: any): void
{
// Do Something
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

Methods

NameReturn TypeArguments
addAppointment Void item: SchedulerAppointmentDataFields
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.addAppointment(1,Item1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

beginAppointmentsUpdate Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.beginAppointmentsUpdate();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

clearAppointmentsSelection Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.clearAppointmentsSelection();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

clearSelection Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.clearSelection();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

closeMenu Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.closeMenu();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

closeDialog Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.closeDialog();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

deleteAppointment Void appointmenId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.deleteAppointment(1,Item1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

destroy Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.destroy();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

endAppointmentsUpdate Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.endAppointmentsUpdate();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

ensureAppointmentVisible Void id: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.ensureAppointmentVisible(1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

ensureVisible Void item: Any,
resourceId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.ensureVisible(1,Item1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

exportData Any format: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.exportData(xls);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

focus Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.focus();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

getAppointmentProperty Any appointmentId: String,
name: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.getAppointmentProperty(1,Item1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

getSelection SchedulerGetSelection None
interface SchedulerGetSelection {
     from?: Any;
     to?: Any;
     ResourceId?: Any;
}
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.getSelection();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

getAppointments Array<SchedulerAppointmentDataFields> None
interface SchedulerAppointmentDataFields {
     allDay?: Boolean;
     background?: String;
     borderColor?: String;
     color?: String;
     description?: String;
     draggable?: Boolean;
     from?: String;
     hidden?: Boolean;
     id?: String | Number;
     location?: String;
     recurrencePattern?: SchedulerRecurrencePattern;
     recurrenceException?: String;
     resizable?: Boolean;
     resourceId?: String | Number;
     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;
}
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.getAppointments(1,Item1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

getDataAppointments Array<Any> None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.getDataAppointments();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

hideAppointmentsByResource Void resourcesId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.hideAppointmentsByResource(1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

openMenu Void left: Number,
top: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.openMenu(10,20);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

openDialog Void left: Number,
top: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.openDialog(10,20);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

selectAppointment Void appointmentId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.selectAppointment(1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

setAppointmentProperty Void appointmentId: String,
name: String,
value: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.setAppointmentProperty(1,status,busy);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

selectCell Void date: Any,
allday: Boolean,
resourceId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.selectCell(1,false,1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

showAppointmentsByResource Void resourceId: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.showAppointmentsByResource(1);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

scrollWidth Number None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.scrollWidth();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

scrollHeight Number None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
let value = this.myScheduler.scrollHeight();
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

scrollLeft Void left: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.scrollLeft(10);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}

scrollTop Void top: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScheduler #myScheduler
[width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views"
[appointmentDataFields]="appointmentDataFields" [date]="date">
</jqxScheduler>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScheduler') myScheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.myScheduler.scrollTop(10);
}

source: any =
{
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'about', type: 'string' },
{ name: 'address', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'style', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
],
id: 'id',
url: '../sampledata/appointments.txt'
};
dataAdapter: any = new jqx.dataAdapter(this.source);
appointmentDataFields: any =
{
from: 'start',
to: 'end',
id: 'id',
description: 'about',
location: 'address',
subject: 'name',
style: 'style',
status: 'status'
};
views: any[] =
[
{ type: 'dayView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'weekView', showWeekends: false, timeRuler: { hidden: false } },
{ type: 'monthView', showWeekends: false }
];
date: any = new jqx.date(2016, 11, 23);
}