Docs
Calendar

Calendar

Use the calendar component to create custom date pickers

Static Prop

Set static to make the date picker static and not select dates on click.

MoTuWeThFrSaSu
calendar-static.tsx
'use client'
import {Calendar} from '@you-got-bud/calendar'

export function CalendarWithIndicator() {
  return (
    <Calendar
      static
      renderDay={date => {
        const day = date.getDate()
        return (
          <div className="relative">
            {day === 16 && (
              <div className="absolute -top-4 -right-4 bg-primary flex items-center justify-center rounded-full text-primary-foreground h-[1.35rem] w-[1.35rem] text-xs">
                12
              </div>
            )}
            {day}
          </div>
        )
      }}
    />
  )
}


Custom date pickers

Use the Calenedar component along with the getDayProps function to build your own custom date pickers.

MoTuWeThFrSaSu
week-picker.tsx
'use client'

import {Calendar} from '@you-got-bud/calendar'
import dayjs from 'dayjs'
import {useState} from 'react'

function getDay(date: Date) {
  const day = date.getDay()
  return day === 0 ? 6 : day - 1
}

function startOfWeek(date: Date) {
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate() - getDay(date) - 1
  )
}

function endOfWeek(date: Date) {
  return dayjs(
    new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate() + (6 - getDay(date))
    )
  )
    .endOf('date')
    .toDate()
}

function isInWeekRange(date: Date, value: Date | null) {
  return value
    ? dayjs(date).isBefore(endOfWeek(value)) &&
        dayjs(date).isAfter(startOfWeek(value))
    : false
}

export function WeekPicker() {
  const [hovered, setHovered] = useState<Date | null>(null)
  const [value, setValue] = useState<Date | null>(null)

  return (
    <Calendar
      getDayProps={date => {
        const isHovered = isInWeekRange(date, hovered)
        const isSelected =
          isInWeekRange(date, value) && [1, 0].includes(date.getDay())
        const isInRange = isHovered || isSelected || isInWeekRange(date, value)
        return {
          onMouseEnter: () => setHovered(date),
          onMouseLeave: () => setHovered(null),
          inRange: isInRange,
          firstInRange: isInRange && date.getDay() === 1,
          lastInRange: isInRange && date.getDay() === 0,
          selected: isSelected,
          onClick: () => setValue(date),
        }
      }}
    />
  )
}

Hiding outside dates

Use the hideOutsideDates prop to hide dates outside the current month.

MoTuWeThFrSaSu
calendar-without-outside-dates.tsx
import {Calendar} from '@you-got-bud/calendar'

export function CalendarWithoutOutsideDates() {
  return (
    <Calendar hideOutsideDates />
  )
}

Overriding styles

Use the classNames prop to pass custom class names to the calendar. The following example makes all weekends purple

MoTuWeThFrSaSu
calendar-purple-weekends.tsx
import {Calendar} from '@you-got-bud/calendar'

export function PurpleWeekends() {
  return (
    <Calendar
      classNames={{
        day: 'data-[weekend]:text-purple-500',
      }}
    />
  )
}