University of Derby

Calendar Mini View 

<div class="calendar-mini-view pcb-mini-cal ajax-load-area" id="calendar_box" data-ajaxloadalso="[&quot;calendar_page&quot;,&quot;calendar_events&quot;, &quot;view_period_switchers&quot;, &quot;view-switchers&quot;,&quot;hidden_form&quot;,&quot;jumpto_hidden_form&quot;,&quot;calendar_events&quot;,&quot;past_events&quot;,&quot;searchoptions-generic&quot;,&quot;searchoptions-categories&quot;]"
    style="opacity: 1;">
    <table class="calendar-mini-view-table cal-table">
        <thead>
            <tr class="calendar-box-header">
                <th id="prev_month">
                    <a href="#" class="ajax-load-link"><i class="uod-icons uod-icons-chevron-left"></i><span class="prev-next-link">Prev</span></a>
                </th>
                <th colspan="5" id="current_month">January 2019</th>

                <th id="next_month">
                    <a href="#" class="ajax-load-link"><i class="uod-icons uod-icons-chevron-right"></i><span class="prev-next-link">Next</span></a>
                </th>
            </tr>
            <tr class="calendar-dayhead">
                <th id="heading-0" headers="current_month"><span>Mo</span></th>
                <th id="heading-1" headers="current_month"><span>Tu</span></th>
                <th id="heading-2" headers="current_month"><span>We</span></th>
                <th id="heading-3" headers="current_month"><span>Th</span></th>
                <th id="heading-4" headers="current_month"><span>Fr</span></th>
                <th id="heading-5" headers="current_month"><span>Sa</span></th>
                <th id="heading-6" headers="current_month"><span>Su</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="calendar-dayrow">
                <td class="fillday outperiodday hasEvents NotInFilter" headers="heading-0" id="day2018_12_31">
                    <a href="#" class="ajax-load-link">31</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-1" id="day2019_01_01">
                    <a href="#" class="ajax-load-link">01</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-2" id="day2019_01_02">
                    <a href="#" class="ajax-load-link">02</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-3" id="day2019_01_03">
                    <a href="#" class="ajax-load-link">03</a>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-4" id="day2019_01_04">
                    <span>04</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-5" id="day2019_01_05">
                    <span>05</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-6" id="day2019_01_06">
                    <span>06</span>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-0" id="day2019_01_07">
                    <a href="#" class="ajax-load-link">07</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_08">
                    <a href="#" class="ajax-load-link">08</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_09">
                    <a href="#" class="ajax-load-link">09</a>
                </td>
                <td class="thismonth viewrange periodday today hasEvents inFilter" headers="heading-3" id="day2019_01_10">
                    <a href="#" class="ajax-load-link">10</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-4" id="day2019_01_11">
                    <a href="#" class="ajax-load-link">11</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-5" id="day2019_01_12">
                    <a href="#" class="ajax-load-link">12</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-6" id="day2019_01_13">
                    <a href="#" class="ajax-load-link">13</a>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_14">
                    <a href="#" class="ajax-load-link">14</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_15">
                    <a href="#" class="ajax-load-link">15</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_16">
                    <a href="#" class="ajax-load-link">16</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_17">
                    <a href="#" class="ajax-load-link">17</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-4" id="day2019_01_18">
                    <a href="#" class="ajax-load-link">18</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-5" id="day2019_01_19">
                    <a href="#" class="ajax-load-link">19</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-6" id="day2019_01_20">
                    <a href="#" class="ajax-load-link">20</a>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_21">
                    <a href="#" class="ajax-load-link">21</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_22">
                    <a href="#" class="ajax-load-link">22</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_23">
                    <a href="#" class="ajax-load-link">23</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_24">
                    <a href="#" class="ajax-load-link">24</a>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-4" id="day2019_01_25">
                    <span>25</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-5" id="day2019_01_26">
                    <span>26</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-6" id="day2019_01_27">
                    <span>27</span>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_28">
                    <a href="#" class="ajax-load-link">28</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_29">
                    <a href="#" class="ajax-load-link">29</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_30">
                    <a href="#" class="ajax-load-link">30</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_31">
                    <a href="#" class="ajax-load-link">31</a>
                </td>
                <td class="fillday outperiodday hasEvents NotInFilter" headers="heading-4" id="day2019_02_01">
                    <a href="#" class="ajax-load-link">01</a>
                </td>
                <td class="fillday outperiodday" headers="heading-5" id="day2019_02_02">
                    <span>02</span>
                </td>
                <td class="fillday outperiodday" headers="heading-6" id="day2019_02_03">
                    <span>03</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="calendar-mini-view pcb-mini-cal ajax-load-area" id="calendar_box" data-ajaxloadalso="[&quot;calendar_page&quot;,&quot;calendar_events&quot;, &quot;view_period_switchers&quot;, &quot;view-switchers&quot;,&quot;hidden_form&quot;,&quot;jumpto_hidden_form&quot;,&quot;calendar_events&quot;,&quot;past_events&quot;,&quot;searchoptions-generic&quot;,&quot;searchoptions-categories&quot;]" style="opacity: 1;">
    <table class="calendar-mini-view-table cal-table">
        <thead>
            <tr class="calendar-box-header">
                <th id="prev_month">
                    <a href="#" class="ajax-load-link"><i class="uod-icons uod-icons-chevron-left"></i><span class="prev-next-link">Prev</span></a>
                </th>
                <th colspan="5" id="current_month">January 2019</th>

                <th id="next_month">
                    <a href="#" class="ajax-load-link"><i class="uod-icons uod-icons-chevron-right"></i><span class="prev-next-link">Next</span></a>
                </th>
            </tr>
            <tr class="calendar-dayhead">
                <th id="heading-0" headers="current_month"><span>Mo</span></th>
                <th id="heading-1" headers="current_month"><span>Tu</span></th>
                <th id="heading-2" headers="current_month"><span>We</span></th>
                <th id="heading-3" headers="current_month"><span>Th</span></th>
                <th id="heading-4" headers="current_month"><span>Fr</span></th>
                <th id="heading-5" headers="current_month"><span>Sa</span></th>
                <th id="heading-6" headers="current_month"><span>Su</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="calendar-dayrow">
                <td class="fillday outperiodday hasEvents NotInFilter" headers="heading-0" id="day2018_12_31">
                    <a href="#" class="ajax-load-link">31</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-1" id="day2019_01_01">
                    <a href="#" class="ajax-load-link">01</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-2" id="day2019_01_02">
                    <a href="#" class="ajax-load-link">02</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-3" id="day2019_01_03">
                    <a href="#" class="ajax-load-link">03</a>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-4" id="day2019_01_04">
                    <span>04</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-5" id="day2019_01_05">
                    <span>05</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-6" id="day2019_01_06">
                    <span>06</span>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-0" id="day2019_01_07">
                    <a href="#" class="ajax-load-link">07</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_08">
                    <a href="#" class="ajax-load-link">08</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_09">
                    <a href="#" class="ajax-load-link">09</a>
                </td>
                <td class="thismonth viewrange periodday today hasEvents inFilter" headers="heading-3" id="day2019_01_10">
                    <a href="#" class="ajax-load-link">10</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-4" id="day2019_01_11">
                    <a href="#" class="ajax-load-link">11</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents NotInFilter" headers="heading-5" id="day2019_01_12">
                    <a href="#" class="ajax-load-link">12</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-6" id="day2019_01_13">
                    <a href="#" class="ajax-load-link">13</a>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_14">
                    <a href="#" class="ajax-load-link">14</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_15">
                    <a href="#" class="ajax-load-link">15</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_16">
                    <a href="#" class="ajax-load-link">16</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_17">
                    <a href="#" class="ajax-load-link">17</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-4" id="day2019_01_18">
                    <a href="#" class="ajax-load-link">18</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-5" id="day2019_01_19">
                    <a href="#" class="ajax-load-link">19</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-6" id="day2019_01_20">
                    <a href="#" class="ajax-load-link">20</a>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_21">
                    <a href="#" class="ajax-load-link">21</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_22">
                    <a href="#" class="ajax-load-link">22</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_23">
                    <a href="#" class="ajax-load-link">23</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_24">
                    <a href="#" class="ajax-load-link">24</a>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-4" id="day2019_01_25">
                    <span>25</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-5" id="day2019_01_26">
                    <span>26</span>
                </td>
                <td class="thismonth viewrange periodday" headers="heading-6" id="day2019_01_27">
                    <span>27</span>
                </td>
            </tr>
            <tr class="calendar-dayrow">
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-0" id="day2019_01_28">
                    <a href="#" class="ajax-load-link">28</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-1" id="day2019_01_29">
                    <a href="#" class="ajax-load-link">29</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-2" id="day2019_01_30">
                    <a href="#" class="ajax-load-link">30</a>
                </td>
                <td class="thismonth viewrange periodday hasEvents inFilter" headers="heading-3" id="day2019_01_31">
                    <a href="#" class="ajax-load-link">31</a>
                </td>
                <td class="fillday outperiodday hasEvents NotInFilter" headers="heading-4" id="day2019_02_01">
                    <a href="#" class="ajax-load-link">01</a>
                </td>
                <td class="fillday outperiodday" headers="heading-5" id="day2019_02_02">
                    <span>02</span>
                </td>
                <td class="fillday outperiodday" headers="heading-6" id="day2019_02_03">
                    <span>03</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
/* No context defined for this component. */
  • Content: 
    .calendar-mini-view {

	&-table {
		margin-bottom: px-to-em(10, 16);
		
		thead {

			tr {
				background: $light-grey;
				color: $text-black;

				&:first-child, &:nth-child(even) {
					background: $light-grey;
					color: $text-black;
				}

				a {

					i {
						position: relative;
						top: 3px;
					}
				}
			}
		}

		tr {
			border-bottom: 1px dashed $dark-grey;

			&:nth-child(even) {
				background: $white;
			}
		}

		th, td {
			text-align: center;
			padding: 0;
			width: calc(100%/7);
			line-height: 2.5em;
			border-right: 1px dashed $dark-grey;

			a {
				@include disable-underlines;
				display: block;
			}
		}

		td {

			&.hasEvents {

				a {
					background: $primary-blue;
					color: $white;
					transition: background-color 0.15s $default-animation-curve;

					&:hover {
						background: darken($primary-blue, 10%);
					}
				}

				&.outperiodday {
					opacity: 0.5;
				}
			}

			&.fillday {
				color: $mid-grey;
			}
		}

		.prev-next-link {
			@include hide-offscreen;
		}
	}
}
  • URL: /components/raw/calendar-mini-view/calendar-mini-view.scss
  • Filesystem Path: components/components/calendar/calendar-mini-view/calendar-mini-view.scss
  • Size: 1 KB

Calendar mini view

Used with T4 event calendar module