Calendar
<ef-calendar></ef-calendar> <ef-calendar range values="2020-04-01,2020-04-21"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
The Calendar control allows switching days, months and years.
Custom content can be added using the footer slot
Setting the date
The initial value of the calendar can be set using the value property. Value must be provided in yyyy-MM-dd format, for instance: "2020-04-21".
<ef-calendar value="2020-04-21"></ef-calendar>
<ef-calendar value="2020-04-21"></ef-calendar>Defining the view
By default, the calendar will show the current month.
This can be customized using view and it must be in yyyy-dd format, e.g. "2020-04".
<ef-calendar></ef-calendar> <ef-calendar view="2020-04"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
<ef-calendar view="2020-04"></ef-calendar>Defining min and max values
You can restrict the available date range by passing in min and max values.
<ef-calendar min="1990-01-05" view="1990-01"></ef-calendar> <ef-calendar max="2100-12-25" view="2100-12"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
<ef-calendar min="1990-01-05" view="1990-01"></ef-calendar>
<ef-calendar max="2100-12-25" view="2100-12"></ef-calendar>Multiple select
You can switch the calendar to multiple select mode by setting multiple.
<ef-calendar multiple></ef-calendar> <ef-calendar multiple values="2020-04-01,2020-04-11,2020-04-21"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
<ef-calendar multiple></ef-calendar>
<ef-calendar multiple values="2020-04-01,2020-04-11,2020-04-21"></ef-calendar>Range select
You can switch the calendar to range select mode by setting range. You cannot have multiple ranges.
<ef-calendar range></ef-calendar> <ef-calendar range values="2020-04-01,2020-04-21"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
<ef-calendar range></ef-calendar>
<ef-calendar range values="2020-04-01,2020-04-21"></ef-calendar>Filtering dates
ef-calendar has two internal filtering options. One for enabling weekdays only and another for only enabling weekends.
These are basic filters. More complex ones can be added using the filter option.
<ef-calendar weekdays-only></ef-calendar> <ef-calendar weekends-only></ef-calendar> <ef-calendar id="custom-filter"></ef-calendar>
var el = document.getElementById('custom-filter');
el.filter = function(value) {
var date = new Date(value);
return date.getDate() % 2; // odd dates only
};
ef-calendar {
margin-right: 20px;
}
<ef-calendar weekdays-only></ef-calendar>
<ef-calendar weekends-only></ef-calendar>
<ef-calendar id="custom-filter"></ef-calendar>
<script>
var el = document.getElementById('custom-filter');
el.filter = function (value) {
var date = new Date(value);
return date.getDate() % 2; // odd dates only
};
</script>Setting locale
By default the calendar uses system default locale (or US English if undefined). You can change the locale by setting the lang attribute either globally or locally.
The first day of the week is defined by the locale. You can override this by setting first-day-of-week.
<ef-calendar lang="th" value="2019-05-21"></ef-calendar> <ef-calendar first-day-of-week="3" value="2019-05-21"></ef-calendar>
ef-calendar {
margin-right: 20px;
}
<ef-calendar lang="th" value="2019-05-21"></ef-calendar>
<ef-calendar first-day-of-week="3" value="2019-05-21"></ef-calendar>Adding Footer Content
The calendar supports adding footer content. This can be used to give information about the date entry, or to provide additional controls like 'reset'.
<ef-calendar>
<div slot="footer">
<span>Hey there 👋</span>
<a href="javascript:reset()">Reset</a>
</div>
</ef-calendar>
var el = document.querySelector('ef-calendar');
function reset() {
el.value = el.view = '';
}
div {
display: flex;
align-items: center;
justify-content: space-between;
}
<ef-calendar>
<div slot="footer">
<span>Hey there 👋</span>
<a href="javascript:reset()">Reset</a>
</div>
</ef-calendar>