Calendar

Coming soon...

Please enjoy a cat while you wait

Coming soon...

Please enjoy a cat while you wait

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.

<!-- 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
});

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
        }
    ]
};

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;