Back to Daisyui

Calendar

skills/daisyui/components/calendar.md

5.6.131.1 KB
Original Source

calendar

Calendar includes styles for different calendar libraries

calendar docs

Class names

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

Syntax

For Cally:

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

For React Day Picker:

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

For Vanilla Calendar Pro:

html
<div id="calendar" class="vc"></div>
js
import { Calendar } from "vanilla-calendar-pro"

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

Or using CDN:

html
<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