Построение календарей

Moment.js — это библиотека для работы с датами и временем в JavaScript, обеспечивающая удобный и мощный API для парсинга, форматирования, манипуляций и отображения времени. В контексте построения календарей она позволяет легко создавать и управлять объектами времени, выполнять вычисления, сравнивать даты и формировать пользовательские представления календарных данных.

Объект moment создается вызовом функции moment(), которая возвращает текущую дату и время, либо с переданным значением:

const now = moment(); // текущая дата и время
const specificDate = moment('2026-05-22', 'YYYY-MM-DD'); // конкретная дата

Ключевой особенностью Moment.js является поддержка различных форматов даты и времени, что упрощает работу с календарями, где важны разные представления: день, неделя, месяц, год.

Форматирование и отображение дат

Для построения календарей критично удобное форматирование. В Moment.js используется метод .format(), позволяющий преобразовать дату в строку нужного вида:

const date = moment('2026-05-22');
console.log(date.format('DD/MM/YYYY')); // 22/05/2026
console.log(date.format('dddd, MMMM Do YYYY')); // пятница, май 22-й 2026

Основные элементы форматирования:

  • YYYY — полный год (например, 2026)
  • MM — месяц с ведущим нулем (01–12)
  • DD — день месяца (01–31)
  • dddd — полное название дня недели
  • Do — день месяца с порядковым числительным

Для календарей удобно комбинировать эти элементы, чтобы выводить даты в привычной форме для пользователя.

Манипуляции с датами

Moment.js позволяет легко изменять даты, что необходимо при создании календарных сеток (например, для отображения следующего или предыдущего месяца).

let startOfMonth = moment().startOf('month'); // первый день текущего месяца
let endOfMonth = moment().endOf('month'); // последний день текущего месяца

// Добавление или вычитание дней, месяцев, лет
startOfMonth.add(1, 'month'); // следующий месяц
endOfMonth.subtract(1, 'year'); // год назад

Методы для манипуляции:

  • .add(value, unit) — прибавить время
  • .subtract(value, unit) — вычесть время
  • .startOf(unit) — начало периода (день, неделя, месяц, год)
  • .endOf(unit) — конец периода

Единицы времени (unit): 'days', 'weeks', 'months', 'years', 'hours', 'minutes', 'seconds'.

Эти инструменты позволяют создавать календарные сетки с динамическим вычислением дат и навигацией между месяцами или годами.

Получение компонентов даты

Для построения календарей часто нужно получать отдельные части даты: день недели, номер месяца, номер дня. Moment.js предоставляет удобные методы:

const date = moment('2026-05-22');
console.log(date.year()); // 2026
console.log(date.month()); // 4 (месяцы считаются с 0)
console.log(date.date()); // 22
console.log(date.day()); // 5 (пятница, с воскресенья = 0)
  • year() — год
  • month() — месяц (0–11)
  • date() — день месяца
  • day() — день недели (0–6, начиная с воскресенья)
  • weekday() — день недели с учетом локализации
  • isoWeekday() — день недели по ISO (1–7, понедельник = 1)

Эти методы помогают точно размещать даты в календарных таблицах и вычислять порядки дней.

Сравнение и проверка дат

Для календарей часто требуется сравнивать даты — чтобы выделить текущий день, определить выходные или проверить выбранный диапазон:

const today = moment();
const selectedDate = moment('2026-05-22');

console.log(today.isBefore(selectedDate)); // true или false
console.log(today.isSame(selectedDate, 'day')); // проверка на совпадение дней
console.log(today.isBetween('2026-05-01', '2026-05-31', 'day', '[]')); // проверка в диапазоне

Методы для сравнения:

  • .isBefore(date, unit) — проверка, раньше ли дата
  • .isAfter(date, unit) — проверка, позже ли дата
  • .isSame(date, unit) — совпадение по единице времени
  • .isBetween(start, end, unit, inclusivity) — проверка попадания в диапазон

Эти функции критичны для выделения активных дней и построения интерактивных календарей.

Работа с локализацией

Для календарей, которые отображают названия месяцев и дней недели, важна поддержка локалей. Moment.js позволяет легко переключать язык:

moment.locale('ru'); // русская локализация

console.log(moment().format('LLLL')); // пятница, 22 мая 2026 г., 00:00

Методы .locale() и .format() в сочетании обеспечивают корректное отображение всех текстовых элементов календаря в нужной локали.

Генерация календарной сетки

Для построения визуального календаря нужно определить дни месяца и разместить их по неделям:

let startOfMonth = moment('2026-05-01');
let endOfMonth = moment('2026-05-31');
let calendar = [];

let day = startOfMonth.clone().startOf('week'); // начало первой недели месяца

while(day.isBefore(endOfMonth) || day.weekday() !== 0) {
    let week = [];
    for(let i = 0; i < 7; i++) {
        week.push(day.clone());
        day.add(1, 'day');
    }
    calendar.push(week);
}

Такой подход формирует массив недель, каждая из которых содержит объекты moment. Это позволяет гибко рендерить календарь в любом формате: таблицей, сеткой или списком.

Работа с временными диапазонами

Для расширенных календарей, где нужно учитывать события и бронирования, важны интервалы времени:

const eventStart = moment('2026-05-10T09:00');
const eventEnd = moment('2026-05-10T11:00');

console.log(eventStart.isBefore(eventEnd)); // true
console.log(moment('2026-05-10T10:00').isBetween(eventStart, eventEnd)); // true

Это позволяет отображать события в календаре и проверять пересечения.

Moment.js сочетает в себе удобство работы с датами, мощные методы манипуляции и форматирования, поддержку локализации и точное управление временными интервалами. Именно эти возможности делают библиотеку идеальным инструментом для построения динамических и интерактивных календарей в JavaScript.

Оглавление