Skip to main content

markers

Description​

highlights a specified date range in Calendar

Type​

function

Example​

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

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

Details​

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

  • dateRange - a range of dates to be marked

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