Next.js Discord

Discord Forum

How to disable days from Calendar (shadcn)

Unanswered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
Here is my calendar

        <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?

0 Replies