Components for Libraries

React Component

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:

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;

Then, import the created VanillaCalendar component into your React application where you plan to display the calendar.

tsx

import VanillaCalendar from "./VanillaCalendar";

Use the created component.

tsx

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

The VanillaCalendar component can accept any HTML attributes supported by the <div> tag, as well as the config parameter for configuring the calendar.

tsx

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