DayPilot.Calendar.getPixels

Converts a date to its vertical position and containing cell boundaries in a Calendar column.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.getPixels

Signature

getPixels(date, column?)

Parameters

• date: DayPilot.Date or ISO date/time string.
• column: optional DayPilot.Column object; defaults to the first bottom-level column. Use a column object from the Calendar column API when columns have different start dates.

Return Value

• top: interpolated vertical pixel position.
• boxTop, boxBottom: containing cell's pixel boundaries.
• boxStart, boxEnd: corresponding DayPilot.Date boundaries.
• cut: whether the date is cut out of the visible time cells.
• i (when present): time-cell lookup index, or null outside the timeline. An exact cell end can use the following index.

Coordinates are relative to the time grid's content origin, excluding column headers and independent of the current scroll viewport. Inside a visible cell, position is proportional to that cell's own duration and height. Dates inside a hidden gap project to its shared pixel boundary with cut: true. At an exact visible endpoint, cut can be false.

Dates before the first cell clamp to its top with cut: false; dates after the last cell clamp to its bottom with cut: true. Check timeline bounds as well as cut when detecting out-of-range dates. With no time cells, the result has zero-height geometry. Use getDate for the reverse conversion.

Examples

Call this method after initialization. The following excerpts retain the existing Calendar configuration. The Nonlinear Timeline guide supplies a complete manual-axis example.

JavaScript

const result = calendar.getPixels("2028-04-03T10:45:00");
console.log(result);

Angular

<daypilot-calendar #calendar [config]="config"></daypilot-calendar>

import {ViewChild} from "@angular/core";
import {DayPilotCalendarComponent} from "daypilot-pro-angular";

@ViewChild("calendar") calendar!: DayPilotCalendarComponent;

inspect() {
  const result = this.calendar.control.getPixels("2028-04-03T10:45:00");
  console.log(result);
}

React

import {useState} from "react";
import {DayPilot, DayPilotCalendar} from "daypilot-pro-react";

const [calendar, setCalendar] = useState<DayPilot.Calendar | null>(null);
const inspect = () => {
  const result = calendar?.getPixels("2028-04-03T10:45:00");
  console.log(result);
};

<DayPilotCalendar controlRef={setCalendar} />

Vue

<script setup lang="ts">
import {ref} from "vue";
import {DayPilotCalendar} from "daypilot-pro-vue";

const calendar = ref<InstanceType<typeof DayPilotCalendar> | null>(null);
const inspect = () => {
  const result = calendar.value?.control.getPixels("2028-04-03T10:45:00");
  console.log(result);
};
</script>

<template>
  <DayPilotCalendar ref="calendar" />
</template>

See Also

Nonlinear Timeline · DayPilot.Calendar Class