Tiggles ツ
10/18/2019 - 1:51 PM

Site Hours w Cal V2 📅

When clients need to change hours and know their whole year in advance, or have seasonal hours. (preview)

template.liquid
content_copyfile_download
<link rel="stylesheet" href="https://prod.speakcdn.com/sitefiles/global/CSS/calendar/event-default.css" />

<h3>Museum Hours</h3>

<div id="cal-hrs">
  <div class="hours-container">
        <p class="today-text">Today:&nbsp;</p>
        <div class="hours-wrapper">
           {% for event in Events %}
              <p>{{ event.StartDateTime | DateFormat: "h:mm tt", event.TimeZone }} - {{ event.EndDateTime | DateFormat: "h:mm tt", event.TimeZone }}</p>
           {% endfor %}
        </div>
  </div>
</div>
css.scss
content_copyfile_download

#cal-hrs {
	display: block;
	.CalendarEventsDetail__eventCalendarFront {
		display: none;
	}
	.hours-container {
		display: flex;
		flex-direction: row;
		.today-text {}
		.hours-wrapper {
			width: 100%;
		}
	}
}