<nav class="calendar-pagination">
<h2 class="h5">7 January 2019 - 13 January 2019</h2>
<ol class="calendar-pagination-container">
<li class="calendar-pagination-item">
<a href="#">
<i class="uod-icons uod-icons-chevron-left calendar-pagination-icon"></i> Previous day
</a>
</li>
<li class="calendar-pagination-item">
<a href="#">
Next day <i class="uod-icons uod-icons-chevron-right calendar-pagination-icon"></i>
</a>
</li>
</ol>
</nav>
<nav class="calendar-pagination">
<h2 class="h5">{{ startDate }} - {{ endDate }}</h2>
<ol class="calendar-pagination-container">
<li class="calendar-pagination-item">
<a href="{{ prevHref }}">
<i class="uod-icons uod-icons-chevron-left calendar-pagination-icon"></i> Previous {{ type }}
</a>
</li>
<li class="calendar-pagination-item">
<a href="{{ nextHref }}">
Next {{ type }} <i class="uod-icons uod-icons-chevron-right calendar-pagination-icon"></i>
</a>
</li>
</ol>
</nav>
{
"prevHref": "#",
"nextHref": "#",
"startDate": "7 January 2019",
"endDate": "13 January 2019",
"type": "day"
}
.calendar-pagination{
@include small-body-font;
width: 100%;
@include margin-extra-small;
a {
@include underline-only-on-hover;
}
@include for-largerthan-ipad-portrait {
@include body-font;
}
&-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
&-item {
@include margin-extra-small;
margin-right: 20px;
display: flex;
&::before {
display: none;
}
&:last-child {
margin-right: 0;
}
}
&-icon {
position: relative;
top: 2px;
}
}
Used with T4 event calendar module