EvoToolkit - v3.7.2 (Changelog)

Calendar

Calendar widget for use either on its own or a mix with another component. When a date is chosen, data attributes on the base elements are updated, and a change event is fired which also contains this data.

Source

Contributors

Luke Harrison
  • Overview
  • Methods
  • Events
  • Theming

Table of contents

Base

Modifiers

Base

Standard

Standard calendar.

Mon Tue Wed Thu Fri Sat Sun
<div class='c-calendar'>
	<div class="o-box u-p-small">
		<div class='o-layout u-flex-middle o-layout--flush c-calendar__buttons'>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
			<div class='o-layout__item c-calendar__month-label'>
				<div class='c-calendar__label'>
					<span class='c-calendar__label-day'></span>
					<span class='c-calendar__label-month'></span>
					<span class='c-calendar__label-year'></span>
				</div>
			</div>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--next' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
		</div>
	</div>
	<table class='c-calendar__main'>
		<thead>
			<tr>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>Sat</th>
				<th>Sun</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

Time

A calendar with extra fields to specify a time.

Mon Tue Wed Thu Fri Sat Sun
<div class="c-calendar">
	<div class="o-box u-p-small">
		<div class="o-layout u-flex-middle o-layout--flush c-calendar__buttons">
			<div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev" tabindex="0">
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
			<div class="o-layout__item c-calendar__month-label">
				<div class="c-calendar__label">
					<span class="c-calendar__label-day"></span>
					<span class="c-calendar__label-month"></span>
					<span class="c-calendar__label-year"></span>
				</div>
			</div>
			<div class="o-layout__item u-width-shrink c-calendar__button c-calendar__button--next" tabindex="0">
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
		</div>
	</div>
	<div class="o-box u-p-micro u-p-small@sm2 c-box c-box--border c-calendar__time">
		<div class="o-layout">
			<div class="o-layout__item">
				<div class="c-input c-input--left-label c-input--disable-state-inheritance">
					<label class="c-type-foxtrot c-input__label" for="hours-field">Hours</label>
					<div class="c-input__wrapper">
						<select id="hours-field" name="hours" class="c-input__field c-calendar__hours">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>
							<option value="25">25</option>
						</select>
						<svg class="c-input__arrow"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
					</div>
				</div>
			</div>
			<div class="o-layout__item">
				<div class="c-input c-input--left-label c-input--disable-state-inheritance">
					<label class="c-type-foxtrot c-input__label" for="minutes-field">Minutes</label>
					<div class="c-input__wrapper">
						<select id="minutes-field" name="minutes" class="c-input__field c-calendar__minutes">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>
							<option value="25">25</option>
							<option value="26">26</option>
							<option value="27">27</option>
							<option value="28">28</option>
							<option value="29">29</option>
							<option value="30">30</option>
							<option value="31">31</option>
							<option value="32">32</option>
							<option value="33">33</option>
							<option value="34">34</option>
							<option value="35">35</option>
							<option value="36">36</option>
							<option value="37">37</option>
							<option value="38">38</option>
							<option value="39">39</option>
							<option value="40">40</option>
							<option value="41">41</option>
							<option value="42">42</option>
							<option value="43">43</option>
							<option value="44">44</option>
							<option value="45">45</option>
							<option value="46">46</option>
							<option value="47">47</option>
							<option value="48">48</option>
							<option value="49">49</option>
							<option value="50">50</option>
							<option value="51">51</option>
							<option value="52">52</option>
							<option value="53">53</option>
							<option value="54">54</option>
							<option value="55">55</option>
							<option value="56">56</option>
							<option value="57">57</option>
							<option value="58">58</option>
							<option value="59">59</option>
							<option value="60">60</option>
						</select>
						<svg class="c-input__arrow"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
					</div>
				</div>
			</div>
		</div>
	</div>
	<table class="c-calendar__main">
		<thead>
			<tr>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>Sat</th>
				<th>Sun</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

Modifiers

A list of modifiers for the calendar component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Small

This modifier makes some of the calendar elements smaller. Use to keep everything in proportion when the calendar itself is small.

Mon Tue Wed Thu Fri Sat Sun
<div class='c-calendar c-calendar--small'>
	<div class="o-box u-p-small">
		<div class='o-layout u-flex-middle o-layout--flush c-calendar__buttons'>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
			<div class='o-layout__item c-calendar__month-label'>
				<div class='c-calendar__label'>
					<span class='c-calendar__label-day'></span>
					<span class='c-calendar__label-month'></span>
					<span class='c-calendar__label-year'></span>
				</div>
			</div>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--next' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
		</div>
	</div>
	<table class='c-calendar__main'>
		<thead>
			<tr>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>Sat</th>
				<th>Sun</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

Large

This modifier makes some of the calendar elements larger. Use to keep everything in proportion when the calendar itself is large.

Mon Tue Wed Thu Fri Sat Sun
<div class='c-calendar c-calendar--large'>
	<div class="o-box u-p-small">
		<div class='o-layout u-flex-middle o-layout--flush c-calendar__buttons'>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--prev' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
			<div class='o-layout__item c-calendar__month-label'>
				<div class='c-calendar__label'>
					<span class='c-calendar__label-day'></span>
					<span class='c-calendar__label-month'></span>
					<span class='c-calendar__label-year'></span>
				</div>
			</div>
			<div class='o-layout__item u-width-shrink c-calendar__button c-calendar__button--next' tabindex='0'>
				<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
			</div>
		</div>
	</div>
	<table class='c-calendar__main'>
		<thead>
			<tr>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>Sat</th>
				<th>Sun</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

setDate

You can programatically change the calendar date using the setDate method. The minimum data required is year, so you don't have to pass a month or day value unless you need to.


												// Would set the calendar's date to 30/09/2021 04:30
evo('.js-my-calendar-class').calendar('setDate', {
	day: 30,
	month: 9,
	year: 2021,
	hour: 4,
	minute: 30
})

// Would set the calendar's date to 30/09/2021
evo('.js-my-calendar-class').calendar('setDate', {
	day: 30,
	month: 9,
	year: 2021
})

// Would set the calendar's date to 01/09/2021
evo('.js-my-calendar-class').calendar('setDate', {
	month: 9,
	year: 2021,
})

// Would set the calendar's date to 01/01/2021
evo('.js-my-calendar-class').calendar('setDate', {
	year: 2021
})

											

nextMonth

With the nextMonth method, you can cycle the calendar 1 month forward.


												evo('.js-my-calendar-class').calendar('nextMonth');

											

prevMonth

With the prevMonth method, you can cycle the calendar 1 month backwards.


												evo('.js-my-calendar-class').calendar('prevMonth');

											

This component has bespoke events which trigger automatically on certain actions. You can hook into these using event listeners to run your own custom code.

Typically, most events are fired from the block level class (eg:- c-tabs), however some may fire from element level classes (eg:- c-tabs__item). In practice, this usually doesn't matter as these element level events will bubble upwards and trigger any listeners on the block element. When this happens, you can get a reference to the element via the target property of the event object.

Events List

Name Description

change

Fires when a new date is selected. details object contains the new date object.

monthChange

Fires when the month changes. details object contains new month in text and integer form, and also year.

nextMonth

Fires when the month cycles forward. details object contains new month in text and integer form, and also year.

prevMonth

Fires when the month cycles backwards. details object contains new month in text and integer form, and also year.

Example code snippet showing how you can set up an event listener.


const element = document.querySelector('.c-my-component');
element.addEventListener('eventName', (e) => {
	console.log('my event has fired');
	// Access event details object, if it exists
	console.log(e.details);
	// Access the element the event was fired from
	console.log(e.target);
});
							

You can theme the calendar component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-calendar-button-color primary
$component-calendar-border-color light
$component-calendar-prevnextmonth-cell-color very-light
$component-calendar-cell-selected primary