Angular UI Components Documentation

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}
							
						

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);
}