Calendar

A calendar provides a system for organizing days in order to display events and activities occurring on a particular day.

Coming soon...

Please enjoy a cat while you wait

A calendar provides a system for organizing days in order to display events and activities occurring on a particular day.

Coming soon...

Please enjoy a cat while you wait

A calendar provides a system for organizing days in order to display events and activities occurring on a particular day.

Examples

For details on when to use this component, please see the Usage tab.

<!-- In the widget view, the rest of the component will be dynamically generated -->
<div class="iris-calendar"></div>

<!-- In the widget scripts section -->
<script type="text/javascript">
    Alkami.Iris.CalendarComponent.init(document.querySelector('.iris-calendar'));
</script>

Subheader

Optionally you can add a subheader to the calendar with custom content that is useful to your users.

July 2018

Custom Subheader
<!-- Just add a subheader element into the calendar wrapper -->
<div class="iris-calendar">
    <div class="iris-calendar__sub-header">
        Custom Subheader
    </div>
</div>

<!-- And initialize the calendar the same way as above -->
<script type="text/javascript">
    Alkami.Iris.CalendarComponent.init(document.querySelector('.iris-calendar'));
</script>

Day

The day has its own states and decorators if the day is in the past, outside the valid date range, or is the current day:

Additionally, depending on the event data passed in for a given day, the element will be rendered slightly differently.

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • If the UI changes when a user selects a day and the new content is meant to be focused on (e.g. loading payments associated with that particular day), make sure to manually focus the content area using the element.focus() method.

Additionally, these are some things that we have taken care of for you:

  • Setting aria-hidden="true" on the days of the week
  • Adding sr-only text on every day that reads the full date for screen readers

API

Usage

<!-- In the widget view -->
<div class="iris-calendar">
</div>

<!-- In the widget scripts section -->
<script type="text/javascript">
    Alkami.Iris.CalendarComponent.init(document.querySelector('.iris-calendar'));
</script>

Events

const calendarElement = document.getElementById('iris_calendar');

// Listen for a day to be selected
calendarElement.addEventListener('iris.calendar.day.selected', (event) => {
    event.detail.component; // => Calendar component instance
    event.detail.selectedDay; // => Selected day child instance
    event.detail.event; // => Event object associated with the selected day
});

// Listen for the previous month button to be clicked
calendarElement.addEventListener('iris.calendar.previous.month', (event) => {
    event.detail.component; // => Calendar component instance
    event.detail.currentMonth; // => Current month (e.g. 6)
    event.detail.currentYear; // => Current year (e.g. 2025)
});

// Listen for the next month button to be clicked
calendarElement.addEventListener('iris.calendar.next.month', (event) => {
    event.detail.component; // => Calendar component instance
    event.detail.currentMonth; // => Current month (e.g. 5)
    event.detail.currentYear; // => Current year (e.g. 2032)
});

// Listen for a regeneration event to be fired
// This happens when the month or date changes, and when additional events are added or updated in the current month
calendarElement.addEventListener('iris.calendar.generate.start', (event) => {
    event.detail.component; // => Calendar component instance
});

calendarElement.addEventListener('iris.calendar.generate.end', (event) => {
    event.detail.component; // => Calendar component instance
});
Name Description
iris.calendar.day.selected Fires when a calendar day is selected.
iris.calendar.previous.month Fires when the previous month button is clicked to travel backwards.
iris.calendar.next.month Fires when the next month button is clicked to travel forwards.
iris.calendar.generate.start Fires when the calendar starts to regenerate before anything has happened.
iris.calendar.generate.end Fires when the calendar finishes the regeneration after all elements have been replaced.

Constructors

CalendarComponent(element, options)

  • element - The iris-calendar Element.
  • options - Options passed to the Calendar.
// Example options object to pass to the init constructor
const options = {
    startDateLimit: '2018-5-1', // Defaults to infinity
    endDateLimit: '2018-9-1', // Defaults to infinity
    defaultAvatarIconClass: "font-icon-business",
    calendarEvents: [
        {
            eventDate: '2018-7-26',
            eventLabel: "4 payments due",
            avatarIconClass: "font-icon-bill-pay", // Overrides the defaultAvatarIconClass
            avatarIconQuantity: 3
        }
    ]
};
Options Description
calendarEvents Array[] of objects of type CalendarEvents (see table below for more information).
endDateLimit Expects a Date or a String to set up the travel time moving forward (e.g. '2018-5-1').
startDateLimit Expects a Date or a String to set up the travel time going backwards (e.g. '2018-9-1').
CalendarEvents Description
eventDate Expects a Date or String to set up an event happening that day (e.g. '2018-7-26').
eventLabel Expects a String that would be a description of the event that is happening ('e.g. '1 payment due').
avatarIconClass Expects a String for the avatar icon class (e.g. 'font-icon-bill-pay').
avatarIconQuantity Expects a Number for the amount of Avatar Icons to display. (NOTE: Max amount of stacked avatars that would display is 3).

Variables

The variables used for Calendar are as follows:

// Width variables
$calendar-width: 100% !default;
$calendar-day-name-width: calc(100% / 7) !default;
$calendar-days-spacer: calc(100% / 7) !default;

// Font variables
$calendar-day-name-font-size: 1.2rem !default;
$calendar-day-name-text-color: $dove-gray !default;
$calendar-prev-next-arrow-color: $dove-gray !default;
$calendar-header-text-color: $mine-shaft !default;

// Border variables
$calendar-border-bottom-color: $alto !default;

// Misc. varibles
$calendar-day-name-margin-bottom: 1.8rem !default;

The variables used for Calendar Day are as follows:

// Margin variables
$day-margin-bottom: 1.6rem !default;
$day-margin-left: 0.7rem !default;
$day-event-margin-top: 5px !default;

// Width variables
$calendar-days-width: calc(100% / 7) !default;

// Text variables
$day-font-size: 1.8rem !default;
$day-text-color: $mine-shaft !default;
$day-text-color-past: $dove-gray !default;
$day-text-color-today: $mine-shaft !default;
$day-font-weight-today: 700 !default;
$day-event-label-text-color: $dove-gray !default;

// Misc. variables
$day-container-background: $white !default;
$day-container-hover-background: $wild-sand !default;
$day-container-border-color: $alto !default;
$day-event-size: 5px !default;
$day-avatar-dimension: 2.6rem !default;

Themeability

The selected state of the day and the Avatar icons are themeable using the _calendar.scss theme overides file. The variables accessible in that file are as follows:

// Background variables
$day-ripple-background-color: $primary-color !default;

// Border variables
$day-selected-border-color: $primary-color !default;

// Text variables
$day-selected-event-label-text: $white !default;
$day-selected-text: $white !default;