Crosshair

The Calendar component highlights the current position of the mouse in the calendar grid using a crosshair.

The Calendar supports two modes:

• "Header" mode: By default, it only highlights the current position in the vertical and horizontal header.
• "Full" mode: The crosshair can highlight the full row and column.

You can also turn it the crosshair off (crosshairType: "Disabled").

Note that in the "Full" mode, it blocks access to active areas that are inserted into the Calendar grid cells. They will be visible but the hover and click actions will not be fired.

"Header" Crosshair Mode

"Full" Crosshair Mode

JavaScript Calendar

In the JavaScript Calendar component, use the crosshairType property to set the crosshair type.

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp", {
    crosshairType: "Full",
    // ...
  });
  dp.init();
</script>

Demo

• JavaScript Calendar Crosshair Demo

Angular Calendar

In the Angular Calendar, use the crosshairType property of the config object to set the crosshair behavior:

import {Component} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

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

  config: DayPilot.CalendarConfig = {
    crosshairType: "Full",
    viewType: "Week",
    // ...
  };

}

React Calendar

You can set the crosshair mode of the React Calendar component using the crosshairType attribute:

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

function Calendar() {

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

}

export default Scheduler;

Vue Calendar

In the Vue Calendar, you can change the crosshair type using the crosshairType property of the config:

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

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

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

</script>

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  Crosshair="Full"
  ...
/>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  Crosshair = CrosshairType.Full,
  // ...
	
})