Calendar includes styles for different calendar libraries.
| Class name | Type | |
|---|---|---|
| cally | Component | for Cally web component |
| react-day-picker | Component | for the DayPicker component |
| vc | Component | for Vanilla Calendar Pro |
You can also use the native HTML
<input type="date">for a date picker. Read more
daisyUI includes styles for 3 popular calendar libraries.
Use any of them, based on your needs.
You don't need to import the CSS files for these libraries. daisyUI will style them automatically.
Cally is a web component calendar and it works everywhere. Read the docs
<!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<calendar-date class="$$cally bg-base-100 border border-base-300 shadow-lg rounded-box">
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date><!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<calendar-date class="$$cally bg-base-100 border border-base-300 shadow-lg rounded-box">
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date><!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<button popovertarget="cally-popover1" class="$$input $$input-border" id="cally1" style="anchor-name:--cally1">
Pick a date
</button>
<div popover id="cally-popover1" class="$$dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
<calendar-date class="$$cally" onchange={document.getElementById('cally1').innerText = this.value}>
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date>
</div><!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<button popovertarget="cally-popover1" class="$$input $$input-border" id="cally1" style="anchor-name:--cally1">
Pick a date
</button>
<div popover id="cally-popover1" class="$$dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
<calendar-date class="$$cally" onchange={document.getElementById('cally1').innerText = this.value}>
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date>
</div>React Day Picker is a flexible date picker component for React. Read the docs
npm i react-day-pickerimport { useState } from "react";
import { DayPicker } from "react-day-picker";
export default function App() {
const [date, setDate] = useState<Date | undefined>();
return (
<>
<button popoverTarget="rdp-popover" className="$$input $$input-border" style={{ anchorName: "--rdp" } as React.CSSProperties}>
{date ? date.toLocaleDateString() : "Pick a date"}
</button>
<div popover="auto" id="rdp-popover" className="$$dropdown" style={{ positionAnchor: "--rdp" } as React.CSSProperties}>
<DayPicker className="$$react-day-picker" mode="single" selected={date} onSelect={setDate} />
</div>
</>
);
}Vanilla Calendar Pro is a JavaScript calendar library. Read the docs
npm i vanilla-calendar-pro<div id="calendar" class="$$vc"></div>import { Calendar } from "vanilla-calendar-pro"
const calendar = new Calendar("#calendar")
calendar.init()<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>