Skip to content

Calendar Views Specification

Jump to bottom
Stefan Ivanov edited this page Nov 2, 2021 · 3 revisions

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
Clone this wiki locally