React компонент
Этот пример рассчитан на React 16.8+ (функциональные компоненты с хуками). Если вы не используете TypeScript, используйте расширение .jsx вместо .tsx и удалите интерфейс CalendarProps из компонента.
Для демонстрации давайте рассмотрим простейший компонент React для Vanilla Calendar Pro. Создайте файл с именем VanillaCalendar.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, где вы планируете отображать календарь.
import VanillaCalendar from './VanillaCalendar';Используйте созданный компонент.
// ...
<VanillaCalendar />
// ...Компоненту VanillaCalendar можно передать любые атрибуты HTML, поддерживаемые тегом <div>, а также параметр config для настройки календаря.
// ...
<VanillaCalendar config={{
type: 'multiple',
}} className="thisIsMyClass" />
// ...