The open today component is used to show if a certain location is open today and what the opening hours are for today. It is mainly used on overview pages with locations. It may also be used on detail pages of locations.
The open today component cannot be used to indicate if a location is open now. The open today commonent does not show if a location is open at the current point in time, but it shows if the location is (or was) open today.
When the location is open today, the open today component shows “Open today” and the opening hours for today are shown.
When the location is not open today, the open today component shows “Closed today” no opening hours are shown.
In case the location has multiple ways of being open, for instance, free entrance without appointment versus appointment only, the “multi-channel” variant is used. In this case, the opening hours for each way are shown with a clear indication of the difference in the opening hours: “Open today”, “Open by appointment”.
The open today component is used in the opening hours accordion component.
<div class="openinghours-widget" data-type="day">
<div class="openinghours openinghours--details openinghours--day-{{ open ? 'open' : 'closed' }}" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
<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/Friday">Friday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">December</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">{{ open ? 'open' : 'closed' }}</span>
{% if open %}
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="08:30" aria-label="08:30">
08:30 h </time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h </time>
</div>
{% endif %}
</div>
</div>
</div>
{% if channels > 1 %}
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
<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/Friday">Friday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">December</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">by appointment</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>
{% endif %}
</div>
<div class="openinghours-widget" data-type="day">
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
<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/Friday">Friday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">December</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="08:30" aria-label="08:30">
08:30 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>
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
<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/Friday">Friday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">December</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">by appointment</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>
</div>
{
"open": true,
"channels": 2
}
$breakpoint-openinghours: '(min-width: 750px)';
// ===
// Day view
// ===
.openinghours-widget {
&[data-type="day"] {
display: inline-block;
border-radius: border-radius('radius-1');
overflow: hidden;
> * {
line-height: 1.4rem;
}
.channel-label {
@include bold-text;
float: left;
font-size: 0;
&::after {
display: inline-block;
content: " ";
}
&:nth-of-type(n + 2) {
padding-left: 38px;
font-size: 16px;
+ .openinghours {
padding-top: 0;
&::before {
display: none;
}
.openinghours--date,
.openinghours--status {
display: none;
}
}
}
}
.openinghours {
@include theme('background-color', 'color-success-light');
position: relative;
margin-top: -.6rem;
padding: 8px 10px 8px 42px;
&::before {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.2rem;
content: '';
}
&:first-of-type {
@include icon(clock);
margin-top: 0;
}
&--day-closed {
@include theme('background-color', 'color-error-light');
}
& + .openinghours--day-closed {
display: none;
}
&--date,
&--content,
&--times,
&--times-between,
&--time {
display: inline;
}
&--time {
&:not(.all-day) time:last-of-type {
&::before {
content: "-";
}
}
}
&--date,
&--status {
@include bold-text;
}
&--special-day {
> span {
display: none;
}
> span:first-child {
display: inline;
}
}
&--time-prefix,
&--time-separator {
display: none;
}
}
}
}