| Name | Type | Default |
|---|
|
appointmentOpacity
|
Number
|
0.7
|
Sets or gets the appointmentOpacity property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentOpacity]="0.7"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentsMinHeight
|
Number
|
18
|
Sets or gets the appointmentsMinHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentsMinHeight]="30"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentDataFields
|
SchedulerAppointmentDataFields
|
{
allDay: "allDay",
background: "background",
borderColor: "borderColor",
color: "color",
description: "description",
draggable: "draggable",
from: "from",
hidden: "hidden",
id: "id",
location: "location",
recurrencePattern: "recurrencePattern",
recurrenceException: "recurrenceException",
resizable: "resizable",
resourceId: "resourceId",
readOnly: "readOnly",
subject: "subject",
style: "style",
status: "status",
to: "to",
tooltip: "tooltip",
timeZone: "timeZone"
}
|
interface SchedulerAppointmentDataFields { allDay?: Boolean; background?: String; borderColor?: String; color?: String; description?: String; draggable?: Boolean; from?: String; hidden?: Boolean; id?: String | Number; location?: String; recurrencePattern?: SchedulerRecurrencePattern; recurrenceException?: String; resizable?: Boolean; resourceId?: String | Number; readOnly?: Boolean; subject?: String; style?: String; status?: String; to?: String; tooltip?: String; timeZone?: String; } interface SchedulerRecurrencePattern { FREQ?: SchedulerFREQ; COUNT?: Number; UNTIL?: String; BYDAY?: String; BYMONTHDAY?: String; BYMONTH?: Number; INTERVAL?: Number; } Sets or gets the appointmentDataFields property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentDataFields]="appointmentDataFields"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentTooltips
|
Boolean
|
true
|
Sets or gets the appointmentTooltips property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [appointmentTooltips]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
columnsHeight
|
Number
|
30
|
Sets or gets the columnsHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [columnsHeight]="40"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenu
|
Boolean
|
true
|
Sets or gets the contextMenu property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenu]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuOpen
|
(menu: Any, appointment: Any, event: Any) => Void
|
null
|
Sets or gets the contextMenuOpen property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuOpen]="contextMenuOpen"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuClose
|
(menu: Any, appointment: Any, event: Any) => Void
|
null
|
Sets or gets the contextMenuClose property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuClose]="contextMenuClose"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuItemClick
|
(menu: Any, appointment: Any, event: Any) => Boolean
|
null
|
Sets or gets the contextMenuItemClick property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuItemClick]="contextMenuItemClick"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuCreate
|
(menu: Any, appointment: Any, event: Any) => Void
|
null
|
Sets or gets the contextMenuCreate property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [contextMenuCreate]="contextMenuCreate"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
changedAppointments
|
Array<SchedulerChangedAppointments>
|
[]
|
interface SchedulerChangedAppointments { type?: SchedulerType; appointment?: SchedulerAppointmentDataFields; } interface SchedulerAppointmentDataFields { allDay?: Boolean; background?: String; borderColor?: String; color?: String; description?: String; draggable?: Boolean; from?: String; hidden?: Boolean; id?: String | Number; location?: String; recurrencePattern?: SchedulerRecurrencePattern; recurrenceException?: String; resizable?: Boolean; resourceId?: String | Number; readOnly?: Boolean; subject?: String; style?: String; status?: String; to?: String; tooltip?: String; timeZone?: String; } interface SchedulerRecurrencePattern { FREQ?: SchedulerFREQ; COUNT?: Number; UNTIL?: String; BYDAY?: String; BYMONTHDAY?: String; BYMONTH?: Number; INTERVAL?: Number; } enum SchedulerType { Update, Delete, Add } Sets or gets the changedAppointments property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [changedAppointments]="changedAppointments"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [disabled]="true"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
date
|
Any
|
new jqx.date('todayDate')
|
Sets or gets the date property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [date]="date"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
dayNameFormat
|
String
|
'full'
|
Sets or gets the dayNameFormat property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [dayNameFormat]="'abbr'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [enableHover]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialog
|
Boolean
|
true
|
Sets or gets the editDialog property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialog]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogDateTimeFormatString
|
String
|
"dd/MM/yyyy hh:mm tt"
|
Sets or gets the editDialogDateTimeFormatString property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogDateTimeFormatString]="'dd-MM-yyyy HH:mm'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogDateFormatString
|
String
|
"dd/MM/yyyy"
|
Sets or gets the editDialogDateFormatString property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogDateFormatString]="'dd/MM/yyyy'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogOpen
|
(dialog?: Any, fields?: Any, editAppointment?: Any) => Void
|
null
|
Sets or gets the editDialogOpen property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogOpen]="editDialogOpen"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogCreate
|
(dialog?: Any, fields?: Any, editAppointment?: Any) => Void
|
null
|
Sets or gets the editDialogCreate property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogCreate]="editDialogCreate"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogKeyDown
|
(dialog?: Any, fields?: Any, editAppointment?: Any, event?: Any) => Boolean
|
null
|
Sets or gets the editDialogKeyDown property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogKeyDown]="editDialogKeyDown"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogClose
|
(dialog?: Any, fields?: Any, editAppointment?: Any) => Void
|
null
|
Sets or gets the editDialogClose property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [editDialogClose]="editDialogClose"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
exportSettings
|
SchedulerExportSettings
|
{ serverURL: null, characterSet: null, fileName: "jqxScheduler", dateTimeFormatString: "S", resourcesInMultipleICSFiles: false}
|
interface SchedulerExportSettings { serverURL?: String; characterSet?: String; fileName?: String; dateTimeFormatString?: String; resourcesInMultipleICSFiles?: Boolean; } Sets or gets the exportSettings property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [exportSettings]="exportSettings"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
height
|
String | Number
|
600
|
Sets or gets the height property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [height]="600"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
legendPosition
|
String
|
"bottom"
|
Sets or gets the legendPosition property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [legendPosition]="'top'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
legendHeight
|
Number
|
34
|
Sets or gets the legendHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [legendHeight]="40"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
localization
|
Any
|
|
Sets or gets the localization property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [localization]="localization"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
min
|
Any
|
new jqx.date(0)
|
Sets or gets the min property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [min]="new jqx.date(2015, 1, 1)"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
max
|
Any
|
new jqx.date(9999, 12, 31),
|
Sets or gets the max property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [max]="new jqx.date(2015, 1, 1)"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
ready
|
() => Void
|
null
|
Sets or gets the ready property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [ready]="ready"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
renderAppointment
|
(data: Any) => Any
|
null
|
Sets or gets the renderAppointment property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [renderAppointment]="renderAppointment"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
rendering
|
() => Void
|
null
|
Sets or gets the rendering property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [rendering]="rendering"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
rendered
|
() => Void
|
null
|
Sets or gets the rendered property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [rendered]="rendered"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [rtl]="true"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
resources
|
SchedulerResources
|
null
|
interface SchedulerResources { source?: String; colorScheme?: String; orientation?: SchedulerOrientation; dataField?: String; resourceColumnWidth?: Number; resourceRowHeight?: Number; } Sets or gets the resources property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [resources]="resources"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
rowsHeight
|
Number
|
27
|
Sets or gets the rowsHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [rowsHeight]="40"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
showToolbar
|
Boolean
|
true
|
Sets or gets the showToolbar property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [showToolbar]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
showLegend
|
Boolean
|
false
|
Sets or gets the showLegend property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [showLegend]="false"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
scrollBarSize
|
Number
|
15
|
Sets or gets the scrollBarSize property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [scrollBarSize]="20"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
source
|
Any
|
null
|
Sets or gets the source property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
statuses
|
SchedulerStatuses
|
{
free: "white",
tentative: "tentative",
busy: "transparent",
outOfOffice: "#800080"
}
|
interface SchedulerStatuses { free?: String; tentative?: String; busy?: String; doNotDisturb?: String; outOfOffice?: String; } Sets or gets the statuses property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [statuses]="statuses"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
touchRowsHeight
|
Number
|
37
|
Sets or gets the touchRowsHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [touchRowsHeight]="40"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [theme]="'energyblue'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
touchAppointmentsMinHeight
|
Number
|
27
|
Sets or gets the touchAppointmentsMinHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [touchAppointmentsMinHeight]="40"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
touchScrollBarSize
|
Number
|
18
|
Sets or gets the touchScrollBarSize property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [touchScrollBarSize]="20"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
timeZone
|
String
|
''
|
Sets or gets the timeZone property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [timeZone]="'UTC'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
touchDayNameFormat
|
enum:SchedulerTouchDayNameFormat
|
'abbr'
|
enum SchedulerTouchDayNameFormat { shortest, firstTwoLetters, firstLetter, abbr, full } Sets or gets the touchDayNameFormat property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [touchDayNameFormat]="'abbr'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
toolBarRangeFormat
|
String
|
'dd MMMM yyyy'
|
Sets or gets the toolBarRangeFormat property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [toolBarRangeFormat]="'dd MM yyyy'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
toolBarRangeFormatAbbr
|
String
|
'dd MM yyyy'
|
Sets or gets the toolBarRangeFormatAbbr property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [toolBarRangeFormatAbbr]="'dd MM yy'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
toolbarHeight
|
Number
|
54
|
Sets or gets the toolbarHeight property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [toolbarHeight]="60"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
views
|
Array<Any>
|
['dayView', 'weekView', 'monthView']
|
Sets or gets the views property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [views]="views"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
view
|
enum:SchedulerViewsType
|
|
enum SchedulerViewsType { dayView, weekView, monthView, timelineDayView, timelineWeekView, timelineMonthView } Sets or gets the view property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [view]="'timelineWeekView'"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
width
|
String | Number
|
800
|
Sets or gets the width property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date" [width]="600"> </jqxScheduler> ` }) export class AppComponent { source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
|
|
appointmentChange
|
Event
|
|
This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Bind to the appointmentChange event by type: jqxScheduler.
Code examples
Bind to the appointmentChange event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onAppointmentChange)="AppointmentChange($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { AppointmentChange(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentClick
|
Event
|
|
This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Bind to the appointmentClick event by type: jqxScheduler.
Code examples
Bind to the appointmentClick event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onAppointmentClick)="AppointmentClick($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { AppointmentClick(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentDoubleClick
|
Event
|
|
This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Bind to the appointmentDoubleClick event by type: jqxScheduler.
Code examples
Bind to the appointmentDoubleClick event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onAppointmentDoubleClick)="AppointmentDoubleClick($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { AppointmentDoubleClick(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentDelete
|
Event
|
|
This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Bind to the appointmentDelete event by type: jqxScheduler.
Code examples
Bind to the appointmentDelete event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onAppointmentDelete)="AppointmentDelete($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { AppointmentDelete(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
appointmentAdd
|
Event
|
|
This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - Object which has the appointmentDataFields. See appointmentDataFields property.
Code example
Bind to the appointmentAdd event by type: jqxScheduler.
Code examples
Bind to the appointmentAdd event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onAppointmentAdd)="AppointmentAdd($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { AppointmentAdd(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
bindingComplete
|
Event
|
|
This event is triggered when the binding is completed.
Code example
Bind to the bindingComplete event by type: jqxScheduler.
Code examples
Bind to the bindingComplete event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onBindingComplete)="BindingComplete($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { BindingComplete(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
cellClick
|
Event
|
|
This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.
Code example
Bind to the cellClick event by type: jqxScheduler.
Code examples
Bind to the cellClick event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onCellClick)="CellClick($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { CellClick(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
cellDoubleClick
|
Event
|
|
This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.
Code example
Bind to the cellDoubleClick event by type: jqxScheduler.
Code examples
Bind to the cellDoubleClick event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onCellDoubleClick)="CellDoubleClick($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { CellDoubleClick(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuOpen
|
Event
|
|
This event is triggered when the context menu is opened. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuOpen event by type: jqxScheduler.
Code examples
Bind to the contextMenuOpen event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onContextMenuOpen)="ContextMenuOpen($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { ContextMenuOpen(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuClose
|
Event
|
|
This event is triggered when the context menu is closed. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuClose event by type: jqxScheduler.
Code examples
Bind to the contextMenuClose event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onContextMenuClose)="ContextMenuClose($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { ContextMenuClose(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuItemClick
|
Event
|
|
This event is triggered when the context menu item is clicked. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- item - the clicked menu item.
Code example
Bind to the contextMenuItemClick event by type: jqxScheduler.
Code examples
Bind to the contextMenuItemClick event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onContextMenuItemClick)="ContextMenuItemClick($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { ContextMenuItemClick(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
contextMenuCreate
|
Event
|
|
This event is triggered when the context menu item is created. Event Arguments:
- menu - jQuery Object which represents the jqxMenu.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the contextMenuCreate event by type: jqxScheduler.
Code examples
Bind to the contextMenuCreate event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onContextMenuCreate)="ContextMenuCreate($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { ContextMenuCreate(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
dateChange
|
Event
|
|
This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.
Code example
Bind to the dateChange event by type: jqxScheduler.
Code examples
Bind to the dateChange event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onDateChange)="DateChange($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { DateChange(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editRecurrenceDialogOpen
|
Event
|
|
This event is triggered when the recurrence dialog is opened. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.
Code examples
Bind to the editRecurrenceDialogOpen event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onEditRecurrenceDialogOpen)="EditRecurrenceDialogOpen($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { EditRecurrenceDialogOpen(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editRecurrenceDialogClose
|
Event
|
|
This event is triggered when the recurrence dialog is closed. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
Code example
Bind to the editRecurrenceDialogClose event by type: jqxScheduler.
Code examples
Bind to the editRecurrenceDialogClose event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onEditRecurrenceDialogClose)="EditRecurrenceDialogClose($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { EditRecurrenceDialogClose(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogCreate
|
Event
|
|
This event is triggered when the edit dialog is created. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogCreate event by type: jqxScheduler.
Code examples
Bind to the editDialogCreate event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onEditDialogCreate)="EditDialogCreate($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { EditDialogCreate(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogOpen
|
Event
|
|
This event is triggered when the edit dialog is opened. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogOpen event by type: jqxScheduler.
Code examples
Bind to the editDialogOpen event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onEditDialogOpen)="EditDialogOpen($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { EditDialogOpen(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
editDialogClose
|
Event
|
|
This event is triggered when the edit dialog is closed. Event Arguments:
- dialog - jQuery Object which represents the jqxWindow.
- appointment - Object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
- fields - Object with the following members:
- subject - Subject input field.
- subjectLabel - Subject label.
- subjectContainer - Input and label HTML div container element.
- location - Location input field.
- locationLabel - Location label.
- locationContainer - Input and label HTML div container element.
- from - From datetime input field.
- fromLabel - From label.
- fromContainer - Input and label HTML div container element.
- to - To Datetimeinput field.
- toLabel - To label.
- toContainer - Input and label HTML div container element.
- allDay - AllDay checkbox field.
- allDayLabel - AllDay label.
- allDayContainer - Checkbox and label HTML div container element.
- timeZone - Timezone DropDownList field.
- timeZoneLabel - TimeZone label.
- timeZoneContainer - DropDownList and label HTML div container element.
- description - Description input field.
- descriptionLabel - Description label.
- descriptionContainer - Input and label HTML div container element.
- color - Color DropDownList field.
- colorLabel - Subject label.
- colorContainer - DropDownList and label container element.
- status - Status DropDownList field.
- statusLabel - Status label.
- statustContainer - DropDownList and label container element.
- resource - Resource DropDownList field.
- resourceLabel - Resource label.
- resourceContainer - DropDownList and label container element.
- buttonsField - buttons HTML div container HTML Element.
- saveButton - Save button.
- deleteButton - Delete button.
- cancelButton - Cancel button.
- daily.repeatDayInterval - NumberInput for daily repeat pattern.
- daily.repeatDayLabel - Label HTML Element.
- daily.panel - Daily repeat pattern HTML div container element.
- weekly.repeatWeekInterval - NumberInput for weekly repeat pattern.
- weekly.repeatWeekIntervalLabel - Label element.
- weekly.repeatDaysLabel - Label element.
- weekly.repeatDays - Array of Checkboxes.
- weekly.panel - Weekly repeat pattern HTML div container element.
- monthly.repeatMonth - NumberInput for monthly repeat pattern.
- monthly.repeatMonthLabel - Label element.
- monthly.repeatMonthDay - NumberInput for the month day in the pattern.
- monthly.repeatMonthDayBool - RadioButton element.
- monthly.repeatMonthDayLabel - Label element.
- monthly.repeatDayOfWeekBool - RadioButton element.
- monthly.repeatDayOfWeek - DropDownList element.
- monthly.repeatDayOfWeekLabel - Label element.
- monthly.repeatDayOfWeekType - DropDownList element.
- monthly.panel - Monthly repeat pattern HTML div container element.
- yearly.repeatYear - NumberInput for yearly repeat pattern.
- yearly.repeatYearLabel - Label element.
- yearly.repeatYearBool - RadioButton element.
- yearly.repeatYearBoolLabel - Label element.
- yearly.repeatYearMonth - DropDownList element.
- yearly.repeatYearDay - NumberInput element.
- yearly.repeatDayOfWeekBool - RadioButton element.
- yearly.repeatDayOfWeekType - DropDownList element.
- yearly.repeatDayOfWeekLabel - Label element.
- yearly.repeatDayOfWeekMonth - DropDownList element.
- yearly.panel - Yearly repeat pattern HTML div container element.
- resetExceptions - Checkbox element.
- resetExceptionsLabel - Label element.
- resetExceptionsContainer - Checkbox and Label container element.
- repeat - DropDownList element.
- repeatLabel - Label element.
- repeatContainer - DropDownList and Label container element.
- repeatPanel - HTML div container element for repeat patterns.
- repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
- repeatEndPanel.repeatEndNever - RadioButton element.
- repeatEndPanel.repeatEndNeverLabel - Label element.
- repeatEndPanel.repeatEndAfter - RadioButton element.
- repeatEndPanel.repeatEndAfterValue - NumberInput element.
- repeatEndPanel.repeatEndAfterLabel - Label element.
- repeatEndPanel.repeatEndOn - RadioButton element.
- repeatEndPanel.repeatEndOnValue - DateTimeInput element.
- repeatEndPanel.repeatEndOnLabel - Label element.
Code example
Bind to the editDialogClose event by type: jqxScheduler.
Code examples
Bind to the editDialogClose event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onEditDialogClose)="EditDialogClose($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { EditDialogClose(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
viewChange
|
Event
|
|
This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings.
Code example
Bind to the viewChange event by type: jqxScheduler.
Code examples
Bind to the viewChange event of jqxScheduler.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler(onViewChange)="ViewChange($event)" [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent { ViewChange(event: any): void { // Do Something } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
|
| 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; ngAfterViewInit(): void { this.myScheduler.addAppointment(1,Item1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
beginAppointmentsUpdate
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.beginAppointmentsUpdate(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
clearAppointmentsSelection
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.clearAppointmentsSelection(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
clearSelection
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.clearSelection(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
closeMenu
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.closeMenu(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
closeDialog
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.closeDialog(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
deleteAppointment
|
Void
|
appointmenId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.deleteAppointment(1,Item1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.destroy(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
endAppointmentsUpdate
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.endAppointmentsUpdate(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
ensureAppointmentVisible
|
Void
|
id: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.ensureAppointmentVisible(1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
ensureVisible
|
Void
|
item: Any,
resourceId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.ensureVisible(1,Item1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
exportData
|
Any
|
format: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.exportData(xls); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.focus(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
getAppointmentProperty
|
Any
|
appointmentId: String,
name: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.getAppointmentProperty(1,Item1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
getSelection
|
SchedulerGetSelection
|
None
|
interface SchedulerGetSelection { from?: Any; to?: Any; ResourceId?: Any; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.getSelection(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
getAppointments
|
Array<SchedulerAppointmentDataFields>
|
None
|
interface SchedulerAppointmentDataFields { allDay?: Boolean; background?: String; borderColor?: String; color?: String; description?: String; draggable?: Boolean; from?: String; hidden?: Boolean; id?: String | Number; location?: String; recurrencePattern?: SchedulerRecurrencePattern; recurrenceException?: String; resizable?: Boolean; resourceId?: String | Number; readOnly?: Boolean; subject?: String; style?: String; status?: String; to?: String; tooltip?: String; timeZone?: String; } interface SchedulerRecurrencePattern { FREQ?: SchedulerFREQ; COUNT?: Number; UNTIL?: String; BYDAY?: String; BYMONTHDAY?: String; BYMONTH?: Number; INTERVAL?: Number; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.getAppointments(1,Item1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
getDataAppointments
|
Array<Any>
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.getDataAppointments(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
hideAppointmentsByResource
|
Void
|
resourcesId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.hideAppointmentsByResource(1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
openMenu
|
Void
|
left: Number,
top: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.openMenu(10,20); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
openDialog
|
Void
|
left: Number,
top: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.openDialog(10,20); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
selectAppointment
|
Void
|
appointmentId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.selectAppointment(1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
setAppointmentProperty
|
Void
|
appointmentId: String,
name: String,
value: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.setAppointmentProperty(1,status,busy); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
selectCell
|
Void
|
date: Any,
allday: Boolean,
resourceId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.selectCell(1,false,1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
showAppointmentsByResource
|
Void
|
resourceId: String
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.showAppointmentsByResource(1); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
scrollWidth
|
Number
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.scrollWidth(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
scrollHeight
|
Number
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { let value = this.myScheduler.scrollHeight(); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
scrollLeft
|
Void
|
left: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.scrollLeft(10); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
|
scrollTop
|
Void
|
top: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScheduler #myScheduler [width]="850" [height]="600" [source]="dataAdapter" [view]="'weekView'" [views]="views" [appointmentDataFields]="appointmentDataFields" [date]="date"> </jqxScheduler> ` }) export class AppComponent implements AfterViewInit { @ViewChild( 'myScheduler') myScheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.myScheduler.scrollTop(10); } source: any = { dataType: 'json', dataFields: [ { name: 'id', type: 'string' }, { name: 'status', type: 'string' }, { name: 'about', type: 'string' }, { name: 'address', type: 'string' }, { name: 'company', type: 'string' }, { name: 'name', type: 'string' }, { name: 'style', type: 'string' }, { name: 'calendar', type: 'string' }, { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' }, { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' } ], id: 'id', url: '../sampledata/appointments.txt' }; dataAdapter: any = new jqx.dataAdapter(this.source); appointmentDataFields: any = { from: 'start', to: 'end', id: 'id', description: 'about', location: 'address', subject: 'name', style: 'style', status: 'status' }; views: any[] = [ { type: 'dayView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'weekView', showWeekends: false, timeRuler: { hidden: false } }, { type: 'monthView', showWeekends: false } ]; date: any = new jqx.date(2016, 11, 23);
|
