Calendar

Компонент Calendar из библиотеки Ant Design представляет собой мощный инструмент для отображения календарных данных и организации событий. Он построен на основе React и полностью интегрируется с экосистемой Ant Design, обеспечивая единый стиль интерфейса и гибкость настройки.

import { Calendar } from 'antd';

Базовое использование компонента выглядит следующим образом:

<Calendar />

В этом виде компонент отобразит календарь текущего месяца с возможностью переключения между месяцами и годами.

Настройка отображения и выбор даты

Calendar поддерживает два основных типа отображения:

  • month — стандартный месячный вид.
  • year — вид с отображением всех месяцев года.
<Calendar fullscreen={false} mode="month" />

Параметр fullscreen={false} позволяет отображать календарь в компактной форме, что полезно для интеграции в панели управления и виджеты.

Обработка событий выбора даты

Для отслеживания выбора даты используется событие onSelect, которое возвращает объект moment:

import moment from 'moment';

const onSel ect = (value) => {
  console.log('Выбранная дата:', value.format('YYYY-MM-DD'));
};

<Calendar onSel ect={onSelect} />

Также доступно событие onPanelChange, которое срабатывает при смене месяца или года:

const onPanelCha nge = (value, mode) => {
  console.log('Новая панель:', mode, 'Дата:', value.format('YYYY-MM-DD'));
};

<Calendar onPanelCha nge={onPanelChange} />

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

Кастомизация ячеек календаря

Ant Design предоставляет возможность кастомизировать отображение каждого дня через функцию dateCellRender и отображение месяца через monthCellRender.

Пример кастомизации дня

const dateCellRender = (value) => {
  const listData = getListData(value); // функция возвращает события для даты
  return (
    <ul className="events">
      {listData.map(item => (
        <li key={item.content}>{item.content}</li>
      ))}
    </ul>
  );
};

<Calendar dateCellRender={dateCellRender} />

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

Пример кастомизации месяца

const monthCellRender = (value) => {
  const num = getMonthData(value); // функция возвращает статистику для месяца
  return num ? <div className="notes-month">{num} событий</div> : null;
};

<Calendar monthCellRender={monthCellRender} />

Использование этих функций открывает возможности для реализации календаря задач, встреч или KPI-панели.

Ограничение выбора дат

С помощью свойства disabledDate можно запретить выбор определённых дат. Например, запретить выбор прошлых дат:

const disabledDate = (current) => {
  return current && current < moment().startOf('day');
};

<Calendar disabledDate={disabledDate} />

current — это объект moment, представляющий текущую ячейку календаря. Функция должна возвращать true для запрещённых дат.

Управление состоянием выбранной даты

Компонент поддерживает контролируемое состояние через свойство value:

const [date, setDate] = useState(moment());

<Calendar
  value={date}
  onSel ect={setDate}
/>

Это позволяет синхронизировать календарь с внешними компонентами и состоянием приложения.

Интеграция с локализацией

Ant Design использует библиотеку moment для работы с локализацией. Для смены языка календаря необходимо импортировать нужную локализацию:

import locale from 'antd/es/locale/ru_RU';
import { ConfigProvider } from 'antd';

<ConfigProvider locale={locale}>
  <Calendar />
</ConfigProvider>

После этого названия месяцев, дней недели и формат даты будут отображаться на русском языке.

Пример полного календаря с событиями

import React, { useState } from 'react';
import { Calendar, Badge, ConfigProvider } from 'antd';
import locale from 'antd/es/locale/ru_RU';
import moment from 'moment';

const getListData = (value) => {
  let listData;
  switch(value.date()){
    case 8:
      listData = [{ content: 'Встреча с командой' }];
      break;
    case 10:
      listData = [{ content: 'Дедлайн проекта' }];
      break;
    default:
      listData = [];
  }
  return listData || [];
};

const dateCellRender = (value) => {
  const listData = getListData(value);
  return (
    <ul>
      {listData.map(item => (
        <li key={item.content}>
          <Badge status="success" text={item.content} />
        </li>
      ))}
    </ul>
  );
};

const MyCalendar = () => {
  const [selectedDate, setSelectedDate] = useState(moment());

  return (
    <ConfigProvider locale={locale}>
      <Calendar
        value={selectedDate}
        onSel ect={setSelectedDate}
        dateCellRender={dateCellRender}
        fullscreen={false}
      />
    </ConfigProvider>
  );
};

export default MyCalendar;

В этом примере реализован календарь с отображением событий и выбором даты, локализованный на русский язык, с компактным отображением и визуальной индикацией через Badge.

Важные моменты при работе с Calendar

  • dateCellRender и monthCellRender позволяют расширить функциональность без изменения структуры компонента.
  • Использование controlled компонента через value обеспечивает синхронизацию состояния с другими частями приложения.
  • disabledDate и onPanelChange позволяют гибко управлять взаимодействием пользователя с календарем.
  • Комбинация с ConfigProvider и локализацией упрощает интеграцию в международные проекты.

Эти инструменты делают Ant Design Calendar универсальным компонентом для создания как простых, так и сложных календарных интерфейсов.

Оглавление