React компонент

Этот пример рассчитан на React 16.8+ (функциональные компоненты с хуками). Если вы не используете TypeScript, используйте расширение .jsx вместо .tsx и удалите интерфейс CalendarProps из компонента.

Для демонстрации давайте рассмотрим простейший компонент React для Vanilla Calendar Pro. Создайте файл с именем VanillaCalendar.tsx и скопируйте в него следующий код:

tsx

import { useEffect, useRef, useState } from 'react';
import { Options, Calendar } from 'vanilla-calendar-pro';
 
import 'vanilla-calendar-pro/styles/index.css';
 
interface CalendarProps extends React.HTMLAttributes<HTMLDivElement> {
  config?: Options,
}
 
function VanillaCalendar({ config, ...attributes }: CalendarProps) {
  const ref = useRef(null);
  const [calendar, setCalendar] = useState<Calendar | null>(null);
 
  useEffect(() => {
    if (!ref.current) return;
    setCalendar(new Calendar(ref.current, config));
  }, [ref, config])
 
  useEffect(() => {
    if (!calendar) return;
    calendar.init()
  }, [calendar])
 
  return (
    <div {...attributes} ref={ref}></div>
  )
}
 
export default VanillaCalendar;

Затем импортируйте созданный компонент VanillaCalendar в ваше приложение React, где вы планируете отображать календарь.

tsx

import VanillaCalendar from './VanillaCalendar';

Используйте созданный компонент.

tsx

// ...
<VanillaCalendar />
// ...

Компоненту VanillaCalendar можно передать любые атрибуты HTML, поддерживаемые тегом <div>, а также параметр config для настройки календаря.

tsx

// ...
<VanillaCalendar config={{
    type: 'multiple',
  }} className="thisIsMyClass" />
// ...