DayPilot Scheduler can highlight the current cursor position by showing a crosshair. It helps with orientation in large grids.

The crosshair behavior is determined by the crosshairType property:

  • "Header" (default) - header highlighting
  • "Full" - full column and row indicator
  • "Disabled" - no crosshair

Note: The full crosshair will block access to cell active areas. The Scheduler will not be able to trigger hover and click actions of active areas.

By default, the crosshair highlights the last (bottom) row of the time header. You can set it to highlight another row using the crosshairTimeHeaderLevel property.

Full Crosshair (crosshairType="Full")

javascript html5 scheduler component crosshair full mode

This mode shows a full crosshair, highlighting the current row and column.

Header Crosshair (crosshairType="Header")

javascript html5 scheduler component crosshair header only mode

In this mode, the Scheduler component only highlights the headers.

JavaScript Scheduler

You can set the crosshair type of  the JavaScript Scheduler component using the crosshairType property:

<div id="scheduler"></div>
<script type="text/javascript">
  const scheduler = new DayPilot.Scheduler("scheduler", {
    crosshairType: "Full",
    // ...
  });
  scheduler.init();
</script>

Angular Scheduler

In the Angular Scheduler component, you can use the config object to set the crosshair type:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    crosshairType: "Full",
    // ...
  };

}

React Scheduler

You can change the crosshair mode using the crosshairType attribute in the React Scheduler component:

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

function Scheduler() {

  return <div>
    <DayPilotScheduler
      crosshairType={"Full"}
    />
  </div>;

}

export default Scheduler;

Vue Scheduler

In the Vue Scheduler component, use the crosshairType property of the config object to set the crosshair mode.

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script setup>
import {DayPilotScheduler} from 'daypilot-pro-vue'

const config = {
  crosshairType: "Full",
  // ...
};

</script>

ASP.NET WebForms

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  Crosshair = "Full"
/>

ASP.NET MVC

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  Crosshair = CrosshairType.Full
})