Svelte — календарь

Admin Svelte

Делаем календарь на Svelte.

Введение

Для svelte есть замечательный календарь.

Официальный сайт:
github.com

Календарь будет выглядеть так. Кнопка:

По которой красиво развернется календарь:

Установка

Устанавливаем:

npm i -D svelte-calendar

Дополнительно установим модуль dayjs. Он не обязателен, но с ним удобнее представлять даты в правильных языковых форматах.

npm install dayjs --save

Настройка

import Datepicker from 'svelte-calendar';

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, будет экспортированной переменной, чтобы с ней можно было работать за пределами этого файла.

Дальше выведем наш календарь со своей собственной кнопкой.

<div class="calendar">
    <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>
Параметр weekStart={1} — это начало дня недели. По умолчанию день недели в календаре начинается с воскресенье. Почти отчаялся искать как перевести его на понедельник, пришлось лезть в код и изучать. В документации об этом или не посчитали важным сообщить или забыил.

Свою кнопку можно не выводить, тогда формат будет без закрывающегося тега и без кнопки:

<div class="calendar">
    <Datepicker
            start={fiveYearsInPast}
            daysOfWeek={daysOfWeek}
            monthsOfYear={monthsOfYear}
            bind:formattedSelected={selectedDate}
            bind:dateChosen={userHasChosenDate}
    />
</div>

Дополнительные настройки для календаря внутри Datepicker:

<Datepicker
bind:selected={selectedDate}
start={threeDaysInPast}
end={inThirtyDays}
selectableCallback={filterWeekends}
/>

А также стили внутри блока:

<Datepicker
buttonBackgroundColor='#e20074'
buttonTextColor='white'
highlightColor='#e20074'
dayBackgroundColor='#efefef'
dayTextColor='#333'
dayHighlightedBackgroundColor='#e20074'
dayHighlightedTextColor='#fff'
/>

Формат даты вместо кнопки переменной currentDate:

<Datepicker
format={date => dayjs(date).format('DD/MM/YYYY')}
/>

Даты, вместо dayjs.locale(‘ru’):

<Datepicker
format={date => dayjs(date).locale('ru').format('DD MMMM YYYY, dddd')}
/>

Стили:

<style lang="scss">
    .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>

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — календарь"