Highlight the 'today' slot in each Native Scheduler view.

Environment

Description

This Knowledge base(KB) article shows how you can display the list of the parent nodes above the selected TreeView node. With the demonstrated approach you can get the 'path' from the root of the TreeView to the selected node.

KB sections

• Solution description
• Runnable example

Solution description

Define the custom template

To highlight the current date in all Native Scheduler Views, we need to customize its slot. The desired functionality can be achieved using the following custom Slot template.

Copy Code<template v-slot:slotRender="{ props }">
  <SchedulerSlot
    v-bind="props"
    :style="{
      'background-color':
        new Date(props.start).toDateString() === new Date().toDateString()
          ? '#56ca85' // Define the color of AllDay slots
          : undefined,
    }"
    @showmoreitems="props.onShowmoreitems"
  >
  </SchedulerSlot>
</template>

More details about the custom Slot templates you can find on this Scheduler Custom Slot template documentation article.

Pass the template to the Scheduler

To apply the above slotRender template is we have to pass it to the slotRender property of the Native Scheduler.

Copy Code:slot-render="'slotRender'"

The result

By applying the shared above implementation the today's cell in all Native Scheduler views will have a background with the #56ca85 color.

Runnable example