Weekly Schedule

A table displaying the events of the week.

Dependencies

• Tabs
• Modal Window
• Skeleton Screen

How to

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. 

Create the timeline #

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.

Event Colors #

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

// ...

Modal Window #

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>

searchData option #

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

Categories

• Data Display > Table
• Data Display > Timeline

Bug report & feedback

Component Github page ↗