Opening hours

When to use this component

Use the opening hours component to show opening hours for a certain location for this week and for this month and what the opening hours are for each day. It is only to be used on detail pages of locations.

When not use this component

When the location has multiple ways of being open, for instance, free entrance without appointment versus appointment only, use the opening hours accordion component instead.

How it works

The opening hours component shows on what days a certain location is open this week or this month and what the opening hours are for each day this week or this month. Tabs are used to switch between opening hours this week and opening hours this month. By default, the opening hours for this week are shown.

Opening hours this week

The opening hours for this week are shown as a list with the next 7 days starting from today. For each day, the opening hours for that day are shown in the list. When the location is closed on a certain day, this is clearly indicated using the label “Closed”.

Opening hours this month

The opening hours for this month are shown as a calendar view that shows the current month. By default, the current month is shown but the user can click back and forth to previous or coming months.

For each day of the month, it is visually indicated if the location is open or closed. When clicking a day of the month, the day is selected, and the opening hours for that day are shown. When the location is closed on a certain day, this is clearly indicated using the label “Closed”.

Usage within the style guide

The opening hours component is used in the opening hours accordion component.

{% set weekTab %}
  <div class="openinghours-widget" data-type="week-from-now">
    <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--list">
      <ul class="openinghours--days">
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                  </span>
              <span class="openinghours--date-day">14</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">15</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">16</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                  </span>
              <span class="openinghours--date-day">17</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="12:00" aria-label="12:00">
                    12:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                  </span>
              <span class="openinghours--date-day">18</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="22:00" aria-label="22:00">
                    22:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="00:00" aria-label="00:00">
                    00:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                  </span>
              <span class="openinghours--date-day">19</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="openinghours--day openinghours--day-open">
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                  </span>
              <span class="openinghours--date-day">20</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
{% endset %}

{% set monthTab %}
  <div class="openinghours-widget" data-type="month">
    <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--calendar">
      <div class="openinghours--header">
        <button class="openinghours--prev">
          previous
        </button>
        <div class="openinghours--month">
          November 2018
        </div>
        <button class="openinghours--next">
          next
        </button>
      </div>
      <ul class="openinghours--days">
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Mo
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Tu
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">We
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Th
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Fr
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Sa
        </li>
        <li aria-hidden="true"
            class="openinghours--day openinghours--day--day-of-week">Su
        </li>
        <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
        <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
        <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
        <li aria-setsize="30" aria-posinset="1" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">1</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-01">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">1</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="2" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">2</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-02">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">2</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="3" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">3</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-03">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                  </span>
              <span class="openinghours--date-day">3</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="4" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">4</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-04">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                  </span>
              <span class="openinghours--date-day">4</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="5" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">5</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-05">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                  </span>
              <span class="openinghours--date-day">5</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="6" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">6</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-06">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                  </span>
              <span class="openinghours--date-day">6</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="7" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">7</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-07">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                  </span>
              <span class="openinghours--date-day">7</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="8" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">8</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-08">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">8</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="9" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">9</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-09">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">9</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="10" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">10</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-10">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                  </span>
              <span class="openinghours--date-day">10</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="12:00" aria-label="12:00">
                    12:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="11" tabindex="-1"
            class="openinghours--day openinghours--day-closed openinghours--day-passed">
          <span aria-hidden="true">11</span>
          <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-11">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                  </span>
              <span class="openinghours--date-day">11</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">closed</span>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="12" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">12</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-12">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                  </span>
              <span class="openinghours--date-day">12</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="13" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">13</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-13">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                  </span>
              <span class="openinghours--date-day">13</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="14" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">14</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                  </span>
              <span class="openinghours--date-day">14</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="15" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">15</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">15</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="16" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">16</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">16</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="17" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">17</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                  </span>
              <span class="openinghours--date-day">17</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="12:00" aria-label="12:00">
                    12:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="18" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">18</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                  </span>
              <span class="openinghours--date-day">18</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="22:00" aria-label="22:00">
                    22:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="00:00" aria-label="00:00">
                    00:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="19" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">19</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                  </span>
              <span class="openinghours--date-day">19</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="20" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">20</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                  </span>
              <span class="openinghours--date-day">20</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="21" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">21</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-21">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                  </span>
              <span class="openinghours--date-day">21</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="22" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">22</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-22">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">22</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="23" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">23</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-23">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">23</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="24" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">24</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-24">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                  </span>
              <span class="openinghours--date-day">24</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="12:00" aria-label="12:00">
                    12:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="25" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">25</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-25">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                  </span>
              <span class="openinghours--date-day">25</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="22:00" aria-label="22:00">
                    22:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="00:00" aria-label="00:00">
                    00:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="26" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">26</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-26">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                  </span>
              <span class="openinghours--date-day">26</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="27" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">27</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-27">
                  <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                  </span>
              <span class="openinghours--date-day">27</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="28" tabindex="-1"
            class="openinghours--day openinghours--day-open openinghours--day-passed">
          <span aria-hidden="true">28</span>
          <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed"
               property="openingHoursSpecification" typeof="OpeningHoursSpecification">
            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough"
                 datetime="2018-11-28">
              <span class="openinghours--date-special-day">Yesterday</span>
              <span class="openinghours--date-between">, </span>
              <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                  </span>
              <span class="openinghours--date-day">28</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="29" tabindex="0"
            class="openinghours--day openinghours--day-open openinghours--day-active">
          <span aria-hidden="true">29</span>
          <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification"
               typeof="OpeningHoursSpecification">
            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough"
                 datetime="2018-11-29">
              <span class="openinghours--date-special-day">Today</span>
              <span class="openinghours--date-between">, </span>
              <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                  </span>
              <span class="openinghours--date-day">29</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-setsize="30" aria-posinset="30" tabindex="-1"
            class="openinghours--day openinghours--day-open">
          <span aria-hidden="true">30</span>
          <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification"
               typeof="OpeningHoursSpecification">
            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough"
                 datetime="2018-11-30">
              <span class="openinghours--date-special-day">Tomorrow</span>
              <span class="openinghours--date-between">, </span>
              <span class="openinghours--date-day-of-week">
                      <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                  </span>
              <span class="openinghours--date-day">30</span>
              <span class="openinghours--date-month">November</span>
            </div>
            <div class="openinghours--content">
              <div class="openinghours--times">
                <span class="openinghours--status">open</span>
                <div class="openinghours--time">
                  <span class="openinghours--time-prefix">from</span>
                  <time property="opens" datetime="09:00" aria-label="09:00">
                    09:00 h
                  </time>
                  <span class="openinghours--time-separator">to</span>
                  <time property="closes" datetime="17:00" aria-label="17:00">
                    17:00 h
                  </time>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
        <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
      </ul>
    </div>
  </div>
{% endset %}


{% include '@tabs' with {
  modifier: 'opening-hours',
  tabs: [
    {
      label: 'This week',
      target: 'week',
      content: weekTab
    },
    {
      label: 'This month',
      target: 'month',
      content: monthTab
    }
  ]
} %}
<div class="tabs opening-hours" data-tabs>
    <ul role="tablist">
        <li role="presentation">
            <a role="tab" href="#opening-hoursweek" aria-controls="opening-hoursweek">
                This week
            </a>
        </li>
        <li role="presentation">
            <a role="tab" href="#opening-hoursmonth" aria-controls="opening-hoursmonth">
                This month
            </a>
        </li>
    </ul>
    <div role="tabpanel" id="opening-hoursweek">
        <div class="openinghours-widget" data-type="week-from-now">
            <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--list">
                <ul class="openinghours--days">
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                </span>
                                <span class="openinghours--date-day">14</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">15</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">16</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                </span>
                                <span class="openinghours--date-day">17</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="12:00" aria-label="12:00">
                                            12:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                </span>
                                <span class="openinghours--date-day">18</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="22:00" aria-label="22:00">
                                            22:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                            00:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                </span>
                                <span class="openinghours--date-day">19</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="openinghours--day openinghours--day-open">
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                </span>
                                <span class="openinghours--date-day">20</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div role="tabpanel" id="opening-hoursmonth">
        <div class="openinghours-widget" data-type="month">
            <div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--calendar">
                <div class="openinghours--header">
                    <button class="openinghours--prev">
                        previous
                    </button>
                    <div class="openinghours--month">
                        November 2018
                    </div>
                    <button class="openinghours--next">
                        next
                    </button>
                </div>
                <ul class="openinghours--days">
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Mo
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Tu
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">We
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Th
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Fr
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Sa
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Su
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                    <li aria-setsize="30" aria-posinset="1" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">1</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-01">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">1</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="2" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">2</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-02">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">2</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="3" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">3</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-03">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                </span>
                                <span class="openinghours--date-day">3</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="4" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">4</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-04">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                </span>
                                <span class="openinghours--date-day">4</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="5" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">5</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-05">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                </span>
                                <span class="openinghours--date-day">5</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="6" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">6</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-06">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                </span>
                                <span class="openinghours--date-day">6</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="7" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">7</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-07">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                </span>
                                <span class="openinghours--date-day">7</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="8" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">8</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-08">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">8</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="9" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">9</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-09">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">9</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="10" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">10</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-10">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                </span>
                                <span class="openinghours--date-day">10</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="12:00" aria-label="12:00">
                                            12:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="11" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
                        <span aria-hidden="true">11</span>
                        <div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-11">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                </span>
                                <span class="openinghours--date-day">11</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">closed</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="12" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">12</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-12">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                </span>
                                <span class="openinghours--date-day">12</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="13" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">13</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-13">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                </span>
                                <span class="openinghours--date-day">13</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="14" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">14</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                </span>
                                <span class="openinghours--date-day">14</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="15" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">15</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">15</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="16" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">16</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">16</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="17" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">17</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                </span>
                                <span class="openinghours--date-day">17</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="12:00" aria-label="12:00">
                                            12:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="18" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">18</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                </span>
                                <span class="openinghours--date-day">18</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="22:00" aria-label="22:00">
                                            22:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                            00:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="19" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">19</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                </span>
                                <span class="openinghours--date-day">19</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="20" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">20</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                </span>
                                <span class="openinghours--date-day">20</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="21" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">21</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-21">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                </span>
                                <span class="openinghours--date-day">21</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="22" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">22</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-22">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">22</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="23" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">23</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-23">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">23</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="24" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">24</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-24">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
                                </span>
                                <span class="openinghours--date-day">24</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="12:00" aria-label="12:00">
                                            12:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="25" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">25</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-25">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
                                </span>
                                <span class="openinghours--date-day">25</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="22:00" aria-label="22:00">
                                            22:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="00:00" aria-label="00:00">
                                            00:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="26" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">26</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-26">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Monday">Monday
                                </span>
                                <span class="openinghours--date-day">26</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="27" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">27</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-27">
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
                                </span>
                                <span class="openinghours--date-day">27</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="28" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
                        <span aria-hidden="true">28</span>
                        <div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-28">
                                <span class="openinghours--date-special-day">Yesterday</span>
                                <span class="openinghours--date-between">, </span>
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
                                </span>
                                <span class="openinghours--date-day">28</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="29" tabindex="0" class="openinghours--day openinghours--day-open openinghours--day-active">
                        <span aria-hidden="true">29</span>
                        <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-29">
                                <span class="openinghours--date-special-day">Today</span>
                                <span class="openinghours--date-between">, </span>
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
                                </span>
                                <span class="openinghours--date-day">29</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-setsize="30" aria-posinset="30" tabindex="-1" class="openinghours--day openinghours--day-open">
                        <span aria-hidden="true">30</span>
                        <div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
                            <div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-30">
                                <span class="openinghours--date-special-day">Tomorrow</span>
                                <span class="openinghours--date-between">, </span>
                                <span class="openinghours--date-day-of-week">
                                    <link property="dayOfWeek" href="http://schema.org/Friday">Friday
                                </span>
                                <span class="openinghours--date-day">30</span>
                                <span class="openinghours--date-month">November</span>
                            </div>
                            <div class="openinghours--content">
                                <div class="openinghours--times">
                                    <span class="openinghours--status">open</span>
                                    <div class="openinghours--time">
                                        <span class="openinghours--time-prefix">from</span>
                                        <time property="opens" datetime="09:00" aria-label="09:00">
                                            09:00 h
                                        </time>
                                        <span class="openinghours--time-separator">to</span>
                                        <time property="closes" datetime="17:00" aria-label="17:00">
                                            17:00 h
                                        </time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                    <li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
                </ul>
            </div>
        </div>

    </div>
</div>
/* No context defined for this component. */
  • Content:
    $month-day-size-mobile: 2rem;
    $month-day-size: 2.4rem;
    $week-breakpoint: '(min-width: 750px)';
    
    .openinghours-widget {
      font-size: .8rem;
    
      @media (max-width: 360px) {
        width: calc(100% + 2rem);
        margin-left: -1rem;
      }
    
      // ===
      // Week view
      // ===
      &[data-type*="week"] .openinghours {
        &--day-open .openinghours--status,
        &--time-prefix,
        &--times-between {
          display: none;
        }
    
        &--time-separator {
          font-size: 0;
    
          &::before {
            font-size: .8rem;
            content: '-';
          }
        }
    
        &--days {
          @extend %list-no-style;
        }
    
        &--day {
          padding: .3rem .8rem;
    
          &:nth-child(even) {
            @include theme('background', 'color-primary--lighten-4', 'opening-hours-even-background');
          }
        }
    
        &--details {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
    
        &--date {
          min-width: $bp-mobile;
        }
    
        &--times {
          min-width: 150px;
        }
    
        &--status {
          text-transform: capitalize;
        }
      }
    
      // ===
      // Month view
      // ===
      &[data-type="month"] {
        @include month-widget-mobile;
    
    
        @include tablet {
          @include month-widget-desktop;
        }
    
        > .openinghours {
          @include theme('border-color', 'color-primary--lighten-3', 'opening-hours-border');
          display: inline-block;
        }
    
        .openinghours {
    
          &--header,
          &--days {
            display: flex;
            width: $month-day-size-mobile * 7;
    
            @include phablet {
              width: $month-day-size * 7;
            }
          }
    
          // Header
          // ===
          &--header {
            justify-content: space-between;
    
            button {
              @include theme('color', 'color-primary--darken-2', 'opening-hours-color');
    
              display: flex;
              align-items: center;
              justify-content: center;
              width: $month-day-size-mobile;
              height: $month-day-size-mobile / 2;
              padding: 0;
              border: 0;
              background: transparent;
              font-size: 0;
              cursor: pointer;
    
              @include phablet {
                width: $month-day-size;
                height: $month-day-size / 2;
              }
    
              &.openinghours--prev,
              &.openinghours--next {
                &::before {
                  font-size: 1.2rem;
                }
              }
    
              &.openinghours--prev {
                @include icon(arrow-left);
              }
    
              &.openinghours--next {
                @include icon(arrow-right);
              }
            }
    
            .openinghours--month {
              @include bold-text;
              line-height: $month-day-size-mobile / 2;
    
              @include phablet {
                line-height: $month-day-size / 2;
              }
            }
          }
    
    
          &--day--day-of-week {
            @include bold-text;
            text-transform: uppercase;
          }
    
          &--days {
            flex-wrap: wrap;
            margin: 0;
          }
    
          &--day {
            @extend %list-no-style;
    
            &,
            > span {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: $month-day-size-mobile;
              height: $month-day-size-mobile;
              border-radius: 50%;
    
              @include phablet {
                width: $month-day-size;
                height: $month-day-size;
              }
            }
          }
    
          &--day-open,
          &--day-closed {
            cursor: pointer;
    
            &[tabindex='0'] > span,
            &:hover > span {
              @include theme('border-color', 'color-primary--darken-2', 'opening-hours-color');
              border: 2px solid;
            }
    
            &[tabindex='0'] > span {
              @include bold-text;
            }
    
            &[tabindex='0'] .openinghours--details {
              display: block;
            }
          }
    
          &--day-open > span::after {
            @include theme('background-color', 'color-primary--darken-2', 'opening-hours-color');
            display: block;
            position: relative;
            bottom: .2rem;
            flex: 0 0 auto;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            content: "";
          }
    
          &--day-passed > span {
            opacity: .5;
          }
    
          &--details {
            display: none;
            position: absolute;
            width: calc(100% - #{$month-day-size-mobile / 2});
            cursor: default;
    
            @include phablet {
              width: calc(100% - #{$month-day-size / 2});
            }
          }
    
          &--date {
            @include bold-text;
            margin-bottom: .8rem;
          }
    
          &--status {
            text-transform: capitalize;
          }
    
          &--time,
          &--times-between {
            display: inline;
          }
        }
      }
    }
    
  • URL: /components/raw/week-month-widget/_week-month-widget.scss
  • Filesystem Path: components/31-molecules/week-month-widget/_week-month-widget.scss
  • Size: 4.6 KB