Skip to main content

Календар

Календар — це сенсорний оптимізований компонент, який забезпечує простий спосіб обробки дат. Календар можна використовувати як вбудований компонент або як накладання. Накладений календар буде автоматично перетворено на Popover на планшетах (iPad).

Методи застосунку Календар

Розгляньмо пов’язані методи роботи застосунку Календар:
app.calendar.create(parameters)- створити екземпляр календаря.

parameters - object. Об'єкт з календарними параметрами

Метод повертає створений екземпляр календаря
app.calendar.destroy(el)- знищити екземпляр календаря

el - HTMLElement or string . (за допомогою селектора CSS) або об’єкта. Елемент календаря або екземпляр календаря для знищення.

app.calendar.get(el)- отримати екземпляр календаря за елементом HTML

el - HTMLElement or string (за допомогою селектора CSS). Елемент календаря

Метод повертає екземпляр календаря
app.calendar.close(el)- закрити Календар

el - HTMLElement or string Елемент календаря для закриття

Метод повертає екземпляр календаря

Наприклад:

var calendar = app.calendar.create({
    inputEl: '#calendar-input'
});

Параметри календаря

Давайте подивимося на список усіх доступних параметрів Календаря:
ПараметрОписТип
locale
Мова календаря. Має бути правильна мова, яку приймає Intl.DateTimeFormat. Якщо не вказано (за замовчуванням), використовуватиметься мова браузера. наприклад en-US, ru, en, en-US-u-ca-buddhist тощо.
string
value
Масив із початковими вибраними датами. Кожен елемент масиву представляє вибрану дату
array
disabled
Додаткові вимкнені дати. Параметр приймає так званий діапазон дат Date Range (подробиці див. нижче)
Data range

ПараметрОписТип
events
Дати з подіями. У календарному дні буде позначено додатковою «крапкою». Параметр приймає так званий діапазон дат Date Range (подробиці див. нижче).

Якщо ви хочете вказати, що день має кілька різних подій, це можна вказати кількома різними кольоровими крапками. У цьому випадку вам потрібно передати діапазон дат як масив, де кожен об’єкт матиме властивості дати та кольору,

Наприклад:
Date Range
[
  {
    date: new Date(2018, 4, 11),
    color: '#2196f3',
  },
  // same date but different color, one more dot will be added to this day
  {
    date: new Date(2018, 4, 11),
    color: '#4caf50',
  },
]

ПараметрЗа замовчуваннямОписТип
rangesClasses
Діапазони дат, у які потрібно додати спеціальний клас CSS для додаткового стилю. Перегляньте прийнятний формат нижче
array
formatValue
Функція для форматування вхідного значення має повертати нове/відформатоване значення рядка. значення – це масив, де кожен елемент представляє вибрану дату. Може використовуватися замість параметра dateFormat для вказівки спеціального форматування
function

(values)

monthNames
auto
Масив із повними назвами місяців. Якщо автоматично auto, відображатимуться назви місяців на основі вказаної мови locale(або мови браузера)
array
monthNamesShort
auto
Масив із короткими назвами місяців. Якщо автоматично, auto відображатимуться назви місяців на основі вказаної мови locale(або мови браузера)
array
dayNames
auto
Масив із назвами днів тижня. Якщо автоматично, auto відображатимуться назви днів на основі вказаної мови locale(або мови браузера)
array
dayNamesShort
auto
Масив із короткими назвами днів тижня. Якщо автоматично, auto відображатимуться назви днів на основі вказаної мови locale(або мови браузера)
array
firstDay
1
Перший день тижня. За замовчуванням 1 - понеділок
number
weekendDays
[0, 6]
Масив з індексом вихідних днів, за замовчуванням це субота та неділя
array
dateFormat
undefined
Якщо не визначено, він використовуватиме формат на основі мови locale (або мови браузера).

Може прийняти значення Intl.DateTimeFormat.options.

Наприклад{ month: 'long', day: 'numeric' }.

Або ви можете передати рядок зі спеціальними маркерами, доступними виразами:

● yyyy - 4 цифри року

● yy - 2 цифри року

● mm - 2 цифри номера місяця, від 01 до 12

● m - число місяця від 1 до 12

● MM - повна назва місяця

● M - коротка назва місяця

● dd - Двозначний номер дня, від 01 до 31

● d - номер дня, від 1 до 31

● DD -повна назва дня тижня

● D - коротка назва дня тижня

Наступні додаткові вирази часу доступні, якщо ввімкнено timePicker:

● HH - 24-годинний формат 2 цифри годин (00 - 23)

● H - 24-годинний формат годин (0 - 23)

● hh - 12-годинний формат 2 цифри годин (00 - 12)

● h - 12-годинний формат годин (0 - 12)

● :mm - 2 цифри хвилин (00 - 59)

● :m - хвилин (0 - 59)

● ss - 2 цифри секунд (00 - 59)

● s -секунди (0 - 59)

● A - верхній регістр post або ante meridiem (PM або AM)

● a - нижній регістр post or ante meridiem (pm or am)

string

object

multiple
false
Увімкніть, щоб дозволити вибрати кілька дат/значень
boolean
rangePicker
false
Щоб увімкнути засіб вибору діапазону. Несумісний з кількома датами multiple
boolean
rangePickerMinDays
1
Мінімальна кількість днів, які потрібно вибрати, коли ввімкнено RangPicker
number
rangePickerMaxDays
0
Максимальна кількість днів, яку можна вибрати, коли ввімкнено RangPicker.

"0" означає відсутність максимуму

number
direction
'horizontal'
Напрямок розташування місяців, може бути «горизонтальним» або «вертикальним»
string
minDate
null
Мінімальна дозволена дата
date
maxDate
null
Максимально допустима дата
date
touchMove
true
Якщо ввімкнено, слайди календарних місяців слідують за пальцем під час переміщення дотиком
boolean
animate
true
Дозволяє переходити між місяцями
boolean
closeOnSelect
false
Увімкніть, і календар буде закрито, коли користувач вибере дату
boolean
weekHeader
true
Увімкнути заголовок тижня з короткою назвою днів тижня
boolean
monthSelector
true
Увімкнути селектор місяця на панелі інструментів
boolean
monthPicker
true
Вмикає засіб вибору місяця для вибору місяця, якщо натиснути кнопку вибору місяця на панелі інструментів
boolean
yearSelector
true
Увімкнути засіб вибору року на панелі інструментів
boolean
yearPicker
true
Дозволяє засобу вибору року вибирати рік, якщо натиснути кнопку вибору року на панелі інструментів
boolean
yearPickerMin
Мінімальний доступний рік для вибору року, за умовчанням сьогодні мінус 100 років
number
yearPickerMax
Максимальний доступний рік для вибору року, за умовчанням сьогодні плюс 100 років
number
timePicker
false
Вмикає засіб вибору часу.
boolean
timePickerFormat
{hour: 'numeric',

minute: 'numeric'}

Формат часу, який відображається в селекторі часу. Може приймати Intl.DateTimeFormat.options

AM/PM формат залежить від вибраної зазначеної мови locale або від мови браузера, якщо не вказано

object
timePickerPlaceholder
Select time
Текст для відображення в заповнювачі вибору часу.
string

Container/opener- специфічні параметри

ПараметрЗа замовчуваннямОписТип
containerEl
Рядок із селектором CSS або HTMLElement, де розмістити згенерований HTML-код календаря. Використовуйте лише для вбудованого календаря inline calendar
string

HTMLElement

openIn
auto
Може бути auto, popover (для відкриття календаря у спливному вікні), sheet (для відкриття в режимі аркуша) або customModal (для відкриття в спеціальному модальному накладенні календаря). У разі автоматичного auto відкривання в режимі аркуша на малих екранах і у спливному вікні на великих екранах.
string
sheetPush
false
Вмикає аркуш календаря, щоб відкривати перегляди позаду
boolean
sheetSwipeToClose
undefined
Дозволяє закривати аркуш календаря за допомогою пальця. Якщо не вказано, він успадковує параметр Sheet swipeToClose застосунку.
boolean
inputEl
Рядок із селектором CSS або HTMLElement із відповідним елементом введення
string or HTMLElement
scrollToInput
true
Прокрутіть вікно перегляду (вміст сторінки page content), щоб ввести, коли календар відкрито
boolean
inputReadOnly
true
Встановлює атрибут "лише для читання" для вказаного введення
boolean
cssClass
Додаткове ім’я класу CSS для елемента календаря
string
closeByOutsideClick
true
Якщо ввімкнено, засіб вибору буде закрито, клацнувши за межами засобу вибору або пов’язаного елемента введення
boolean
toolbar
true
Вмикає панель інструментів календаря
boolean
toolbarCloseText
Done
Текст для кнопки панелі інструментів «Готово/Закрити». Done/Close
string
header
false
Вмикає заголовок календаря
boolean
headerPlaceholder
Select date
Текст заповнювача заголовка календаря за умовчанням
string
routableModals
false
Відкритий календар буде додано до історії маршрутизатора, що дає можливість закрити календар, повернувшись до історії маршрутизатора та встановити поточний маршрут у режимі календаря
boolean
url
date/
Модальна URL-адреса календаря, яку буде встановлено як поточний маршрут
string
view
Перегляньте, де встановити маршрутизацію, коли ввімкнено routableModals За замовчуванням використовується батьківський перегляд inputEl або головний перегляд, якщо не знайдено батьківський перегляд
object
backdrop
Вмикає фон календаря (темний напівпрозорий шар ззаду). За замовчуванням увімкнено, лише коли календар відкривається в Popover.
boolean
closeByBackdropClick
true
Якщо ввімкнено, календар закриватиметься після натискання на фоні
boolean

Функції візуалізації

ПараметрОписТип
renderWeekHeader
Функція відтворення заголовка тижня. Має повертати HTML-рядок заголовка тижня
function
renderMonths
Функція відтворення обгортки місяців. Має повертати повний HTML-рядок контейнера місяців
function(date)
renderMonth
Функція відображення одного місяця. Має повертати рядок HTML за один місяць
function(date, offset)
renderMonthSelector
Функція візуалізації вибору місяця. Має повертати HTML-рядок селектора місяця
function
renderYearSelector
Функція візуалізації вибору року. Має повертати HTML-рядок селектора року
function
renderHeader
Функція для візуалізації заголовка календаря. Має повертати HTML-рядок заголовка календаря
function
renderToolbar
Функція візуалізації панелі інструментів. Необхідно повернути рядок HTML панелі інструментів
function
render
Функція відтворення всього календаря. Має повернути повний рядок HTML календаря
function

Події

ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var calendar = app.calendar.create({
  ...
  on: {
    opened: function () {
      console.log('Calendar opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку у властивості календаря, щоб установити значення за замовчуванням для всіх календарів. Наприклад:
var app = new Techno4({
  calendar: {
    url: 'calendar/',
    dateFormat: 'dd.mm.yyyy',
  }
});

Проміжок часу

Деякі параметри календаря (вимкнено disabled, події events та діапазони класів rangesClasses) приймають так званий діапазон дат. Це простий спосіб вказати та охопити всі можливі комбінації дат.

Це може бути масив із датами, наприклад:

var calendar = app.calendar.create({
    ...
    // Disabled 10th November 2015 and 11th November 2015:
    disabled: [new Date(2015, 10, 10), new Date(2015, 10, 11)],
    ...
});
Це може бути спеціальна функція, де вам потрібно повернути true або false:
var calendar = app.calendar.create({
    ...
    //Disabled all dates in November 2015
    disabled: function (date) {
        if (date.getFullYear() === 2015 && date.getMonth() === 10) {
            return true;
        }
        else {
            return false;
        }
    },
    ...
});
Або об’єкт із властивостями from i to:
var calendar = app.calendar.create({
    ...
    //Disable all dates between 1st October 2015 and 31 December 2015
    disabled: {
        from: new Date(2015, 9, 1),
        to: new Date(2015, 11, 31)
    },
    ...
});
Або об’єкт із властивостями лишеfrom або to:
var calendar = app.calendar.create({
    ...
    //Disable everyting since December 2015
    disabled: {
        from: new Date(2015, 11, 1)
    },
    ...
});
Або об'єкт із властивістю data:
var calendar = app.calendar.create({
    ...
    // Disabled 1th December 2015
    disabled: {
        date: new Date(2015, 11, 1)
    },
    ...
});
Або масив зі змішаними датами та об’єктами:
var calendar = app.calendar.create({
    ...
    events: [
        new Date(2015, 9, 1),
        new Date(2015, 9, 5),
        {
            from: new Date(2015, 9, 10),
            to: new Date(2015, 9, 15)
        },
        {
            from: new Date(2015, 9, 20),
            to: new Date(2015, 9, 31)
        },
        {
            date: new Date(2015, 11, 1),
            color: '#ff0000'
        },
        // same date but one more color dot will be added
        {
            date: new Date(2015, 11, 1),
            color: '#00ff00'
        },
    ],
    ...
});

Класи діапазонів

rangesClasses параметр приймає масив об’єктів із діапазоном дат і іменами класів для цього діапазону:
var calendar = app.calendar.create({
    ...
    //Add classes for november and october
    rangesClasses: [
        //Add "day-october' class for all october dates
        {
            // string CSS class name for this range in "cssClass" property
            cssClass: 'day-october', //string CSS class
            // Date Range in "range" property
            range: function (date) {
                return date.getMonth() === 9
            }
        },
        //Add "day-holiday" class for 1-10th January 2016
        {
            cssClass: 'day-holiday',
            range: {
                from: new Date(2016, 0, 1),
                to: new Date(2016, 0, 10)
            }
        }
    ],
    ...
});

Методи та властивості календаря

Після ініціалізації Календаря ми маємо його ініціалізований екземпляр у змінній (наприклад, змінну calendar у прикладах вище) з корисними методами та властивостями:

Властивості

Властивість Опис
calendar.app
Посилання на глобальний екземпляр застосунку
calendar.containerEl
Елемент HTML контейнера для обгортання календаря (коли використовується вбудований inline календар)
calendar.$containerEl
Екземпляр Dom7 з HTML-елементом контейнера для упаковки календаря (коли використовується вбудований календар)
calendar.el
Елемент HTML календаря
calendar.$el
Екземпляр Dom7 з елементом HTML календаря
calendar.inputEl
Вхідний елемент HTML календаря (передається в параметрі inputEl)
calendar.$inputEl
Екземпляр Dom7 з HTML-елементом введення календаря (передається в параметрі inputEl)
calendar.value
Масив, де кожен елемент представляє вибрану дату
calendar.currentMonth
Перегляд календаря поточного місяця. Число від 0 до 11
calendar.currentYear
Перегляд календаря поточного року. Число, наприклад "2023"
calendar.opened
true якщо Календар наразі відкрито
calendar.inline
true коли використовується вбудований календар
calendar.cols
Масив із зазначеними стовпцями календаря. Кожен стовпець також має власні методи та властивості (див. нижче)
calendar.url
URL-адреса календаря (передана в параметрі url)
calendar.view
Перегляд календаря (переданий у параметрі перегляду view) або знайдений батьківський перегляд
calendar.params
Об'єкт з параметрами ініціалізації
calendar.allowTouchMove
Установіть для цього прапорця значення false, щоб запобігти взаємодії дотику після ініціалізації

Методи

МетодОпис
calendar.setValue(values)
Встановіть нові вибрані дати. значення velues— це масив, де кожен елемент представляє вибрану дату
calendar.getValue()
Повертає поточне календарне значення
calendar.addValue()
Додає значення до масиву значень. Корисно, якщо ввімкнено множинний вибір (з параметром multiple: true)
calendar.update()
Переглядає календар. Корисно, якщо ви динамічно додавали/змінювали значення та потрібно оновити макет календаря
calendar.nextMonth(duration)
Перехід календаря на наступний місяць на вказану тривалість duration у мс
calendar.prevMonth(duration)
Перехід календаря до попереднього місяця на задану тривалістьduration у мс
calendar.nextYear()
Перехід календаря на наступний рік
calendar.prevYear()
Перехід календаря на попередній рік
calendar.setYearMonth(year, month, duration)
Перехід календаря на вказаний рік year, місяць month на задану тривалість duration у мс
calendar.open()
Відкрити календар
calendar.close()
Закрити календар
calendar.destroy()
Знищити екземпляр календаря та видалити всі події
calendar.on(event, handler)
Додати обробник подій
calendar.once(event, handler)
Додати обробник подій, який буде видалено після запуску
calendar.off(event, handler)
Видалити обробник подій
calendar.off(event)
Видалити всі обробники для вказаної події
calendar.emit(event, ...args)
Запустити подію на примірнику

Події в календарі

Календар запускатиме такі події DOM в елементі календаря та події в застосунку та екземплярі календаря:

Події DOM

ПодіяОб'єктОпис
calendar:open
Calendar Element

<div class="calendar">

Подію буде ініційовано, коли Календар почне свою початкову анімацію
calendar:opened
Calendar Element

<div class="calendar">

Подію буде запущено після того, як Календар завершить свою початкову анімацію
calendar:close
Calendar Element

<div class="calendar">

Подію буде ініційовано, коли Календар почне завершувати анімацію
calendar:closed
Calendar Element

<div class="calendar">

Подію буде запущено після завершення анімації закриття Календаря

Події екземплярів застосунку та календаря

Екземпляр Calendar випускає події як у себе, так і в екземплярі застосунку. Події екземпляра застосунку мають однакові назви з префіксом календаря celendar:
ПодіяАргументОписОб'єкт
dayClick
(calendar, dayEl, year, month, day)
Подія буде ініційована після натискання елемента календарного дня
calendar
calendarDayClick
(calendar, dayEl, year, month, day)
Подія буде ініційована після натискання елемента календарного дня
app
change
(calendar, value)
Подія буде ініційована, коли календарне значення зміниться
calendar
calendarChange
(calendar, value)
Подія буде ініційована, коли календарне значення зміниться
app
monthAdd
(calendar, monthEl)
Подія буде ініційована, коли буде додано новий макет HTML місяця. Корисно, якщо вам потрібно постобробити додані елементи html
calendar
calendarMonthAdd
(calendar, monthEl)
Подія буде ініційована, коли буде додано новий макет HTML місяця. Корисно, якщо вам потрібно постобробити додані елементи html
app
monthYearChangeStart
(calendar, year, month)
Подія буде запущена на початку переходу до наступного місяця
calendar
calendarMonthYearChangeStart
(calendar, year, month)
Подія буде запущена на початку переходу до наступного місяця
app
monthYearChangeEnd
(calendar, year, month)
Подію буде запущено після переходу на наступний місяць
calendar
calendarMonthYearChangeEnd
(calendar, year, month)
Подію буде запущено після переходу на наступний місяць
app
init
(calendar)
Подія буде запущена під час ініціалізації календаря
calendar
calendarInit
(calendar)
Подія буде запущена під час ініціалізації календаря
app
open
(calendar)
Подію буде ініційовано, коли Календар почне свою початкову анімацію. В якості аргументу обробник події отримує екземпляр календаря
calendar
calendarOpen
(calendar)
Подію буде ініційовано, коли Календар почне свою початкову анімацію. В якості аргументу обробник події отримує екземпляр календаря
app
opened
(calendar)
Подію буде ініційовано, коли Календар почне свою початкову анімацію. В якості аргументу обробник події отримує екземпляр календаря
calendar
calendarOpened
(calendar)
Подію буде ініційовано, коли Календар почне свою початкову анімацію. В якості аргументу обробник події отримує екземпляр календаря
app
close
(calendar)
Подію буде ініційовано, коли Календар почне завершувати анімацію. В якості аргументу обробник події отримує екземпляр календаря
calendar
calendarClose
(calendar)
Подію буде ініційовано, коли Календар почне завершувати анімацію. В якості аргументу обробник події отримує екземпляр календаря
app
closed
(calendar)
Подію буде запущено після завершення анімації закриття Календаря. В якості аргументу обробник події отримує екземпляр календаря
calendar
calendarClosed
(calendar)
Подію буде запущено після завершення анімації закриття Календаря. В якості аргументу обробник події отримує екземпляр календаря
app
beforeDestroy
(calendar)
Подію буде запущено безпосередньо перед знищенням екземпляра Календаря. В якості аргументу обробник події отримує екземпляр календаря
calendar
calendarBeforeDestroy
(calendar)
Подію буде запущено безпосередньо перед знищенням екземпляра Календаря. В якості аргументу обробник події отримує екземпляр календаря
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-calendar-height: 340px;
  --t4-calendar-sheet-landscape-height: 220px;
  --t4-calendar-popover-width: 320px;
  --t4-calendar-popover-height: 320px;
  --t4-calendar-modal-height: 420px;
  --t4-calendar-modal-max-width: 380px;
  --t4-calendar-modal-border-radius: 4px;
  /*
  --t4-calendar-header-bg-color: var(--t4-bars-bg-color);
  --t4-calendar-header-link-color: var(--t4-bars-link-color);
  --t4-calendar-header-text-color: var(--t4-bars-text-color);
  --t4-calendar-footer-bg-color: var(--t4-bars-bg-color);
  --t4-calendar-footer-border-color: var(--t4-bars-border-color);
  --t4-calendar-footer-link-color: var(--t4-bars-link-color);
  --t4-calendar-footer-text-color: var(--t4-bars-text-color);
  */
  --t4-calendar-week-header-bg-color: transparent;
  --t4-calendar-footer-padding: 0 8px;
  --t4-calendar-week-header-font-size: 11px;
  --t4-calendar-selected-text-color: #fff;
  /*
  --t4-calendar-selected-bg-color:  var(--t4-theme-color);
  */
  --t4-calendar-disabled-text-color: #d4d4d4;
  --t4-calendar-event-dot-size: 4px;
  /*
  --t4-calendar-event-bg-color: var(--t4-theme-color);
  */
  /*
  --t4-calendar-picker-selected-text-color: var(--t4-theme-color);
  */
  --t4-calendar-time-selector-height: 28px;
  --t4-calendar-week-header-text-color: #5e5e5e;
  --t4-calendar-prev-next-text-color: #c8c8c8;
  --t4-calendar-day-text-color: #000;
  --t4-calendar-sheet-bg-color: #fff;
  --t4-calendar-modal-bg-color: #fff;
  --t4-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --t4-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  --t4-calendar-time-selector-bg-color: rgba(0, 0, 0, 0.05);
}
:root .dark,
:root.dark {
  --t4-calendar-week-header-text-color: #aaa;
  --t4-calendar-prev-next-text-color: #5e5e5e;
  --t4-calendar-sheet-border-color: var(--t4-bars-border-color);
  --t4-calendar-modal-bg-color: #121212;
  --t4-calendar-sheet-bg-color: #121212;
  --t4-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --t4-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  --t4-calendar-time-selector-bg-color: rgba(255, 255, 255, 0.1);
}
.ios {
  --t4-calendar-sheet-border-color: #929499;
  --t4-calendar-header-height: 44px;
  --t4-calendar-header-font-size: 17px;
  --t4-calendar-header-font-weight: 600;
  --t4-calendar-header-padding: 0 8px;
  --t4-calendar-footer-height: 44px;
  --t4-calendar-footer-font-size: 17px;
  --t4-calendar-week-header-height: 18px;
  --t4-calendar-day-font-size: 15px;
  --t4-calendar-day-size: 30px;
  --t4-calendar-picker-font-size: 17px;
  --t4-calendar-time-selector-font-size: 17px;
  --t4-calendar-today-text-color: #000;
  --t4-calendar-today-bg-color: #e3e3e3;
}
.ios .dark,
.ios.dark {
  --t4-calendar-day-text-color: #fff;
  --t4-calendar-today-text-color: #fff;
  --t4-calendar-today-bg-color: #333;
}
.md {
  --t4-calendar-sheet-border-color: #ccc;
  --t4-calendar-header-height: 56px;
  --t4-calendar-header-font-size: 20px;
  --t4-calendar-header-font-weight: 400;
  --t4-calendar-header-padding: 0 24px;
  --t4-calendar-footer-height: 48px;
  --t4-calendar-footer-font-size: 14px;
  --t4-calendar-week-header-height: 24px;
  --t4-calendar-day-font-size: 14px;
  /*
  --t4-calendar-today-text-color: var(--t4-theme-color);
  */
  --t4-calendar-today-bg-color: none;
  --t4-calendar-day-size: 32px;
  --t4-calendar-picker-font-size: 14px;
  --t4-calendar-time-selector-font-size: 14px;
}
.md .dark,
.md.dark {
  --t4-calendar-day-text-color: rgba(255, 255, 255, 0.87);
}
.aurora {
  --t4-calendar-sheet-border-color: #ccc;
  --t4-calendar-header-height: 56px;
  --t4-calendar-header-font-size: 18px;
  --t4-calendar-header-font-weight: 600;
  --t4-calendar-header-padding: 0 16px;
  --t4-calendar-footer-height: 48px;
  --t4-calendar-footer-font-size: 14px;
  --t4-calendar-footer-padding: 0 16px;
  --t4-calendar-week-header-height: 24px;
  --t4-calendar-day-font-size: 14px;
  --t4-calendar-day-size: 32px;
  --t4-calendar-picker-font-size: 16px;
  --t4-calendar-time-selector-font-size: 14px;
  --t4-calendar-today-text-color: #000;
  --t4-calendar-today-bg-color: #e3e3e3;
}
.aurora .dark,
.aurora.dark {
  --t4-calendar-day-text-color: #fff;
  --t4-calendar-today-text-color: #fff;
  --t4-calendar-today-bg-color: #333;
}

Приклади :

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Calendar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Default setup</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Your birth date" readonly="readonly" id="demo-calendar-default" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom date format</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-date-format" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Date + Time</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date and time" readonly="readonly"
                    id="demo-calendar-date-time" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Multiple Values</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select multiple dates" readonly="readonly"
                    id="demo-calendar-multiple" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Range Picker</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date range" readonly="readonly" id="demo-calendar-range" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Open in Modal</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-modal" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">With Events</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-events" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Disabled Dates</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-disabled" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Inline with custom toolbar</div>
      <div class="block block-strong no-padding">
        <div id="demo-calendar-inline-container"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $t4, $on }) => {
    let calendarDefault;
    let calendarDateFormat;
    let calendarDateTime;
    let calendarMultiple;
    let calendarRange;
    let calendarModal;
    let calendarEvents;
    let calendarDisabled;
    let calendarInline;

    $on('pageInit', () => {
      // Default
      calendarDefault = $t4.calendar.create({
        inputEl: '#demo-calendar-default',
      });
      // With custom date format
      calendarDateFormat = $t4.calendar.create({
        inputEl: '#demo-calendar-date-format',
        dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' },
      });
      // Date + Time
      calendarDateTime = $t4.calendar.create({
        inputEl: '#demo-calendar-date-time',
        timePicker: true,
        dateFormat: { month: 'numeric', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' },
      });
      // With multiple values
      calendarMultiple = $t4.calendar.create({
        inputEl: '#demo-calendar-multiple',
        dateFormat: { month: 'short', day: 'numeric' },
        multiple: true
      });
      // Range Picker
      calendarRange = $t4.calendar.create({
        inputEl: '#demo-calendar-range',
        rangePicker: true
      });
      // Custom modal
      calendarModal = $t4.calendar.create({
        inputEl: '#demo-calendar-modal',
        openIn: 'customModal',
        header: true,
        footer: true,
      });
      // With events
      var now = new Date();
      var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      var weekLater = new Date().setDate(today.getDate() + 7);
      calendarEvents = $t4.calendar.create({
        inputEl: '#demo-calendar-events',
        events: [
          {
            from: today,
            to: weekLater
          },
          //- more events this day
          {
            date: today,
            color: '#ff0000'
          },
          {
            date: today,
            color: '#00ff00'
          },
        ]
      });
      // Disabled
      var today = new Date();
      var weekLater = new Date().setDate(today.getDate() + 7);
      calendarDisabled = $t4.calendar.create({
        inputEl: '#demo-calendar-disabled',
        disabled: {
          from: today,
          to: weekLater
        }
      });
      // Inline with custom toolbar
      var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      calendarInline = $t4.calendar.create({
        containerEl: '#demo-calendar-inline-container',
        value: [new Date()],
        weekHeader: false,
        renderToolbar: function () {
          return `
          <div class="toolbar calendar-custom-toolbar no-shadow">
            <div class="toolbar-inner">
              <div class="left">
                <a href="#" class="link icon-only"><i class="icon icon-back ${$t4.theme === 'md' ? 'color-black' : ''}"></i></a>
              </div>
              <div class="center"></div>
              <div class="right">
                <a href="#" class="link icon-only"><i class="icon icon-forward ${$t4.theme === 'md' ? 'color-black' : ''}"></i></a>
              </div>
            </div>
          </div>
          `;
        },
        on: {
          init: function (c) {
            $('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
            $('.calendar-custom-toolbar .left .link').on('click', function () {
              calendarInline.prevMonth();
            });
            $('.calendar-custom-toolbar .right .link').on('click', function () {
              calendarInline.nextMonth();
            });
          },
          monthYearChangeStart: function (c) {
            $('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
          }
        }
      });
    });

    return $render;
  };


</script>