| Name | Type | Default |
|---|---|---|
| appointmentOpacity | Number | 0.7 |
|
Sets or gets the 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| bindingComplete | Event | |
|
This event is triggered when the binding is completed. Code exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
| contextMenuOpen | Event | |
|
This event is triggered when the context menu is opened. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| contextMenuClose | Event | |
|
This event is triggered when the context menu is closed. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| contextMenuItemClick | Event | |
|
This event is triggered when the context menu item is clicked. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| contextMenuCreate | Event | |
|
This event is triggered when the context menu item is created. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| dateChange | Event | |
|
This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects. Code exampleBind to the Code examples
Bind to the
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
}
|
||
| editRecurrenceDialogOpen | Event | |
|
This event is triggered when the recurrence dialog is opened. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| editRecurrenceDialogClose | Event | |
|
This event is triggered when the recurrence dialog is closed. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| editDialogCreate | Event | |
|
This event is triggered when the edit dialog is created. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| editDialogOpen | Event | |
|
This event is triggered when the edit dialog is opened. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| editDialogClose | Event | |
|
This event is triggered when the edit dialog is closed. Event Arguments:
Code exampleBind to the Code examples
Bind to the
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
}
|
||
| 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 exampleBind to the Code examples
Bind to the
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
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||