Crosshair

The JavaScript Scheduler component 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

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")

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

Header Crosshair (crosshairType="Header")

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>

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

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