Weekly Schedule
A table displaying the events of the week.
Projects /
A table displaying the events of the week.
The Weekly Schedule component is a list of weekly events, with the option to learn more about each event by clicking on it.
The layout switches from a tabs component (on smaller screens), to a table component (on bigger screens) at the medium breakpoint.
You can initialize the component using the WSchedule
object:
var wSchedule = document.getElementsByClassName('js-w-schedule')[0];
new WSchedule({
element: wSchedule,
searchData: function(target, cb) {
// custom function used to retrieve the additional info about the selected event
// target: this is the selected [aria-controls] element
cb(data); // data is the HTML to be shown
}
});
⚠️ Note that in the weekly-schedule.js, we do not initialize the WSchedule object.
On bigger screens, all the events are dynamically distributed on the table. The height of the table depends on time range and the height of the table row.
The time range is set on the .w-schedule
element using the data-w-schedule-timeline
data attribute:
<div class="w-schedule js-tabs js-w-schedule" data-w-schedule-timeline="09:00-18:00"></div>
The row height is set in CSS using the --w-schedule-row-height
custom property:
:root {
--w-schedule-row-height: 50px;
}
The events are dinamically distributed, according to their datetime
value, which indicates the starting time and the duration (i.e., the value after PT):
<a class="w-schedule__event js-w-schedule__event" href="#0">
<time class="text-sm opacity-60% [email protected]" datetime="09:30PT1H30M">
<!-- content created in JS -->
</time>
<div>Abs Circuit</div>
</a>
If you need to show events after midnight, make sure to set, as end time in the data-w-schedule-timeline
attribute, a value bigger than 24. For example, if you want your timeline to start at 09:00 and end at be 02:00 am, use 09:00-26:00.
The event colors are set using the defineColorHSL
mixin, and then applied to the events using class modifiers:
:root {
// event colors
@include defineColorHSL(--w-schedule-color-1, 27, 87%, 70%);
@include defineColorHSL(--w-schedule-color-2, 187, 13%, 28%);
@include defineColorHSL(--w-schedule-color-3, 304, 100%, 89%);
@include defineColorHSL(--w-schedule-color-4, 96, 67%, 87%);
}
// event themes
.w-schedule__event--1 {
background-color: var(--w-schedule-color-1);
border-color: lightness(var(--w-schedule-color-1), 0.8);
color: var(--color-black);
}
.w-schedule__event--2 {
background-color: var(--w-schedule-color-2);
border-color: lightness(var(--w-schedule-color-2), 0.8);
color: var(--color-white);
}
// ...
Each event is linked to the modal using aria-controls
(to target the modal template).
<a class="w-schedule__event w-schedule__event--1 js-w-schedule__event" href="#0" aria-controls="w-schedule-modal-id">
<time datetime="09:30PT1H">
<!-- content created in JS -->
</time>
<div>Abs Circuit</div>
</a>
By default, the modal content is a skeleton element, a placeholder visible while the event content is being loaded.
You are free to customize both the skeleton and the structure of the event content.
This is an example of the structure we use for the event content in our demo:
<a class="w-schedule-modal__figure" href="#0">
<img src="img-url.jpg" alt="Image description">
</a>
<div class="w-schedule-modal__body padding-md">
<div class="text-component">
<h1 class="text-xl">Abs Circuit</h1>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur et labore esse mollitia. Pariatur error nesciunt ab illum.</p>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta placeat ex sunt?</p>
<p>
<button class="btn btn--primary">Book Class</button>
</p>
</div>
</div>
When initializing the WSchedule
object, you should pass the searchData
option. This is the custom function used to retrieve the additional info about the selected event (e.g., a call to a database).
For example, if the additional info is stored in a different file for each one of your events, your searchData
would be something like:
new WSchedule({
element: wSchedule,
searchData: function(target, cb) {
// this assumes you set, for each [aria-controls] element, a data-w-schedule-url equal to the file path where the info are stored
var eventInfoPath = target.getAttribute('data-w-schedule-url');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// the ajax call was succesfull -> call the callback function (cb) passing the response text as argument
cb(this.responseText);
}
};
xhttp.open("GET", eventInfoPath, true);
xhttp.send();
}
});