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