React компонент
Если вы не используете 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" />
// ...