Cellule de Jour Personnalisée

Utilisez la render prop du composant Day pour personnaliser l’apparence de chaque cellule de jour. C’est utile pour ajouter des indicateurs d’événements, des infobulles, ou un style complètement personnalisé à des jours individuels.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

const eventDates = new Set([5, 12, 18, 25]);

function CompoundCustomDay() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DatePicker.Root value={value} onChange={setValue} inline>
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Title />
          <DatePicker.NextButton />
        </DatePicker.Header>
        <DatePicker.Grid>
          {({ date }) => (
            <DatePicker.Day date={date}>
              {({ day, isDisabled, isSelected, isToday, onClick, onMouseEnter, onMouseLeave }) => (
                <button
                  type="button"
                  onClick={onClick}
                  onMouseEnter={onMouseEnter}
                  onMouseLeave={onMouseLeave}
                  disabled={isDisabled}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 36,
                    height: 36,
                    border: "none",
                    borderRadius: 6,
                    cursor: isDisabled ? "default" : "pointer",
                    background: isSelected ? "#3b82f6" : "transparent",
                    color: isSelected ? "#fff" : isToday ? "#2563eb" : undefined,
                    fontWeight: isToday || isSelected ? 600 : 400,
                    fontSize: 13,
                    position: "relative",
                  }}
                >
                  {day}
                  {eventDates.has(date.getDate()) && (
                    <span
                      style={{
                        position: "absolute",
                        bottom: 2,
                        width: 4,
                        height: 4,
                        borderRadius: "50%",
                        background: isSelected ? "#fff" : "#f59e0b",
                      }}
                    />
                  )}
                </button>
              )}
            </DatePicker.Day>
          )}
        </DatePicker.Grid>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

March 2026