Skip to main content

markers

Description​

Optional. Highlights a specified date range in RangeCalendar

Usage​

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

Parameters​

The function passed as a value of the markers property takes one parameter:

  • date: Date - the current date cell in the RangeCalendar. You can use this value to check whether the date belongs to a specific range or set of dates that should be highlighted.

The function must return:

  • A string with the CSS class name to apply to the given date

  • An empty string ("") if no marker should be applied

Example​

const markLine = (v: Date) =>
  v >= new Date(2022, 3, 13) && v <= new Date(2022, 4, 19)
    ? "inrange"
    : "";

function App() {
  return <RangeCalendar current={new Date(2022, 3, 18)} markers={markLine} />;
}

Details​

The current property is used to open the calendars at the view that makes the date range visible.

Related article: Highlighting a date range