Calendar
Um componente de calendário que permite ao usuário selecionar uma data ou um intervalo de datas.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
import { useState } from "react";
export default function CalendarDemo() {
const [date, setDate] = useState<Date | undefined>(new Date());
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border"
/>
);
}
Instalação
Uso
import { Calendar } from "@blips/ui/components/calendar"const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg border"
/>
)Consulte a documentação do React DayPicker para mais informações.
Sobre
O componente Calendar é construído sobre o React DayPicker.
Seletor de data
Você pode usar o componente <Calendar> para construir um seletor de datas. Você pode compô-lo com um Popover para construir um seletor de datas.
Calendário Persa / Hijri / Jalali
Para usar o calendário persa, edite components/ui/calendar.tsx e substitua react-day-picker por react-day-picker/persian.
- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"Data Selecionada (Com TimeZone)
O componente Calendar aceita uma prop timeZone para garantir que as datas sejam exibidas e selecionadas no fuso horário local do usuário.
export function CalendarWithTimezone() {
const [date, setDate] = React.useState<Date | undefined>(undefined)
const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined)
React.useEffect(() => {
setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
}, [])
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
timeZone={timeZone}
/>
)
}Nota: Se você notar um deslocamento na data selecionada (por exemplo, selecionar o dia 20 destaca o dia 19), certifique-se de que a prop timeZone esteja definida para o fuso horário local do usuário.
Por que no client-side? O fuso horário é detectado usando Intl.DateTimeFormat().resolvedOptions().timeZone dentro de um useEffect para garantir compatibilidade com renderização no servidor. Detectar o fuso horário durante a renderização causaria divergências de hidratação, já que o servidor e o cliente podem estar em fusos horários diferentes.
Exemplos
Básico
Um componente de calendário básico. Usamos className="rounded-lg border" para estilizar o calendário.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
export default function CalendarBasic() {
return <Calendar mode="single" className="rounded-lg border" />;
}
Calendário de Intervalo
Use a prop mode="range" para habilitar a seleção de intervalos.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
import { Card, CardContent } from "@blips/ui/components/card";
import { addDays } from "date-fns";
import * as React from "react";
import type { DateRange } from "react-day-picker";
export function CalendarRange() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(new Date().getFullYear(), 0, 12),
to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
});
return (
<Card className="mx-auto w-fit p-0">
<CardContent className="p-0">
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
/>
</CardContent>
</Card>
);
}
Seletor de Mês e Ano
Use captionLayout="dropdown" para exibir menus suspensos de mês e ano.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
export function CalendarCaption() {
return (
<Calendar
mode="single"
captionLayout="dropdown"
className="rounded-lg border"
/>
);
}
Predefinições
Um calendário com botões de predefinição para selecionar datas rapidamente.
"use client";
import { Button } from "@blips/ui/components/button";
import { Calendar } from "@blips/ui/components/calendar";
import { Card, CardContent, CardFooter } from "@blips/ui/components/card";
import { addDays } from "date-fns";
import * as React from "react";
export function CalendarWithPresets() {
const [date, setDate] = React.useState<Date | undefined>(
new Date(new Date().getFullYear(), 1, 12)
);
const [currentMonth, setCurrentMonth] = React.useState<Date>(
new Date(new Date().getFullYear(), new Date().getMonth(), 1)
);
return (
<Card className="mx-auto w-fit max-w-[300px]">
<CardContent>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
month={currentMonth}
onMonthChange={setCurrentMonth}
fixedWeeks
className="p-0 [--cell-size:--spacing(9.5)]"
/>
</CardContent>
<CardFooter className="flex flex-wrap gap-2 border-t">
{[
{ label: "Today", value: 0 },
{ label: "Tomorrow", value: 1 },
{ label: "In 3 days", value: 3 },
{ label: "In a week", value: 7 },
{ label: "In 2 weeks", value: 14 },
].map((preset) => (
<Button
key={preset.value}
variant="outline"
className="flex-1"
onClick={() => {
const newDate = addDays(new Date(), preset.value);
setDate(newDate);
setCurrentMonth(
new Date(newDate.getFullYear(), newDate.getMonth(), 1)
);
}}
>
{preset.label}
</Button>
))}
</CardFooter>
</Card>
);
}
Datas Reservadas
Um calendário com datas reservadas desabilitadas e estilizadas.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
import { Card, CardContent } from "@blips/ui/components/card";
import * as React from "react";
import { es } from "react-day-picker/locale";
export function CalendarBookedDates() {
const [date, setDate] = React.useState<Date | undefined>(
new Date(new Date().getFullYear(), 1, 3)
);
const bookedDates = Array.from(
{ length: 15 },
(_, i) => new Date(new Date().getFullYear(), 1, 12 + i)
);
return (
<Card className="mx-auto w-fit p-0">
<CardContent className="p-0">
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
disabled={bookedDates}
modifiers={{
booked: bookedDates,
}}
modifiersClassNames={{
booked: "[&>button]:line-through opacity-100",
}}
/>
</CardContent>
</Card>
);
}
Tamanho de Célula Personalizado
Um calendário com tamanho de célula personalizado e responsivo.
"use client";
import { Calendar, CalendarDayButton } from "@blips/ui/components/calendar";
import { Card, CardContent } from "@blips/ui/components/card";
import { addDays } from "date-fns";
import * as React from "react";
import type { DateRange } from "react-day-picker";
export function CalendarCustomDays() {
const [range, setRange] = React.useState<DateRange | undefined>({
from: new Date(new Date().getFullYear(), 11, 8),
to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
});
return (
<Card className="mx-auto w-fit p-0">
<CardContent className="p-0">
<Calendar
mode="range"
defaultMonth={range?.from}
selected={range}
onSelect={setRange}
numberOfMonths={1}
captionLayout="dropdown"
className="[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
formatters={{
formatMonthDropdown: (date) => {
return date.toLocaleString("default", { month: "long" });
},
}}
components={{
DayButton: ({ children, modifiers, day, ...props }) => {
const isWeekend =
day.date.getDay() === 0 || day.date.getDay() === 6;
return (
<CalendarDayButton day={day} modifiers={modifiers} {...props}>
{children}
{!modifiers.outside && (
<span>{isWeekend ? "$120" : "$100"}</span>
)}
</CalendarDayButton>
);
},
}}
/>
</CardContent>
</Card>
);
}
Números de Semana
Use showWeekNumber para exibir os números das semanas.
"use client";
import { Calendar } from "@blips/ui/components/calendar";
import { Card, CardContent } from "@blips/ui/components/card";
import * as React from "react";
export function CalendarWeekNumbers() {
const [date, setDate] = React.useState<Date | undefined>(
new Date(new Date().getFullYear(), 1, 3)
);
return (
<Card className="mx-auto w-fit p-0">
<CardContent className="p-0">
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
showWeekNumber
/>
</CardContent>
</Card>
);
}
Referência da API
Consulte a documentação do React DayPicker para mais informações sobre o componente Calendar.