From v7 to v9: renderDay

[jani-huhtala]

I have a legacy product that needs to be be rewritten to typescript.

At the same time the react-day picker needs to be updated from v7 to v9. But I have a problem.

The old v7 had renderDay overwritable function, v9 does not.

Our renderDay ads a link to the right top side of the day cell, when certain criteria is met in renderDay function, like so:

    renderDay(day, modifiers) {
        const date = day.getDate();
        const dateKey = moment(day).format("YYYY-MM-DD");
        const reserved = this.props.reservedDates;

        const currentReserved = reserved ? reserved[dateKey] : null;

        return (
            <div>
                {currentReserved && currentReserved.startDay ? (
                        <div>
                            <Link to={`/bookings/${currentReserved.bookingID}`}
                                  onClick={this.handleReservationClick}
                                  className={"order-type order-type-" + currentReserved.bookingType}/>
                            {date}
                        </div>
                    ) : (
                        <div>
                            {date}
                        </div>
                    )
                }
            </div>
        );
    }

Is there anyway to add this renderDay functionality to the v9 day picker, os should I just use v7 on the new product also?

[gpbl]

Hi @jani-huhtala, renderDay has been replaced by a custom component.

You can render the link by using the Day custom component, for example:

https://stackblitz.com/edit/react-day-picker-9-2332-fmbt5x?file=src%2FApp.tsx

import { useState } from 'react';
import './App.css';
import 'react-day-picker/style.css';
import { DayPicker } from 'react-day-picker';

function App() {
  const reservedDates = [new Date(2024, 7, 1)];
	
  return (
    <DayPicker
      modifiers={{
        reserved: reservedDates,
      }}
      components={{
        Day: (props) => {
          const { day, modifiers, ...restProps } = props;

          // please note that the date is inside the object `day`
          console.log('dateKey', moment(day.date).format("YYYY-MM-DD"));

          return (
            <td {...restProps}>
              {/* add the link here */}
              {modifiers.reserved && <a href="">Link</a>}
              {/* continue rendering the content */}
              {restProps.children}
            </td>
          );
        },
      }}
    />
  );
}

export default App;

[somias]

@gpbl Hey, is it possible to modify and create custom td element? In this code example you're spreading rest props to td element but this now does not work since props only have two values displayMonth and Date