Skip to main content

markers

Description

Optional. Highlights a specified date range in Month

Usage

markers?: (date: Date) => string;

Example

function Example() {
const markLine = (date: Date) =>
date >= new Date(2022, 2, 13) && date <= new Date(2022, 2, 19)
? "inrange"
: "";

return <Month current={new Date(2022, 2, 18)} markers={markLine} />;
}

Details

The function you pass to markers receives a single argument:

  • date: Date - the current date cell in the Month. You can use it to check whether this date belongs to a specific range or set of dates.

The function must return:

  • string - the CSS class name to apply for that date cell.
  • An empty string ("") if no marker should be applied.

The current prop is used to open the calendar at a particular date to make the marked date range visible, if needed.

Related article: Highlighting a date range