CalendarCustomDays() — ui Function Reference

Architecture documentation for the CalendarCustomDays() function in calendar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CalendarCustomDays() — ui Function Reference

Dependency Diagram

graph TD
  7f26cb75_a0a4_8582_186d_1799c3b28939["CalendarCustomDays()"]
  5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab["calendar-demo.tsx"]
  7f26cb75_a0a4_8582_186d_1799c3b28939 -->|defined in| 5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab
  style 7f26cb75_a0a4_8582_186d_1799c3b28939 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/calendar-demo.tsx lines 182–223

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 (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">
        With Custom Days and Formatters
      </div>
      <Calendar
        mode="range"
        defaultMonth={range?.from}
        selected={range}
        onSelect={setRange}
        numberOfMonths={1}
        captionLayout="dropdown"
        className="rounded-lg border shadow-sm [--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>
            )
          },
        }}
      />
    </div>
  )
}