Делаем календарь на Svelte.
Введение
Для svelte есть замечательный календарь.
Официальный сайт:
github.com
Календарь будет выглядеть так. Кнопка:
По которой красиво развернется календарь:
Установка
Устанавливаем:
Дополнительно установим модуль dayjs. Он не обязателен, но с ним удобнее представлять даты в правильных языковых форматах.
Настройка
import dayjs from 'dayjs'
import 'dayjs/locale/ru'
dayjs.locale('ru')
const daysOfWeek = [
['Воскресенье', 'Вс'],
['Понедельник', 'Пн'],
['Вторник', 'Вт'],
['Среда', 'Ср'],
['Четверг', 'Чт'],
['Пятница', 'Пт'],
['Суббота', 'Сб'],
];
const monthsOfYear = [
['Январь', 'Янв'],
['Февраль', 'Фев'],
['Март', 'Мар'],
['Апрель', 'Апр'],
['Май', 'Май'],
['Июнь', 'Июн'],
['Июль', 'Июл'],
['Август', 'Авг'],
['Сентябрь', 'Сен'],
['Октябрь', 'Окт'],
['Ноябрь', 'Ноя'],
['Декабрь', 'Дек'],
];
// Начало календаря - отматываем 5 лет назад
let fiveYearsInPast = new Date(new Date().setFullYear(new Date().getFullYear() - 5))
// Выбранная дата
export let selectedDate
// Истина или ложь - выбрал ли пользователь дату
export let userHasChosenDate
$: currentDate = dayjs(selectedDate).format('DD MMMM YYYY, dddd')
У нас есть переменная currentDate — это наша кнопка. В ней будет меняться дата, когда мы будем выбирать её в календаре.
Сама дата, переменная selectedDate, будет экспортированной переменной, чтобы с ней можно было работать за пределами этого файла.
Дальше выведем наш календарь со своей собственной кнопкой.
<Datepicker
start={fiveYearsInPast}
daysOfWeek={daysOfWeek}
monthsOfYear={monthsOfYear}
weekStart={1}
bind:formattedSelected={selectedDate}
bind:dateChosen={userHasChosenDate}
>
<button class='calendar-button'>
{#if userHasChosenDate}
{currentDate}
{:else}
Отсортировать по дате
{/if}
</button>
</Datepicker>
</div>
Свою кнопку можно не выводить, тогда формат будет без закрывающегося тега и без кнопки:
<Datepicker
start={fiveYearsInPast}
daysOfWeek={daysOfWeek}
monthsOfYear={monthsOfYear}
bind:formattedSelected={selectedDate}
bind:dateChosen={userHasChosenDate}
/>
</div>
Дополнительные настройки для календаря внутри Datepicker:
bind:selected={selectedDate}
start={threeDaysInPast}
end={inThirtyDays}
selectableCallback={filterWeekends}
/>
А также стили внутри блока:
buttonBackgroundColor='#e20074'
buttonTextColor='white'
highlightColor='#e20074'
dayBackgroundColor='#efefef'
dayTextColor='#333'
dayHighlightedBackgroundColor='#e20074'
dayHighlightedTextColor='#fff'
/>
Формат даты вместо кнопки переменной currentDate:
format={date => dayjs(date).format('DD/MM/YYYY')}
/>
Даты, вместо dayjs.locale(‘ru’):
format={date => dayjs(date).locale('ru').format('DD MMMM YYYY, dddd')}
/>
Стили:
.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>
