How to disable days from Calendar (shadcn)
Unanswered
Ojos Azules posted this in #help-forum
Ojos AzulesOP
Here is my calendar
I want to disable dynamically days from this calendar. For example, here i get the unavailable day numbers (Friday = 5)
how i can add these unavailabledaynumbers to my calendar so to be disabled?
<FormField
control={form.control}
name="day"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Date of appointment</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
disabled={
{
before: new Date(),
}
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>I want to disable dynamically days from this calendar. For example, here i get the unavailable day numbers (Friday = 5)
const unavailableDayNumbers = unavailableDays.map((day) => day.number);how i can add these unavailabledaynumbers to my calendar so to be disabled?