Svelte – calendar
Making a calendar on Svelte.
Introduction
There is a wonderful calendar for svelte.
Official site:
github.com
The calendar will look like this. Button:
According to which the calendar will unfold beautifully:
Installation
Install:
Additionally, let’s install the dayjs module. It is optional, but it makes it easier to represent dates in correct language formats.
Customization
import dayjs from ‘dayjs’
import ‘dayjs / locale / ru’
dayjs.locale(‘ru’)
const daysOfWeek = [
[‘Воскресенье’, ‘Вс’],
[‘Понедельник’, ‘Пн’],
[‘Вторник’, ‘Вт’],
[‘Среда’, ‘Ср’],
[‘Четверг’, ‘Чт’],
[‘Пятница’, ‘Пт’],
[‘Суббота’, ‘Сб’],
];
const monthsOfYear = [
[‘Январь’, ‘Янв’],
[‘Февраль’, ‘Фев’],
[‘Март’, ‘Мар’],
[‘Апрель’, ‘Апр’],
[‘Май’, ‘Май’],
[‘Июнь’, ‘Июн’],
[‘Июль’, ‘Июл’],
[‘Август’, ‘Авг’],
[‘Сентябрь’, ‘Сен’],
[‘Октябрь’, ‘Окт’],
[‘Ноябрь’, ‘Ноя’],
[‘Декабрь’, ‘Дек’],
];
// Start of the calendar – rewind 5 years ago
let fiveYearsInPast = new Date(new Date()…setFullYear(new Date()…getFullYear() – five))
// Selected date
export let selectedDate
// True or False – whether the user chose a date
export let userHasChosenDate
$: currentDate = dayjs(selectedDate)…format(‘DD MMMM YYYY, dddd’)
We have a variable currentDate Is our button. The date will change in it when we select it in the calendar.
Date itself, variable selectedDate, will be the exported variable so that you can work with it outside of this file.
Next, we will display our calendar with its own button.
<div class=“calendar”>
<Datepicker
start={fiveYearsInPast}
daysOfWeek={daysOfWeek}
monthsOfYear={monthsOfYear}
weekStart={one}
bind:formattedSelected={selectedDate}
bind:dateChosen={userHasChosenDate}
>
<button class=‘calendar-button’>
{#if userHasChosenDate}
{currentDate}
{:else}
Sort by date
{/if}
button>
Datepicker>
div>
Parameter weekStart = {1} – this is the beginning of the day of the week. By default, the day of the week in the calendar starts on Sunday. I almost despaired of looking for how to translate it to Monday, I had to go into the code and study. In the documentation, they either did not consider it important to inform or forgot about it.
You don’t have to display your button, then the format will be without a closing tag and without a button:
<div class=“calendar”>
<Datepicker
start={fiveYearsInPast}
daysOfWeek={daysOfWeek}
monthsOfYear={monthsOfYear}
bind:formattedSelected={selectedDate}
bind:dateChosen={userHasChosenDate}
/>
div>
Additional settings for the calendar inside Datepicker:
<Datepicker
bind:selected={selectedDate}
start={threeDaysInPast}
end={inThirtyDays}
selectableCallback={filterWeekends}
/>
And also the styles inside the block:
<Datepicker
buttonBackgroundColor=‘# e20074’
buttonTextColor=‘white’
highlightColor=‘# e20074’
dayBackgroundColor=‘#efefef’
dayTextColor=‘# 333’
dayHighlightedBackgroundColor=‘# e20074’
dayHighlightedTextColor=‘#fff’
/>
Date format instead of variable button currentDate:
<Datepicker
format={date => dayjs(date)…format(‘DD / MM / YYYY’)}
/>
Dates, instead of dayjs.locale (‘ru’):
<Datepicker
format={date => dayjs(date)…locale(‘ru’)…format(‘DD MMMM YYYY, dddd’)}
/>
Styles:
…calendar {
margin: 20px 0;
text–align: center;
}
…calendar–button {
box–sizing: inherit;
padding: 10px 20px;
border: 1px solid var(–button–border–color);
display: block;
text–align: center;
width: 300px;
text–decoration: none;
cursor: pointer;
background: var(–button–background–color);
color: var(–button–text–color);
border–radius: 7px;
box–shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
style>
