Class HyloCalendar

Renders a calender component.

Each field text is wrapped with a "span" tag marked with class "hylo-calendar-inner". The classes of the fields are:

  • .hylo-calendar-back
  • .hylo-calendar-title
  • .hylo-calendar-next
  • .hylo-calendar-day
  • .hylo-calendar-date
  • .hylo-calendar-month
  • .hylo-calendar-year

The header fields itself are positioned in areas with the following classes:

  • .hylo-calendar-back-wrapper
  • .hylo-calendar-title-wrapper
  • .hylo-calendar-next-wrapper

Properties

announcementActiveMenu announcementDelay announcementInitial announcementMonth announcementTo announcementYear announcementYearsGroup available backClass backInnerClass backWrapperClass dateClass dateInnerClass dayClass dayInnerClass disableTab endDate labelInactive labelNextMonth labelNextYear labelNextYears labelPreviousMonth labelPreviousYear labelPreviousYears labelSelected labelSwitchChooseYear labelSwitchToMonths labelSwitchToYears locales max min month monthClass monthInnerClass nextClass nextInnerClass nextWrapperClass range startDate titleClass titleInnerClass titleWrapperClass translations unselectable year yearClass yearInnerClass yearsTitle

Methods

announceDate setDate switchView

Events

hyloCalendarNavigate hyloDateSelected hyloDateUnselected

Properties

announcementActiveMenu

announcementActiveMenu: string = 'Aktives Auswahlmenü'

The front text of the active menu announcement. The second part explains which month, year or yearsgroup is active.

announcementDelay

announcementDelay: number = 500

The delay of the announcement in millisecond.

announcementInitial

announcementInitial: string = 'Wähle ein Datum'

If the component gets focused, this announcement, the currently selected date and the current active menu is announced in a screen reader.

If empty, only the current active menu is announced.

announcementMonth

announcementMonth: string = 'Monat'

The text "month". Used for the active menu announcement.

announcementTo

announcementTo: string = 'bis'

The text "to". Used for the active menu announcement of a years group to separate the first and last year.

announcementYear

announcementYear: string = 'Jahr'

The text "year". Used for the active menu announcement.

announcementYearsGroup

announcementYearsGroup: string = 'Jahresgruppe'

The text "years group". Used for the active menu announcement.

available

available: string[]

A list of available dates to select.

backClass

backClass: string = ''

Classes added to the field.

backInnerClass

backInnerClass: string = ''

Classes added to the inner field.

backWrapperClass

backWrapperClass: string = ''

Classes added to the wrapper field.

dateClass

dateClass: string = ''

Classes added to the field.

dateInnerClass

dateInnerClass: string = ''

Classes added to the inner field.

dayClass

dayClass: string = ''

Classes added to the field.

dayInnerClass

dayInnerClass: string = ''

Classes added to the inner field.

disableTab

disableTab: boolean

Disables keyboard tab selection.

endDate

endDate: string

The selected end date to (Y-m-d).

labelInactive

labelInactive: string = 'Inaktiv'

Text added to labels of buttons which are inactive.

labelNextMonth

labelNextMonth: string = 'Zum nächsten Monat wechseln'

Label for next month button.

labelNextYear

labelNextYear: string = 'Zum nächsten Jahr wechseln'

Label for next year button.

labelNextYears

labelNextYears: string = 'Zur nächsten Jahresgruppe wechseln'

Label for next years button.

labelPreviousMonth

labelPreviousMonth: string = 'Zum vorherigen Monat wechseln'

Label for previous month button.

labelPreviousYear

labelPreviousYear: string = 'Zum vorherigen Jahr wechseln'

Label for previous year button.

labelPreviousYears

labelPreviousYears: string = 'Zur vorherigen Jahresgruppe wechseln'

Label for previous years button.

labelSelected

labelSelected: string = 'Ausgewählt'

Text added to labels to indicate a selected field.

labelSwitchChooseYear

labelSwitchChooseYear: string = 'Wähle ein Jahr in der nach folgenden Auswahl'

Label for switch button in years view. The button is disabled in this view.

labelSwitchToMonths

labelSwitchToMonths: string = 'Zur Monatsauswahl wechseln oder wähle einen Tag in der nach folgenden Auswahl'

Label for switch to month overview button.

labelSwitchToYears

labelSwitchToYears: string = 'Zur Jahresauswahl wechseln oder wähle einen Monat in der nach folgenden Auswahl'

Label for switch to years overview button.

locales

locales: string

Language locale to use for calendar.

max

max: string

The maximum date that can be selected in Y-m-d format.

min

min: string

The minimum date that can be selected in Y-m-d format.

month

month: string | number

The month to set the calendar display to.

If set as number, the count starts at 0 (January -> 0). If set as string, the count starts at 1 (January -> 1).

monthClass

monthClass: string = ''

Classes added to the field.

monthInnerClass

monthInnerClass: string = ''

Classes added to the inner field.

nextClass

nextClass: string = ''

Classes added to the field.

nextInnerClass

nextInnerClass: string = ''

Classes added to the inner field.

nextWrapperClass

nextWrapperClass: string = ''

Classes added to the wrapper field.

range

range: boolean

Should the calendar be used to select a date range.

startDate

startDate: string = ''

The selected start date (Y-m-d).

titleClass

titleClass: string = ''

Classes added to the field.

titleInnerClass

titleInnerClass: string = ''

Classes added to the inner field.

titleWrapperClass

titleWrapperClass: string = ''

Classes added to the wrapper field.

translations

translations: {
    [key: string]: string;
} = null

An object of translation strings which map all the text translation attributes of the component. Can be used to set the translations in a bulk. Not all translation attributes need to be defined. Set only the ones you want to translate. If not set, it falls back to the default which is the actual translation attribute.

If not set and a page-root component is present, it sets this value to the translations object of the page-root.

Type declaration

  • [key: string]: string

unselectable

unselectable: boolean

Makes it possible to unselect a selected date.

year

year: string | number

The year to set the calendar display to.

yearClass

yearClass: string = ''

Classes added to the field.

yearInnerClass

yearInnerClass: string = ''

Classes added to the inner field.

yearsTitle

yearsTitle: string = ...

The title to use when showing the year selection view.

Methods

announceDate

  • announceDate(view?): Promise<void>

  • Announces the currently selected date in a screen reader.

    @Prop() view additional, announces the current view

    Parameters

    • view: boolean = false

    Returns Promise<void>

setDate

  • setDate(dateString, silent?): Promise<void>

  • Set the current date of the calendar

    If "silent" is set, you can only unselect a date by providing an empty "dateString", not the current selected date.

    Parameters

    • dateString: string

      The date in YYYY-MM-DD format to set the calendar to

    • silent: boolean = false

      If set, no event is fired.

    Returns Promise<void>

switchView

  • switchView(event, view, internal?): Promise<"calendar" | "months" | "years">

  • Switch the view of the calendar.

    Parameters

    • event: any

      The click event from the element being used

    • view: "calendar" | "months" | "years"

      The view to switch to

    • internal: boolean = false

    Returns Promise<"calendar" | "months" | "years">

Events

hyloCalendarNavigate

hyloCalendarNavigate: EventEmitter<{
    back: boolean;
    currentView: "calendar" | "months" | "years";
    endDate?: string;
    event: any;
    month: number;
    startDate: string;
    year: number;
}>

Emitted when controls are used to navigate.

Type declaration

  • back: boolean

    Was the user navigating backwards.

  • currentView: "calendar" | "months" | "years"

    The current view being used.

  • Optional endDate?: string

    The current end date selected (If selecting range only).

  • event: any

    The click event from the element selected.

  • month: number

    The month number of the selection.

  • startDate: string

    The current start date selected.

  • year: number

    The year number of the selection.

hyloDateSelected

hyloDateSelected: EventEmitter<{
    dateString: string;
    day: number;
    endDate?: string;
    month: number;
    startDate: string;
    year: number;
}>

Emitted when a date is selected.

Type declaration

  • dateString: string

    The date string of the selected date in Y-m-d format.

  • day: number

    The day number of the selection.

  • Optional endDate?: string

    The current end date selected (If selecting range only).

  • month: number

    The month number of the selection.

  • startDate: string

    The current start date selected.

  • year: number

    The year number of the selection.

hyloDateUnselected

hyloDateUnselected: EventEmitter<{
    dateString: string;
    day: number;
    month: number;
    year: number;
}>

Date got unselected.

Type declaration

  • dateString: string

    The date string of the unselected date in Y-m-d format.

  • day: number

    The day number of the deselection.

  • month: number

    The month number of the deselection.

  • year: number

    The year number of the deselection.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc