Option to display a single row / week

[braswelljr]

Display a single week as an option to a month.

[gpbl]

@braswelljr this is an interesting layout for a date picker. It would give us some challenges... how would the navigation between weeks work?

[maxie7]

Hi, I need to show a week by default and by clicking the gray bar to show a month if it's necessary

(1)

(2)

Is it possible?! I can implement it through toggleViewMode custom function. The idea is to disable navigation when it's on 'week' view and enable it when it's on month view. The only challenge is how to show a week only ?!

[maxie7]

In theory we could implement it by passing "display: none" to rdp-week, but only to rdp-week which does not contain current day

[maxie7]

@rodgobbi , thanks a lot!!! Nice approach!!!

[rodgobbi]

You're welcome, happy to help!

[maxie7]

My solution for Next.js / Tailwind CSS (inspired by @rodgobbi):

'use client'

import React, { useState } from 'react'
import dynamic from 'next/dynamic'
import {
  startOfYear,
  startOfWeek as sw,
  differenceInCalendarWeeks,
  Day,
} from 'date-fns'
import 'react-day-picker/dist/style.css'
import { Week, WeekProps } from 'react-day-picker'

const DayPicker = dynamic(
  () => import('react-day-picker').then((mod) => mod.DayPicker),
  { ssr: false }
)

// Helper to compute the week number relative to the year using date-fns
const getCustomWeekNumber = (date: Date, weekStartsOn: Day): number => {
  const startOfYearDate = startOfYear(date)
  const startOfFirstWeek = sw(startOfYearDate, { weekStartsOn })
  const diff = differenceInCalendarWeeks(date, startOfFirstWeek, { weekStartsOn })
  return diff + 1
}

const CalendarComponent = () => {
  const [viewMode, setViewMode] = useState<'month' | 'week'>('week')
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
  // Track the currently displayed month (default to current month)
  const [displayedMonth, setDisplayedMonth] = useState<Date>(new Date())

  const toggleViewMode = () => {
    setViewMode(prevMode => (prevMode === 'month' ? 'week' : 'month'))
  }

  const handleDayClick = (day: Date) => {
    setSelectedDate(day)
  }

  // CustomWeek is used by DayPicker to render each week
  // In week view it will render only the target week
  const CustomWeek = (props: WeekProps): React.JSX.Element => {
    const { week } = props
    const today = new Date()
    let targetDate: Date

    // Only use the selected date if it is in the displayed month
    if (
      selectedDate &&
      selectedDate.getFullYear() === displayedMonth.getFullYear() &&
      selectedDate.getMonth() === displayedMonth.getMonth()
    ) {
      targetDate = selectedDate
    }
    // Otherwise, if today is in the displayed month, use today
    else if (
      today.getFullYear() === displayedMonth.getFullYear() &&
      today.getMonth() === displayedMonth.getMonth()
    ) {
      targetDate = today
    }
    // Otherwise, default to the first day of the displayed month
    else {
      targetDate = new Date(displayedMonth.getFullYear(), displayedMonth.getMonth(), 1)
    }

    const targetWeekNumber = getCustomWeekNumber(targetDate, 1) // Monday as the first day

    // In week view, only render the week that matches the target week
    if (viewMode === 'week' && week.weekNumber !== targetWeekNumber) {
      return <></>
    }

    return <Week {...props} />
  }

  return (
    <div className="calendar-container flex flex-col items-center">
      <DayPicker
        mode="single"
        selected={selectedDate}
        onDayClick={handleDayClick}
        weekStartsOn={1}
        numberOfMonths={1}
        showOutsideDays={viewMode === 'week'}
        hideNavigation={viewMode === 'week'}
        onMonthChange={(month) => setDisplayedMonth(month)}
        components={{ Week: CustomWeek }}
        classNames={{
          chevron: "fill-black-r",
          caption_label: "grid items-center font-medium",
          selected: "bg-yellow rounded-full",
          today: "font-bold",
          weekdays: "text-gray-dark",
        }}
      />

      <div
        onClick={toggleViewMode}
        className="w-1/6 mx-auto mt-2 h-1 rounded-full bg-gray-light cursor-pointer"
      ></div>
    </div>
  )
}

export default CalendarComponent

[rodgobbi]

Important note @braswelljr
the components prop should be used with a React component, and defining the function you pass as components inside a React component body will result in a different function reference on every re-render which can cause issues.

To solve this you need to extract the CustomWeek from the CalendarComponent. To pass all the states defined in CalendarComponent you will need to use React context, that's why the example I gave has a React context.