Calendar Views Specification

Contents

1. Overview
2. Years View
3. Months View
4. Days View

Owned by

Team: Codex

Developer: Diyan Dimitrov

Designer Name

Requires approval from

• Peer Developer Name | Date:
• Design Manager: Stefan Ivanov | Date:

Signed off by

• Product Owner: Radoslav Mirchev | Date:
• Platform Architect: Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Diyan Dimitrov	05-Aug-2021	Initial version

1. Overview

Calendar views should provide means for instantiating each available view of the igc-calendar component independently from each other. Each view (years, months, days) supports:

• display of years/months/days;
• selection;
• localization;
• formatting;
• keyboard navigation;

2. Years View

User Stories

Developer stories:

• Story 1: As a developer I want to be able to instantiate an years view as a separate component.

<igc-years-view></igc-years-view>

• Story 2: As a developer, I want to specify the number of visible years.
• Story 3: As a developer, I want to be notified when an year is selected.

End-user stories:

• Story 1: As an end user, I want to be able to pick an year via mouse click.
• Story 2: As an end user, I want to be able to navigate to next/previous years and pick an year with the keyboard.

Functionality

End-User Experience

Developer Experience

Instantiate the years view as a separate component.

<igc-years-view years-per-page="18">
</igc-years-view>

API

Properties

Name	Description	Type	Default value	Reflected
value	Gets/sets the selected date. Default is the current date.	Date	new Date()	false
yearsPerPage	Gets/sets the number of visible years.	numeric | 2-digit	numeric	false

Events

Name	Description	Cancelable	Parameters
igcChange	Emitted when the value changes.	false

3. Months View

User Stories

Developer stories:

• Story 1: As a developer, I want to be able to instantiate a months view as a separate component.

<igc-months-view></igc-months-view>

• Story 2: As a developer, I want to be able to apply formatting on the igc-months-view component.
• Story 3: As a developer, I want to be able to control the locale for the igc-months-view component.
• Story 4: As a developer, I want to be notified when an year is selected.

End-user stories:

• Story 1: As an end user, I want to be able to pick a month via mouse click.
• Story 2: As an end user, I want to be able to navigate through the months and pick a month with the keyboard.
• Story 3: As an end user, I want to have the months displayed in different formatting and locale.

Functionality

End-User Experience

Developer Experience

Instantiate the months view as a separate component.

<igc-months-view locale="fr"
                 month-format="2-digit">
</igc-months-view>

API

Properties

Name	Description	Type	Default value	Reflected
value	Gets/sets the selected date. Default is the current date.	Date	new Date()	false
monthFormat	Gets/sets the month format option of the months view.	numeric | 2-digit | long | short | narrow	short	false
locale	Gets/sets the locale of the months view.	string	en	false

Events

Name	Description	Cancelable	Parameters
igcChange	Emitted when the value changes.	false

4. Days View

User Stories

Developer stories:

• Story 1: As a developer, I want to be able to instantiate a days view as a separate component.

<igc-days-view></igc-days-view>

• Story 4: As a developer, I want to be able to apply formatting on the igc-days-view component.
• Story 5: As a developer, I want to be able to control the locale for the igc-days-view component.
• Story 6: As a developer, I want to be able to implement custom logic when a day is selected.
• Story 7: As a developer, I want to be notified when an year is selected.
• Story 8: As a developer, I want to be able to define the starting day of the week: Sun or Mon.
• Story 9: As a developer, I want to be able to define the type of selection (single, multi, range).
• Story 10: As a developer, I want to mark certain days or a range of days as disabled.
• Story 11: As a developer, I want to mark certain days or a range of days as special.

End-user stories:

• Story 1: As an end user, I want to be able to navigate through the days and pick a date with the keyboard.
• Story 2: As an end user, I want to have the view displayed in different formatting and locale.
• Story 3: As an end user, I want to have a visual clue that certain days are disabled or special.
• Story 4: As an end user, I want to be able to select a single day within the view.
• Story 5: As an end user, I want to be able to select multiple days within the view.
• Story 6: As an end user, I want to be able to select a range of days within the view.

Functionality

End-User Experience

Developer Experience Instantiate the days view as a separate component.

<igc-days-view selection="range">
</igc-days-view>

API

Properties

Name	Description	Type	Default value	Reflected
weekStart	Sets which day the week will start.	sunday | monday | tuesday | wednesday | thursday | friday | saturday	sunday	false
locale	Sets the locale used for formatting and displaying the dates.	string	en	false
selection	Sets the type of selection.	single | multi | range	single	false
viewDate	Sets the year/month that will be presented in the default. By default it is the first day in the current year/month.	Date		false
value	Gets/sets the current value. When selection is set to single, it accepts a single Date object. Otherwise it is an array of Date objects.	Date | Date[]	undefined	false
weekDayFormat	Controls the week day format.	long | short | narrow	narrow	false
hideOutsideDays	Controls the visibility of the dates that do not belong to the current month.	boolean	false	false
showWeekNumbers	Show/hide the week numbers.	boolean	false	false
disabledDates	Gets/sets the disabled dates descriptors.	DateRangeDescriptor[]	undefined	false
specialDates	Gets/sets the special dates descriptors.	DateRangeDescriptor[]	undefined	false

Events

Name	Description	Cancelable	Parameters
igcChange	Emitted when the value changes.	false
igcOutsideDaySelected	Emitted when a date from previous/next month is selected.	false