Full Calendar
Full-sized, drag and drop event calendar in JavaScript.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                fullcalendar: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div id="calendar"></div>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar(calendarEl, {
    plugins: [DayGrid]
  });

  calendar.render();
});
Dlex eCommerce User Interface Updates Sent
Type Email
Audience Dlex subscribers
Sent Tue, September 5th at 4:22 PM cairo
1920 Sends
73.9% Opens
64.3% Clicks
Customize variables at:/library/extend/components/_fullcalendar.scss
Component's defaults:/library/components/fullcalendar/_defaults.scss
NameDefault valueNote
$calendar-border-radius8px;
$calendar-border-colordivider;
$calendar-navbar-colormain-text-color;
$calendar-navbar-padding-x20px;
$calendar-navbar-padding-y20px;
$calendar-navbar-btn-bgtransparent;
$calendar-navbar-btn-colormain-text-color;
$calendar-navbar-btn-border-colorsecondary-t-16;
$calendar-navbar-btn-border-radius4px;
$calendar-navbar-btn-hover-bgsecondary-t-04;
$calendar-navbar-btn-hover-colormain-text-color;
$calendar-navbar-btn-hover-border-colorsecondary-t-16;
$calendar-navbar-btn-active-bgsecondary-t-08;
$calendar-navbar-btn-active-colormain-text-color;
$calendar-navbar-btn-active-border-colorsecondary-t-16;
$calendar-head-colortext-muted;
$calendar-day-colormain-text-color;
$calendar-pastday-bgtransparent;
$calendar-day-today-bgwarning-t-08;
$calendar-day-selected-bgprimary-t-08;
$calendar-event-bgui-base-color-2;
$calendar-event-border-colorui-base-color-3;
$calendar-event-colormain-text-color;
$calendar-events-list-item-head-bgui-base-color-2;
$calendar-events-list-item-head-text-colormain-text-color;
$calendar-events-list-item-hover-bgdark-t-04;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}