v2.9.6
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Дополнительные возможности

React компонент

Если вы не используете TypeScript, используйте расширение .jsx вместо .tsx и избавьтесь от типизации компонента.

Для создания React компонента с именем VanillaCalendar.tsx, вам необходимо скопировать приведенный ниже код в этот файл:

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

Затем импортируйте созданный компонент VanillaCalendar в ваш компонент React, где вы планируете отображать календарь.

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

Используйте созданный компонент.

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

В компонент VanillaCalendar можно передать любые атрибуты HTML, поддерживаемые тегом <div>, а также параметр config для настройки календаря.

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