EC System

Date blocks

Documentation • Demo

Date blocks

Why and how to use this component

Users need a way to quickly see an event’s date and status.\ The solution is a date block that allows users to easily visualize this information.

When to use this component

  • for lists of events and agenda pages

Do not use this component

  • in any other situation except listings
{#
  Parameters:
    - "variant" (string) (default: ''): display variant
    - "week_day" (string) (default: ''): day(s) of the week of the event
    - "day" (string) (default: ''): day number(s) of the event
    - "month" (string) (default: ''): month(s) of the event
    - "year" (string) (default: ''): year(s) of the event
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-date-block' %}
 
/* Default event */
{
  "week_day": "Tue",
  "day": "12",
  "month": "Jan"
}


/* Ongoing event */
{
  "variant": "ongoing",
  "week_day": "Wed-Fri",
  "day": "31-11",
  "month": "May-Jun"
}


/* Cancelled event */
{
  "variant": "cancelled",
  "week_day": "Mon",
  "day": "11",
  "month": "Jan"
}


/* Past event */
{
  "variant": "past",
  "day": "2-4",
  "month": "Feb",
  "year": "2015"
}


<!-- Default event -->
<div class="ecl-date-block">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Tue</span>
    <span class="ecl-date-block__day">12</span>
    <span class="ecl-date-block__month">Jan</span>
  </div>
</div>


<!-- Ongoing event -->
<div class="ecl-date-block ecl-date-block--ongoing">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Wed-Fri</span>
    <span class="ecl-date-block__day">31-11</span>
    <span class="ecl-date-block__month">May-Jun</span>
  </div>
</div>


<!-- Cancelled event -->
<div class="ecl-date-block ecl-date-block--cancelled">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Mon</span>
    <span class="ecl-date-block__day">11</span>
    <span class="ecl-date-block__month">Jan</span>
  </div>
</div>


<!-- Past event -->
<div class="ecl-date-block ecl-date-block--past">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__day">2-4</span>
    <span class="ecl-date-block__month">Feb</span>
    <span class="ecl-date-block__year">2015</span>
  </div>
</div>
  • Content: 
    /*
 * Date block
 * @define date-block
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-date-block/generic-component-date-block';

// Use generic mixin
@include exports('ec-component-date-block') {
  @include ecl-date-block();
}
  • URL: /components/raw/ec-component-date-block/ec-component-date-block.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-date-block/ec-component-date-block.scss
  • Size: 276 Bytes
  • Handle: @ecl/ec-component-date-block
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-date-block/ec-component-date-block.twig