Skip to main content

markers

Description​

Optional. Highlights a specified date range in Calendar

Usage​

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

Parameters​

The function you pass to markers receives a single argument:

  • date: Date - the current date cell in the calendar. 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.

Example​

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

// Usage
<Calendar current={new Date(2022, 2, 18)} markers={markLine} />

Details​

The function passed as a value of the markers property receives a single parameter:

  • date - the current date cell in the calendar

and must return a string with the name of the CSS class or an empty string.

The current property 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

Related sample: Calendar