University of Derby

Calendar Pagination 

<!-- month -->
<nav class="calendar-pagination">
    <h2 class="h5">1 January 2019 - 31 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 month
			</a>
        </li>
        <li class="calendar-pagination-item">
            <a href="#">
				Next month <i class="uod-icons uod-icons-chevron-right calendar-pagination-icon"></i>
			</a>
        </li>
    </ol>
</nav>


<!-- Week -->
<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 week
			</a>
        </li>
        <li class="calendar-pagination-item">
            <a href="#">
				Next week <i class="uod-icons uod-icons-chevron-right calendar-pagination-icon"></i>
			</a>
        </li>
    </ol>
</nav>


<!-- Day -->
<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>
 
/* month */
{
  "prevHref": "#",
  "nextHref": "#",
  "startDate": "1 January 2019",
  "endDate": "31 January 2019",
  "type": "month"
}


/* Week */
{
  "prevHref": "#",
  "nextHref": "#",
  "startDate": "7 January 2019",
  "endDate": "13 January 2019",
  "type": "week"
}


/* Day */
{
  "prevHref": "#",
  "nextHref": "#",
  "startDate": "7 January 2019",
  "endDate": "13 January 2019",
  "type": "day"
}
  • Content: 
    .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;
	}
}
  • URL: /components/raw/calendar-pagination/calendar-pagination.scss
  • Filesystem Path: components/components/calendar/calendar-pagination/calendar-pagination.scss
  • Size: 603 Bytes

Calendar pagination

Used with T4 event calendar module

Properties

  • prevHref [required, string]
  • nextHref [required, string]
  • startDate [required, string]
  • endDate [required, string]
  • type [Optional, string, “month”, “week” or “day”]