Calendar componentAvailable since EcoComposer 2.2

Classical calendar example :

The defaults values are :

'calendar--actual-week--background-color' : 'calendar--actual-week--background-color',
'calendar--actual-week--background-image' : 'calendar--actual-week--background-image',
'calendar--actual-week--color' : 'calendar--actual-week--color',
'calendar--background--color' : 'calendar--background--color',
'calendar--background--lines-color' : 'calendar--background--lines-color',
'calendar--days--headers--background-color' : 'calendar--days--headers--background-color',
'calendar--days--headers--background-color--hover' : 'calendar--days--headers--background-color--hover',
'calendar--days--headers--color' : 'calendar--days--headers--color',
'calendar--days--today--background-color' : 'calendar--days--today--background-color',
'calendar--days--today-hour--background-color' : 'calendar--days--today-hour--background-color',
'calendar--event--border' : 'calendar--event--border',
'calendar--event--color' : 'calendar--event--color',
'calendar--event--drag-hover-error--box-shadow' : 'calendar--event--drag-hover-error--box-shadow',
'calendar--event--drag-hover--box-shadow' : 'calendar--event--drag-hover--box-shadow',
'calendar--sidebar--today-date--color' : 'calendar--sidebar--today-date--color',
'calendar--timeline--background-color' : 'calendar--timeline--background-color',
'calendar--timeline--color' : 'calendar--timeline--color',
'day--background-type' : 'linear', // 'linear', 'radial' or 'no'
'days-header--font-size' : 2rem * theming.$font-size,
'days-header--height' : 4rem * theming.$font-size,
'event--background-type' : 'linear', // 'linear', 'radial' or 'no'
'events' : (
  'first' : #fdd,
  'second' : #ffa,
  'third' : #eff,
  'fourth' : #dfe
),
'font-family' : theming.$font-family,
'gap-day' : .1rem * theming.$font-size,
'gap-hour' : 1rem * theming.$font-size,
'gap-date-between-number-and-string' : 1rem * theming.$font-size,
'num-days' : 5,
'num-hours' : 10,
'print' : false,
'sidebar-width' : 17rem * theming.$font-size,
'suffix' : '',
'themes' :  (
  'light' : (
    'default--calendar--actual-week--background-color' : #00ffb2,
    'default--calendar--actual-week--background-image' : utils.fn-linear-gradient(45, #00ffb2),
    'default--calendar--actual-week--color' : #fff,
    'default--calendar--background--color' : #f2f2f2,
    'default--calendar--background--lines-color' : #ddd,
    'default--calendar--days--headers--background-color' : #eee,
    'default--calendar--days--headers--background-color--hover' : #ddd,
    'default--calendar--days--headers--color' : #333,
    'default--calendar--days--today--background-color' : #00ffb2,
    'default--calendar--days--today-hour--background-color' : #f55,
    'default--calendar--event--border' : 1px solid #f2d3d8,
    'default--calendar--event--color' : #444,
    'default--calendar--event--drag-hover-error--box-shadow': 0 0 .8rem * theming.$font-size .1rem * theming.$font-size #f44,
    'default--calendar--event--drag-hover--box-shadow': 0 0 .5rem * theming.$font-size #333,
    'default--calendar--sidebar--today-date--color' : #eee,
    'default--calendar--timeline--background-color' : #eee,
    'default--calendar--timeline--color' : #444
  ),
  'dark' : (
    'default--calendar--actual-week--background-color' : #00ffb2,
    'default--calendar--actual-week--background-image' : utils.fn-linear-gradient(45, #00ffb2),
    'default--calendar--actual-week--color' : #fff,
    'default--calendar--background--color' : #333, // main background under cells
    'default--calendar--background--lines-color' : #555, // horizontal lines
    'default--calendar--days--headers--background-color' : #444, // day headers
    'default--calendar--days--headers--background-color--hover' : #555, // days headers hover background color
    'default--calendar--days--headers--color' : #ccc, // days headers text color
    'default--calendar--days--today--background-color' : #0a7, // today header background color
    'default--calendar--days--today-hour--background-color' : #f55, // today hour line background color
    'default--calendar--event--border' : 1px solid #555, // border around cells
    'default--calendar--event--color' : #444, // event cell text color
    'default--calendar--event--drag-hover-error--box-shadow': 0 0 .8rem * theming.$font-size .1rem * theming.$font-size #f44, // event dragged on wrong area, added border
    'default--calendar--event--drag-hover--box-shadow': 0 0 .5rem * theming.$font-size #333, // event dragged, hovering a day, drop shadow
    'default--calendar--sidebar--today-date--color' : #eee,
    'default--calendar--timeline--background-color' : #444, // timeline headers
    'default--calendar--timeline--color' : #fff // timeline text color
  )
),
'time-height' : 6rem * theming.$font-size,
'timeline-width' : 6rem * theming.$font-size,
'week-height' : 12rem * theming.$font-size

We can implement it that way :

@include calendar.init();
@include calendar.create();
@include calendar.create(
  (
    'suffix' : '-2',
    'num-hours' : 9,
  )
);

We can implement it that way :

Beware there is only the code of the day view here.

code style="color: #000000"><?php const MINUTES_IN_AN_HOUR = 60, DAYS_HEADER_HEIGHT = '4', TIME_HEIGHT = 6; ?><div class="calendar-component"> <script nonce="yourGeneratedNonce"> window.calendarContainers = {}; // put your calendar containers JSON data here window.calendarEvents = {}; // put your calendar events JSON data here </script> <style nonce="yourGeneratedNonce">code style="color: #000000"><?php $colors = '@supports (accent-color: #000) {'; foreach ($calendarContainers[$displayedCalendarContainerId] as $calendarId => $calendar) { ?><?= $calendarId ?><?= $calendarId ?> opacity : 0; }code style="color: #000000"><?php ob_start(); ?><?= $calendarId ?> accent-color: code style="color: #000000"><?= $calendar['color'] ?>code style="color: #000000"> <?php $colors .= ob_get_clean(); } echo $colors . '}'; for ($dayToStyleIndex = 0; $dayToStyleIndex < 5; ++$dayToStyleIndex) { ?><?= $dayToStyleIndex ?> display: block; }code style="color: #000000"> <?php } ?>cal--date-header:target ~ div { display : none; } </style> <p class="cal cal--sidebar--today-date">code style="color: #000000"><?= $todayDate->format('F Y')?></p> <div class="cal--sidebar"> <button type="button" class="cal ripple--cal--previous -cal--previous" title="Previous week"><</button><!-- --> <button type="button" class="cal ripple--cal--change-date -cal--change-date" title="Change the displayed week" data-day-number="code style="color: #000000"><?= $todayDateString ?>data-day-name="code style="color: #000000"><?= $todayDate->format('D') ?>data-week="code style="color: #000000"><?= $week ?>data-month-number="code style="color: #000000"><?= $todayDate->format('m') ?>data-year="code style="color: #000000"><?= $todayDate->format('Y') ?><?= $week ?></button><!-- --><button type="button" class="cal ripple--cal--next -cal--next" title="Next week">></button> </div>code style="color: #000000"><?php const OPTION_WEEK_KEY = 1, OPTIONS_LABELS = ['Day', 'Week', 'Month', 'Year']; ?><div class="cal--select select select-container"> <button type="button" role="menu" class="cal--select-value select select-value" aria-labelledby="select-value--label"> <span id="select-value--label" class="select select-value--label cal--select-value--label">code style="color: #000000"><?= OPTIONS_LABELS[OPTION_WEEK_KEY] ?></span> <span>&#x25bc;&#xfe0e;</span> </button> <div class="cal--select-container select select-list select-container">code style="color: #000000"><?php foreach (OPTIONS_LABELS as $optionKey => $option) { $lcFirstOption = lcfirst($option); ?> type=radio role="menuitem" id="chk-code style="color: #000000"><?= $lcFirstOption ?>name="calendar--change-view" class="select select-item--activator" value="code style="color: #000000"><?= $option ?><?php if ($optionKey === OPTION_WEEK_KEY) echo ' checked'; ?>for="chk-code style="color: #000000"><?= $lcFirstOption ?>class="select select-item--label -calendar--change-view">code style="color: #000000"><?= $option ?></label>code style="color: #000000"><?php } ?></div> </div>code style="color: #000000"><?php foreach ($calendarContainers[$displayedCalendarContainerId] as $calendarId => $calendar) { ?>for="cal-check-code style="color: #000000"><?= $calendarId ?>class="cal-check" title="Toggle the display of events related to 'code style="color: #000000"><?= $calendar['name'] ?><?= $calendar['name'] ?></label> <input type="checkbox" id="cal-check-code style="color: #000000"><?= $calendarId ?>title="Toggle the display of events related to 'code style="color: #000000"><?= $calendar['name'] ?> <?php } ?> class="cal cal-container" data-calendar-container-id="code style="color: #000000"><?= $displayedCalendarContainerId ?><div class="cal calendar"> <div class="cal cal--timeline"> <div class="cal cal--timeline--spacer">code style="color: #000000"><?php $offset = (new DateTimeZone(date_default_timezone_get()))->getOffset($todayDate) / 3600; echo 'GMT'; if ($offset >= 0) echo '+'; echo $offset; ?></div> <div class="cal cal--timeline--hours">code style="color: #000000"> <?php for ($hour = $startHour; $hour < $endHour; ++$hour) { ?><div>code style="color: #000000"><?php if ($hour < 10) echo '0'; echo $hour . ':00'; ?></div>code style="color: #000000"><?php } ?></div> </div> <div class="cal cal--days"> <div id="cal--day--dummy-activator0"></div>code style="color: #000000"> <?php $dayHtml = ''; ob_start(); $dayPlanning( 0, $firstMondayOfThisWeek, $calendarEvents[$displayedCalendarContainerId], $todayDateString ); $dayHtml .= ob_get_clean(); $dayPlanning = function (int $dayIndex, DateTime $date, array $events, string $todayDateString) use ($viewsPath) : void { $dayDateNumber = $date->format('d'); $isToday = $dayDateNumber === $todayDateString; $fullDate = $date->format('Y-m-d'); $dayDateName = $date->format('D'); ?><div class="cal--date-header">code style="color: #000000"><?php if ($isToday) { ?> <hr class="cal cal--days--date--hour"/>code style="color: #000000"><?php } ?>href="#cal--day--dummy-activatorcode style="color: #000000"><?= $dayIndex ?>class="cal cal--days--datecode style="color: #000000"><?php if ($isToday) echo ' cal--days--today'; ?>title="Only show this day" data-day-number="code style="color: #000000"><?= $dayDateNumber ?>data-day-name="code style="color: #000000"><?= $dayDateName ?><p class="cal cal--days--date--num">code style="color: #000000"><?= $dayDateNumber ?></p> <p class="cal cal--days--date--day">code style="color: #000000"><?= $dayDateName ?></p> </a> <div class="cal cal--days--events -cal--day--code style="color: #000000"><?= $fullDate ?>data-date="code style="color: #000000"><?= $fullDate?><?php foreach ($events as $eventId => $eventData) { $event = $eventData['event']; if ($dayDateNumber === $event['fromDate']->format('d')) { $fromMinutes = $event['fromDate']->format('i'); $toMinutes = $event['toDate']->format('i'); ?> href="#cal--event-modal" class="cal cal--days--events--event from-code style="color: #000000"><?= $event['fromDate']->format('G') ?><?php echo $event['toDate'] ->format('G'), ' ', $event['cssClass'], ' cal--event-', $eventData['calendarId']; if ($fromMinutes !== '00') echo ' cal--from--min' . $fromMinutes; if ($toMinutes !== '00') echo ' cal--to--min' . $toMinutes; ?>data-event-id="code style="color: #000000"><?= $eventId ?>data-event-title="code style="color: #000000"><?= $event['title'] ?>data-event-description="code style="color: #000000"><?= $event['description'] ?>draggable="true"> <p class="cal cal--days--events--event--title">code style="color: #000000"><?= $event['title'] ?></p> <p class="-cal--hours">code style="color: #000000"><?= $event['fromDate']->format('H:i') ?>- <?= $event['toDate']->format('H:i') ?></p> </a>code style="color: #000000"> <?php } } ?></div> </div>code style="color: #000000"><?php }; for ($day = 1; $day < $daysByWeek; ++$day) { ob_start(); $dayPlanning( $day, $firstMondayOfThisWeek->modify('+1 day'), $calendarEvents[$displayedCalendarContainerId], $todayDateString ); $dayHtml .= ob_get_clean(); ?>id="cal--day--dummy-activatorcode style="color: #000000"><?= $day ?></div>code style="color: #000000"> <?php } echo $dayHtml;</div> </div> <div class="cal cal--days--lines"></div> <div id="cal--event-modal" class="modal--container"> <form class="modal--container--element event--modal" method="post"> <a href="#" role="button" class="ripple-2 modal--btn--close" aria-label="Close">X</a> <div class="event--modal--group"> <label for="event--title" class="modal--event-label label required">Title</label> <input id="event--title" name="event--title" class="modal--event-input field" required/> </div> <div class="event--modal--group"> <label for="event--date" class="modal--event-label label required">Date</label> <input id="event--date" name="event--date" type="date" class="modal--event-input field" required/> </div> <div class="event--modal--group"> <label for="event--hour-from" class="modal--event-label label required">From</label> <input id="event--hour-from" name="event--hour-from" type="time" class="modal--event-input field" required/> </div> <div class="event--modal--group"> <label for="event--hour-to" class="modal--event-label label required">To</label> <input id="event--hour-to" name="event--hour-to" type="time" class="modal--event-input field" required/> </div> <label for="event--description" class="label required">Description</label> <textarea id="event--description" name="event--description" class="modal--event-description field" required></textarea> <button type="submit" class="ripple modal--btn--send -save-button margin-t10b20">Save</button> </form> </div> </div> </div>