Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxCalendarComponent

Calendar provides a way to display date information.

Igx Module

IgxCalendarModule

Igx Theme

igx-calendar-theme, igx-icon-theme

Igx Keywords

calendar, datepicker, schedule, date

Igx Group

Scheduling

Remarks

The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple or range selection.

@example:

<igx-calendar selection="range"></igx-calendar>

Hierarchy

Hierarchy

  • IgxMonthPickerBaseDirective
    • IgxCalendarComponent

Implements

  • AfterViewInit
  • OnDestroy

Properties

Accessors

Methods

Properties

activeViewChanged

activeViewChanged: EventEmitter<IgxCalendarView> = ...

Emits an event when the active view is changed.

<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>

public activeViewChanged(event: CalendarView) {
 let activeView = event;
}

hasHeader

hasHeader: boolean = true

Sets/gets whether the calendar has header. Default value is true.

Example

<igx-calendar [hasHeader]="false"></igx-calendar>

hideOutsideDays

hideOutsideDays: boolean = false

Sets/gets whether the outside dates (dates that are out of the current month) will be hidden. Default value is false.

<igx-calendar [hideOutsideDays]="true"></igx-calendar>

let hideOutsideDays = this.calendar.hideOutsideDays;

id

id: string = ...

Sets/gets the id of the calendar.

Remarks

If not set, the id will have value "igx-calendar-0".

Example

<igx-calendar id="my-first-calendar"></igx-calendar>

Memberof

IgxCalendarComponent

selected

selected: EventEmitter<Date | Date[]> = ...

Emits an event when a date is selected. Provides reference the selectedDates property.

showWeekNumbers

showWeekNumbers: boolean = false

Show/hide week numbers

Example

<igx-calendar [showWeekNumbers]="true"></igx-calendar>
``

vertical

vertical: boolean = false

Sets/gets whether the calendar header will be in vertical position. Default value is false.

Example

<igx-calendar [vertical]="true"></igx-calendar>

viewDateChanged

viewDateChanged: EventEmitter<IViewDateChangeEventArgs> = ...

Emits an event when the month in view is changed.

<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>

public viewDateChanged(event: IViewDateChangeEventArgs) {
 let viewDate = event.currentValue;
}

Accessors

activeView

context

  • get context(): {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

  • Gets the context for the template marked with either igxCalendarSubHeaderMonth or igxCalendarSubHeaderYear directive.

    Example

    let context =  this.calendar.context;

    Returns {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

    • $implicit: {
          date: Date;
          full: string;
          index: number;
          monthView: (() => void);
          yearView: (() => void);
      }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • Returns void

      • yearView: (() => void)
          • (): void

          • Returns void

disabledDates

formatOptions

formatViews

headerContext

  • get headerContext(): {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

  • Gets the context for the template marked with the igxCalendarHeader directive.

    Example

    let headerContext =  this.calendar.headerContext;

    Returns {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

    • $implicit: {
          date: Date;
          full: string;
          index: number;
          monthView: (() => void);
          yearView: (() => void);
      }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • Returns void

      • yearView: (() => void)
          • (): void

          • Returns void

headerTemplate

locale

monthsViewNumber

resourceStrings

selection

specialDates

subheaderTemplate

value

  • get value(): Date | Date[]

  • Gets the selected date(s).

    When selection is set to single, it returns a single Date object. Otherwise it is an array of Date objects.

    Returns Date | Date[]

  • set value(value): void

  • Sets the selected date(s).

    When selection is set to single, it accepts a single Date object. Otherwise it is an array of Date objects.

    Parameters

    • value: string | Date | Date[]

    Returns void

viewDate

weekStart

Methods

deselectDate

ngAfterViewInit

selectDate

suppressBlur