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.
`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
  },
  {
    title: 'Multiple days event',
    content: '<div class="popover-content">…</div>',
    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;

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