View on GitHub

Calendar

The calendar component is a versatile way of displaying the events.

On this page

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
  },
  {
    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.

const element = document.getElementById('calendar')

element.addEventListener('initialized.of.calendar', () => {
  // do something
})

CSS

Variables

src/scss/_calendar.scss

--#{$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

src/scss/_variables.scss

$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>");

src/scss/_variables-dark.scss

$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);