Calendar

Anatomia#

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/calendar.json

Użycie#

import { Calendar } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())

<Calendar mode="single" selected={date} onSelect={setDate} />

Calendar opakowuje React DayPicker w style prfct. Zaznaczenie korzysta ze skali marki: zaznaczone dni wypełnia brand-9, dni wewnątrz zakresu — brand-3, a dzisiejszy dzień jest pogrubiony na spokojnym tle.

Przykłady#

Zakres#

mode="range" wybiera początek i koniec; numberOfMonths={2} pokazuje oba krańce dłuższych zakresów naraz. Przeszłe dni wyłącz przez disabled={{ before: today }}, zamiast sprawdzać wybór po fakcie.

Wiele dat#

mode="multiple" przełącza pojedyncze dni. Ogranicz wybór propem max i pokaż licznik, żeby użytkownik wiedział, kiedy dojdzie do limitu.

Listy rozwijane miesiąca i roku#

Przy datach odległych od dzisiejszej — takich jak data urodzenia czy rok ważności — captionLayout="dropdown" zastępuje nagłówek listami wyboru miesiąca i roku. Ogranicz ich zakres propami startMonth i endMonth.

Niedostępne daty#

disabled przyjmuje daty, zakresy, dni tygodnia i funkcje. Połącz go z modifiers, żeby pokazać, dlaczego dzień jest niedostępny — tutaj zarezerwowane dni są przekreślone, a weekendy tylko przygaszone.

Selektor daty#

Codzienne pole daty: Button, który pokazuje wybraną datę i otwiera kalendarz w komponencie Popover. Zamykaj popover po wyborze i formatuj datę dla ludzi, nie dla maszyn.

Lokalizacja#

Przekaż locale z react-day-picker/locale, żeby przetłumaczyć nazwy miesięcy i dni oraz zaczynać tydzień od właściwego dnia. Tutaj po polsku — tydzień zaczyna się w poniedziałek — z numerami tygodni ISO.

Wytyczne#

Kiedy używać#

• Do wyboru dat bliskich dzisiejszej, gdy pomaga kontekst tygodnia i miesiąca: rezerwacje, terminy, dostępność.
• Do wyboru zakresów, gdy widok obu krańców naraz zapobiega pomyłkom.

Kiedy nie używać#

• Do dat, które użytkownik zna na pamięć i które są odległe od dzisiejszej, np. daty urodzenia — trzy pola albo pole tekstowe z czytelnym formatem są szybsze niż cofanie się o dziesięciolecia.
• Do przybliżonych terminów, takich jak w przyszłym tygodniu — zaproponuj gotowe opcje w komponencie Select albo przyciskami.

Pokazuj ograniczenia#

Wyłącz dni, których nie można wybrać, zamiast odrzucać je po wyborze, i wyjaśnij powód w tekście obok (Weekendy są niedostępne). Nigdy nie pozwól zbudować wyboru, który zostanie odrzucony dopiero przy wysyłaniu formularza.

Formaty#

W wyzwalaczu pokazuj datę słownie (26 września 2026) za pomocą Intl.DateTimeFormat z ustawieniami regionalnymi użytkownika, a zapisuj ją w ISO 8601. Niejednoznaczne formaty liczbowe, takie jak 09/10, w różnych krajach czyta się różnie.

Dostępność#

Kalendarz renderuje grid przycisków z wędrującym fokusem (roving focus). Czytnik ekranu odczytuje każdy dzień z pełną datą oraz stanem zaznaczenia i wyłączenia; nagłówek jest regionem na żywo, więc podczas nawigacji ogłaszany jest bieżący miesiąc.

• Fokus. Dzień z fokusem ma standardowy pierścień fokusu o grubości 2 px; zaznaczony dzień ma dodatkowo aria-selected — nigdy nie jest oznaczony samym kolorem.
• W popoverze. Tekst przycisku wyzwalacza powinien podawać bieżącą wartość (Wybierz datę albo sformatowaną datę), a po zamknięciu popovera fokus wraca na ten przycisk.
• Kontrast. Zaznaczone dni używają brand-9 z kolorem kontrastowym marki (≥ 4,5:1); dni spoza miesiąca i dni wyłączone są przygaszone, ale pozostają czytelne.

Dokumentacja API#

Calendar#

Przyjmuje wszystkie propsy DayPicker. Najczęściej używane:

CalendarDayButton#

Przycisk renderowany dla każdego dnia. Podmień go przez components={{ DayButton }}, żeby dodać treść, np. ceny albo kropki dostępności.