| Name | Type | Default |
|---|
|
backText
|
String
|
Back
|
Sets or gets the backText property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [backText]="'Back'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
columnHeaderHeight
|
Number
|
20
|
Sets or gets the columnHeaderHeight property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [columnHeaderHeight]="50">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
clearString
|
String
|
'Clear'
|
Sets or gets the clearString property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [clearString]="'Clear'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
culture
|
String
|
default
|
Sets or gets the culture property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [culture]="'de-DE'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
dayNameFormat
|
enum:CalendarDayNameFormat
|
'firstTwoLetters'
|
enum CalendarDayNameFormat { default, shortest, firstTwoLetters, firstLetter, full } Sets or gets the dayNameFormat property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [dayNameFormat]="'firstTwoLetters'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [disabled]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableWeekend
|
Boolean
|
false
|
Sets or gets the enableWeekend property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableWeekend]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableViews
|
Boolean
|
true
|
Sets or gets the enableViews property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableViews]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableOtherMonthDays
|
Boolean
|
true
|
Sets or gets the enableOtherMonthDays property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableOtherMonthDays]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableFastNavigation
|
Boolean
|
true
|
Sets or gets the enableFastNavigation property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableFastNavigation]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableHover]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableAutoNavigation
|
Boolean
|
true
|
Sets or gets the enableAutoNavigation property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableAutoNavigation]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
enableTooltips
|
Boolean
|
false
|
Sets or gets the enableTooltips property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [enableTooltips]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
forwardText
|
String
|
Forward
|
Sets or gets the forwardText property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [forwardText]="'Forward'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
firstDayOfWeek
|
Number
|
0
|
Sets or gets the firstDayOfWeek property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [firstDayOfWeek]="3">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
height
|
Size
|
null
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
min
|
Any
|
1900, 1, 1
|
Sets or gets the min property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [min]="min" [max]="max">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
max
|
Any
|
2100, 1, 1
|
Sets or gets the max property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [min]="min" [max]="max">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
navigationDelay
|
Number
|
400
|
Sets or gets the navigationDelay property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [navigationDelay]="2000">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
rowHeaderWidth
|
Size
|
25
|
Sets or gets the rowHeaderWidth property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [rowHeaderWidth]="30">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
readOnly
|
Boolean
|
false
|
Sets or gets the readOnly property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [readOnly]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
restrictedDates
|
Array<Date>
|
[]
|
Sets or gets the restrictedDates property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [restrictedDates]="restrictedDates">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [rtl]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
stepMonths
|
Number
|
1
|
Sets or gets the stepMonths property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [stepMonths]="3">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
showWeekNumbers
|
Boolean
|
true
|
Sets or gets the showWeekNumbers property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [showWeekNumbers]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
showDayNames
|
Boolean
|
true
|
Sets or gets the showDayNames property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [showDayNames]="false">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
showOtherMonthDays
|
Boolean
|
true
|
Sets or gets the showOtherMonthDays property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [showOtherMonthDays]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
showFooter
|
Boolean
|
false
|
Sets or gets the showFooter property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [showFooter]="true">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
selectionMode
|
enum:CalendarSelectionMode
|
'default'
|
enum CalendarSelectionMode { none, default, range } Sets or gets the selectionMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [selectionMode]="'range'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
specialDates
|
Array<Any>
|
new Array()
|
Sets or gets the specialDates property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [specialDates]="specialDates">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [theme]="'energyblue'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
titleHeight
|
Number
|
25
|
Sets or gets the titleHeight property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [titleHeight]="50">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
titleFormat
|
enum:CalendarTitleFormat
|
["MMMM yyyy", "yyyy", "yyyy"]
|
enum CalendarTitleFormat { d, dd, ddd, dddd, h, hh, H, HH, m, mm, M, MM, MMM, MMMM, s, ss, t, tt, y, yy, yyy, yyyy } Sets or gets the titleFormat property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [titleFormat]="["MM yyyy", "yyyy", "yyyy"]">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
todayString
|
String
|
'Today'
|
Sets or gets the todayString property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [todayString]="'Today'">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
value
|
Date
|
Today's Date
|
Sets or gets the value property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200" [value]="value">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
width
|
Size
|
null
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
|
|
backButtonClick
|
Event
|
|
This event is triggered when the calendar back navigation button is clicked.
Code examples
Bind to the backButtonClick event of jqxCalendar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar (onBackButtonClick)="BackButtonClick($event)"
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
BackButtonClick(event: any): void
{
// Do Something
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
change
|
Event
|
|
This event is triggered when the Calendar's selection is changed.
Code examples
Bind to the change event of jqxCalendar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar (onChange)="Change($event)"
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
Change(event: any): void
{
// Do Something
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
nextButtonClick
|
Event
|
|
This event is triggered when the calendar next navigation button is clicked.
Code examples
Bind to the nextButtonClick event of jqxCalendar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar (onNextButtonClick)="NextButtonClick($event)"
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
NextButtonClick(event: any): void
{
// Do Something
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
viewChange
|
Event
|
|
This event is triggered when the Calendar's view is changed.
Code examples
Bind to the viewChange event of jqxCalendar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar (onViewChange)="ViewChange($event)"
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent {
ViewChange(event: any): void
{
// Do Something
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
clear
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.clear();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.destroy();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.focus();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
addSpecialDate
|
Void
|
date: Any,
tooltip: Any,
text: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.addSpecialDate(new Date(2017, 9, 20),tooltip);
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
getMinDate
|
Any
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
let value = this.myCalendar.getMinDate();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
getMaxDate
|
Any
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
let value = this.myCalendar.getMaxDate();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
getDate
|
Any
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
let value = this.myCalendar.getDate();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
getRange
|
Any
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
let value = this.myCalendar.getRange();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
navigateForward
|
Void
|
months: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.navigateForward();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
navigateBackward
|
Void
|
months: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.navigateBackward();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.render();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
refresh
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.refresh();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
setMinDate
|
Void
|
date: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.setMinDate(new Date(2017, 9, 20));
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
setMaxDate
|
Void
|
date: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.setMaxDate(new Date(2017, 9, 20));
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
setDate
|
Void
|
date: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.setDate(new Date(2017, 9, 20));
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
setRange
|
Void
|
date: Any,
date2: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
today
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
this.myCalendar.today();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|
|
val
|
Any
|
value: Any,
value2: Any
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxCalendar #myCalendar
[width]="200" [height]="200">
</jqxCalendar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myCalendar') myCalendar: jqxCalendarComponent;
ngAfterViewInit(): void
{
let value = this.myCalendar.val();
}
value: Date = new Date(2017, 9, 20);
min: Date = new Date(2015, 9, 20);
max: Date = new Date(2020, 9, 20);
}
|