Создайте календарь на месяц, неделю и день с помощью React и FullCalendar

Лучшая библиотека календарей на JavaScript

В недавнем проекте я хотел создать календарь, в котором были бы просмотры месяца, недели и дня. Я поискал в Интернете и опробовал несколько библиотек. Безусловно, лучшим вариантом, который я нашел, был FullCalendar.

FullCalendar - это библиотека календаря, которую вы можете реализовать с помощью ванильного JavaScript или фреймворка, такого как React, Vue или Angular. У них более 300 настроек, что позволяет легко настраивать календарь в соответствии с вашими потребностями.

В этой статье мы рассмотрим, как сделать следующее:

• Реализуйте FullCalendar в приложении React
• Создайте собственный заголовок с настраиваемыми кнопками
• Добавить события в календарь
• Настройте календарь с полезными свойствами

Реализовать FullCalendar

В этом примере мы будем использовать create-react-app для настройки базового приложения React.

Как только приложение настроено, начните с установки пакета FullCalendar React в свой проект.

npm install @fullcalendar/react

Также нам потребуется установить 3 плагина от FullCalendar.

npm install @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

Сначала создайте в проекте новый файл с именем Calendar.js. В этом файле импортируйте компонент FullCalendar из @fullcalendar/react вместе с надстройками из соответствующих библиотек.

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

Теперь мы можем отобразить календарь в нашем приложении. Передайте массив плагинов, которые мы импортировали, в свойство plugins. Мы также установим начальный вид календаря с помощью свойства initialView. Опора initialView принимает строку из любых доступных представлений, которые мы добавили в качестве плагина. В нашем примере я установил начальное представление dayGridMonth.

function FullCalendarApp() {
  return (
    <div className="App">
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
      />
    </div>
  );
}

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

Создать собственный заголовок

Далее мы настроим заголовок. По умолчанию в заголовке календаря справа отображаются кнопки «Далее», «Назад» и «Сегодня».

Мы можем добавить или изменить расположение кнопок в заголовке, используя свойство headerToolbar. Свойство headerToolbar принимает объект со свойствами start, center и end. Значения, которые мы добавляем к этим свойствам, будут определять, какие кнопки будут отображаться в заголовке.

Заголовок по умолчанию будет иметь следующие свойства.

// default headerToolbar properties
headerToolbar = {{
  start: 'title',
  center: '',   
  end: 'today prev,next'
}}

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

headerToolbar={{
  center: 'dayGridMonth,timeGridWeek,timeGridDay',
}}

Мы также можем добавить пользовательские кнопки в заголовок, используя свойство customButtons. Например, мы можем создать кнопку для добавления нового события со следующим объектом.

customButtons={{
  new: {
    text: 'new',
    click: () => console.log('new event'),
  },
}}

Затем мы можем добавить новую кнопку, которую мы создали, в headerToolbar. Помните, что значение имеют запятые и пробелы.

headerToolbar={{
  center: 'dayGridMonth,timeGridWeek,timeGridDay new',
}}

Теперь наш заголовок будет выглядеть так.

Если мы нажмем кнопку месяца, недели или дня, вид календаря изменится соответствующим образом.

Обзор недели

Просмотр дня

Добавить события

Мы также можем добавлять события в календарь.

Базовый объект события будет иметь свойства id, title, start и end.

{
  id: 1,
  title: 'event 1',
  start: '2021-06-14T10:00:00',
  end: '2021-06-14T12:00:00',
},

Например, мы можем жестко закодировать массив таких событий.

const events = [
  {
    id: 1,
    title: 'event 1',
    start: '2021-06-14T10:00:00',
    end: '2021-06-14T12:00:00',
  },
  {
    id: 2,
    title: 'event 2',
    start: '2021-06-16T13:00:00',
    end: '2021-06-16T18:00:00',
  },
  { 
    id: 3, 
    title: 'event 3', 
    start: '2021-06-17', 
    end: '2021-06-20' },
];

Затем передайте его в опору events компонента FullCalendar.

events={events}

В результате в календарь будут добавлены следующие события.

Дополнительные свойства

Ниже приводится список некоторых дополнительных свойств, которые могут быть вам полезны.

eventColor - измените цвет фона и границы событий.

eventColor="red"

nowIndicator - отображает текущее время в представлении TimeGrid.

nowIndicator

dateClick - функция, которая запускается, когда пользователь нажимает дату или время.

dateClick={(e) => console.log(e.dateStr)}

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

eventClick={(e) => console.log(e.event.id)}

Настроить FullCalendar очень просто. У них есть более 300 настроек, которые вы можете настроить. Если вы хотите настроить какие-либо свойства, для которых нет существующей настройки, вы можете напрямую настроить таргетинг на CSS. Узнайте, как это сделать, в их документации здесь.

Подведение итогов

Ознакомьтесь с полным исходным кодом для компонента Calendar, который мы создали ниже.

Спасибо за прочтение! Надеюсь, эта статья помогла вам создать календарь для вашего проекта React.

Если вы хотите найти простой способ работы с датами в JavaScript, ознакомьтесь со статьей ниже, чтобы узнать о Day.js.