v2.9.10
Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
💢 Usage example

biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.

Additional features

React Component

If you're not using TypeScript, use the .jsx extension instead of .tsx and remove the component's typing.

To create a React component named VanillaCalendar.tsx, you need to copy the code provided below into this file:

js
import { HTMLAttributes, useEffect, useRef, useState } from "react";
import VC from "vanilla-calendar-pro";
import { IOptions } from "vanilla-calendar-pro/types";
import "vanilla-calendar-pro/build/vanilla-calendar.min.css";
 
interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
  config?: IOptions,
}
 
function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [calendar, setCalendar] = useState<VC | null>(null);
 
  useEffect(() => {
    if (!ref.current) return
    setCalendar(new VC(ref.current, config));
  }, [ref, config])
 
  useEffect(() => {
    if (!calendar) return;
    calendar.init();
  }, [calendar]);
 
  return (
    <div {...attributes} ref={ref}></div>
  )
}
 
export default VanillaCalendar
js
import { HTMLAttributes, useEffect, useRef, useState } from "react";
import VC from "vanilla-calendar-pro";
import { IOptions } from "vanilla-calendar-pro/types";
import "vanilla-calendar-pro/build/vanilla-calendar.min.css";
 
interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
  config?: IOptions,
}
 
function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [calendar, setCalendar] = useState<VC | null>(null);
 
  useEffect(() => {
    if (!ref.current) return
    setCalendar(new VC(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 component VanillaCalendar into your React component where you plan to display the calendar.

js
import VanillaCalendar from "./VanillaCalendar";
js
import VanillaCalendar from "./VanillaCalendar";

Use the created component.

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

You can pass any HTML attributes supported by the <div> tag to the VanillaCalendar component, as well as the configparameter for calendar customization.

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