Calendar
The calendar component is a versatile way of displaying the events.
Usage
The calendar component can be implemented with HTML markup and attribute configurations.
You can display any content in the popover. However, it is highly recommended to use the popover content markup.
The component uses the FullCalendar library behind the scenes.
Examples
Full layout
<div class="calendar" data-of-calendar='{
"events": [
{
"title": "All day event",
"content": "<div class=\"popover-event\">…</div>",
"start": "YYYY-MM-DD",
"allDay": true
},
{
"title": "Multiple days event",
"content": "<div class=\"popover-content\">…</div>",
"start": "YYYY-MM-DD",
"end": "YYYY-MM-DD",
"allDay": true
},
{
"title": "Exact time event",
"content": "<div class=\"popover-content\">…</div>",
"start": "YYYY-MM-DD\Thh:mm:ss",
"end": "YYYY-MM-DD\Thh:mm:ss",
"allDay": false
}
]
}'></div>Mini layout
- Event date
- Free date
<div class="calendar" data-of-calendar='{
"layout": "mini",
"title": "Custom title",
"events": […]
}'></div>Options
You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):
| Option | Type | Default | Explanation |
|---|---|---|---|
events |
array |
[] |
The events to be displayed. See the data structure below. |
eventsFeedUrl |
string|undefined |
undefined |
The URL to fetch the events feed data from. The appended parameters are defined under eventsFeedUrlStartParam and eventsFeedUrlEndParam. The endpoint must return an event list in JSON format. |
eventsFeedUrlStartParam |
string |
calendar_start |
The start date parameter name that will be used in the AJAX request. |
eventsFeedUrlEndParam |
string |
calendar_end |
The end date parameter name that will be used in the AJAX request. |
layout |
string |
'full' |
The layout to be used. See the examples above. Available options: full, mini. |
miniMonthMinWidth |
number |
300 |
The minimum width for one month in pixels. Applies only if the layout is set to mini. |
title |
string|undefined |
undefined |
A custom title that will be display on top of the calendar. |
viewToggler |
boolean |
true |
Option to display or hide the calendar view selector. Applies only if the layout is set to full. |
Event data structure
The calendar accepts events as data source. The only required parameters are the title and the start of the event.
The start and end must be provided in the YYYY-MM-DD date format, or if they also contain the time, in YYYY-MM-DD\Thh:mm:ss format.
const events = [
{
title: 'All day event',
content: '<div class="popover-content">…</div>',
start: '2010-01-01',
allDay: true,
display: 'list-item', // available options: auto, block, list-item, background, inverse-background, none
location: 'New York', // optional, visible only in list month view
subtitle: 'Great party at Times Square', // optional, visible only in list month view
teaser: '<p>At times, a square becomes the stage for a truly great gathering — vibrant, spontaneous, and full of shared energy. Whether it’s music, laughter, or simple conversation, these moments transform the space into something more than geometry: a celebration of community.</p>', // optional, visible only in list month view
},
{
title: 'Multiple days event',
contentUrl: 'https://domain.tld/_ajax/multiple_days_event', // fetch content via AJAX
start: '2013-01-05',
end: '2010-01-07',
allDay: true,
},
{
title: 'Event at specific time',
content: '<div class="popover-content">…</div>',
start: '2010-01-09T12:30:00',
allDay: false,
}
];
Events
| Event | Description |
|---|---|
initialized.of.calendar |
This event is fired immediately when the calendar is ready. |
before_popover_open.of.calendar |
This event is fired right before the popover is opened. It allows for the popover content manipulation. |
const element = document.getElementById('calendar')
element.addEventListener('initialized.of.calendar', () => {
// do something
})
CSS
Variables
--#{$prefix}calendar-border-color: #{$calendar-border-color};
--#{$prefix}calendar-border-width: #{$calendar-border-width};
--#{$prefix}calendar-day-other-bg-color: #{$calendar-day-other-bg-color};
--#{$prefix}calendar-day-other-color: #{$calendar-day-other-color};
--#{$prefix}calendar-event-bg-color: #{$calendar-event-bg-color};
--#{$prefix}calendar-event-border-color: #{$calendar-event-border-color};
--#{$prefix}calendar-list-event-hover-bg-color: #{$calendar-list-event-hover-bg-color};
--#{$prefix}calendar-table-color: #{$calendar-table-color};
--#{$prefix}calendar-table-bg: #{$calendar-table-bg};
--#{$prefix}calendar-table-cell-shaded: #{$calendar-table-cell-shaded};
--#{$prefix}calendar-today-bg-color: #{$calendar-today-bg-color};
--#{$prefix}calendar-mini-event-bg-color: #{$calendar-mini-event-bg-color};
--#{$prefix}calendar-mini-event-color: #{$calendar-mini-event-color};
--#{$prefix}calendar-legend-gap: #{$calendar-legend-gap};
--#{$prefix}calendar-legend-font-size: #{$calendar-legend-font-size};
--#{$prefix}calendar-legend-symbol-size: #{$calendar-legend-symbol-size};
--#{$prefix}calendar-legend-symbol-padding: #{$calendar-legend-symbol-padding};
--#{$prefix}calendar-legend-symbol-border-width: #{$calendar-legend-symbol-border-width};
--#{$prefix}calendar-legend-symbol-border-color: #{$calendar-legend-symbol-border-color};
--#{$prefix}calendar-legend-symbol-gap: #{$calendar-legend-symbol-gap};
--#{$prefix}calendar-legend-event-color: #{$calendar-legend-event-color};
--#{$prefix}calendar-legend-free-color: #{$calendar-legend-free-color};Sass variables
$calendar-border-color: var(--#{$prefix}border-color-translucent);
$calendar-border-width: var(--#{$prefix}border-width);
$calendar-day-other-bg-color: rgba(0, 0, 0, .05);
$calendar-day-other-color: var(--#{$prefix}gray-500);
$calendar-event-bg-color: var(--#{$prefix}primary);
$calendar-event-border-color: var(--#{$prefix}primary);
$calendar-list-event-hover-bg-color: var(--#{$prefix}gray-100);
$calendar-table-color: var(--#{$prefix}body-color);
$calendar-table-bg: var(--#{$prefix}body-bg);
$calendar-table-cell-shaded: var(--#{$prefix}gray-200);
$calendar-today-bg-color: var(--#{$prefix}warning-bg-subtle);
$calendar-mini-event-bg-color: var(--#{$prefix}primary);
$calendar-mini-event-color: $white;
$calendar-legend-gap: 1rem;
$calendar-legend-font-size: .9rem;
$calendar-legend-symbol-gap: .5em;
$calendar-legend-symbol-size: 1.25em;
$calendar-legend-symbol-padding: .25rem;
$calendar-legend-symbol-border-width: var(--#{$prefix}border-width);
$calendar-legend-symbol-border-color: var(--#{$prefix}border-color);
$calendar-legend-event-color: var(--#{$prefix}calendar-mini-event-bg-color);
$calendar-legend-free-color: transparent;
$calendar-icon-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/></svg>");
$calendar-icon-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/></svg>");
$calendar-icon-prev-year: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/></svg>");
$calendar-icon-next-year: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/></svg>");
$calendar-icon-grid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/><path d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/></svg>");
$calendar-icon-list: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/></svg>");
$calendar-today-bg-color-dark: rgba(255, 255, 255, .05);
$calendar-table-cell-shaded-dark: none;
$calendar-list-event-hover-bg-color-dark: rgba(255, 255, 255, .05);