Calendar

The calendar component includes styles for different calendar libraries.

Calendar documentation

Class names

• component
  • cally (for Cally web component)
  • react-day-picker (for the DayPicker component)
  • vc (for Vanilla Calendar Pro)

Syntax

Cally:

<calendar-date class="cally">{CONTENT}</calendar-date>

React Day Picker:

<DayPicker className="react-day-picker"></DayPicker>

Vanilla Calendar Pro:

<div id="calendar" class="vc"></div>

import { Calendar } from "vanilla-calendar-pro";

const calendar = new Calendar("#calendar");
calendar.init();

CDN alternative:

<script
  src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js"
  defer
></script>
<div id="calendar" class="vc"></div>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const { Calendar } = window.VanillaCalendarPro;
    const calendar = new Calendar("#calendar");
    calendar.init();
  });
</script>

Rules

• daisyUI supports Cally, React Day Picker, and Vanilla Calendar Pro.