University of Derby

Calendar View Switcher 

<div class="calendar-view-switcher calendar-view-switchers ajax-load-area" id="view-switchers" data-ajaxloadalso='["calendar_events", "view_period_switchers", "calendar_box","past_events","searchoptions","hidden_form_categories","hidden_form_generic","calendar_page"]'>
    <h6>View events by</h6>
    <a href="#" class="ajax-load-link">Day</a>
    <span class="calendar-view-switcher-spacer">|</span>
    <a href="#" class="ajax-load-link">Week</a>
    <span class="calendar-view-switcher-spacer">|</span>
    <span>Month</span>
    <span class="calendar-view-switcher-spacer">|</span>
    <a href="#" class="ajax-load-link">Year</a>
</div>
 
<div class="calendar-view-switcher calendar-view-switchers ajax-load-area" id="view-switchers" data-ajaxloadalso='["calendar_events", "view_period_switchers", "calendar_box","past_events","searchoptions","hidden_form_categories","hidden_form_generic","calendar_page"]'>
    <h6>View events by</h6>
    <a href="#" class="ajax-load-link">Day</a>
    <span class="calendar-view-switcher-spacer">|</span>
    <a href="#" class="ajax-load-link">Week</a>
    <span class="calendar-view-switcher-spacer">|</span>
    <span>Month</span>
    <span class="calendar-view-switcher-spacer">|</span>
    <a href="#" class="ajax-load-link">Year</a>
</div>
 
/* No context defined for this component. */
  • Content: 
    .calendar-view-switcher {
	margin-bottom: px-to-em(10, 16);
    background: $light-grey;
    padding: px-to-em(20, 16);

    &-spacer {
    	margin: 0 .25em;
    }
}
  • URL: /components/raw/calendar-view-switcher/calendar-view-switcher.scss
  • Filesystem Path: components/components/calendar/calendar-view-switcher/calendar-view-switcher.scss
  • Size: 165 Bytes

Calendar view switcher

Used with T4 event calendar module