React Component
This example targets React 16.8+ (functional components with Hooks). If you are not using TypeScript, use the .jsx extension instead of .tsx and remove the CalendarProps interface from the component.
For demonstration purposes, let's consider the simplest React component for Vanilla Calendar Pro. Create a file named VanillaCalendar.tsx and copy the following code into it:
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;Then, import the created VanillaCalendar component into your React application where you plan to display the calendar.
import VanillaCalendar from './VanillaCalendar';Use the created component.
// ...
<VanillaCalendar />
// ...The VanillaCalendar component can accept any HTML attributes supported by the <div> tag, as well as the config parameter for configuring the calendar.
// ...
<VanillaCalendar config={{
type: 'multiple',
}} className="thisIsMyClass" />
// ...