calendar
Date picker from the Figma Make library: single, multiple, and range selection, outside days, week start, disabled dates, and range-row rounding.
How to add it
Import CalendarComponent from @tastival.net/ui, add it to the standalone component imports, then use the calendar element. Later common components can compose this same element.
Import
import { CalendarComponent, isWeekend } from '@tastival.net/ui';
@Component({
imports: [CalendarComponent],
})
export class ExampleComponent {
selected = new Date(2026, 7, 15);
month = new Date(2026, 7, 1);
isWeekend = isWeekend;
}Usage
<calendar mode="single" [selected]="selected" [month]="month" [showOutsideDays]="true" [numberOfMonths]="1" [weekStartsOn]="0" [fixedWeeks]="false" [required]="false" [disabled]="false" [disabledDates]="[]" [disabledDate]="null" [fromDate]="null" [toDate]="null" locale="en" previousLabel="Previous month" nextLabel="Next month" className="rounded-md border"></calendar>
<calendar mode="multiple" [selected]="[selected]" [month]="month" [showOutsideDays]="true" [numberOfMonths]="1" [weekStartsOn]="1" [fixedWeeks]="true" [required]="true" [disabled]="false" [disabledDates]="[new Date(2026, 7, 20)]" [disabledDate]="isWeekend" [fromDate]="new Date(2026, 7, 1)" [toDate]="new Date(2026, 11, 31)" locale="de" previousLabel="Vorheriger Monat" nextLabel="Naechster Monat" className="w-fit"></calendar>
<calendar mode="range" [selected]="{ from: selected, to: new Date(2026, 7, 20) }" [month]="month" [showOutsideDays]="false" [numberOfMonths]="2" [weekStartsOn]="1" [fixedWeeks]="false" [required]="false" [disabled]="false" [disabledDates]="[]" [disabledDate]="null" [fromDate]="null" [toDate]="null" locale="fr" previousLabel="Mois precedent" nextLabel="Mois suivant" className=""></calendar>Examples
Playground
Preview
August 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
No date selected