devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
345 lines (344 loc) • 13.2 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/workspaces/timeline.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import registerComponent from "../../../core/component_registrator";
import $ from "../../../core/renderer";
import {
noop
} from "../../../core/utils/common";
import dateUtils from "../../../core/utils/date";
import {
extend
} from "../../../core/utils/extend";
import {
getBoundingRect
} from "../../../core/utils/position";
import {
getOuterHeight,
getOuterWidth,
setHeight
} from "../../../core/utils/size";
import {
hasWindow
} from "../../../core/utils/window";
import {
getGlobalFormatByDataType
} from "../../core/m_global_format_config";
import {
HeaderPanelTimelineComponent
} from "../../scheduler/r1/components/index";
import {
timelineWeekUtils
} from "../../scheduler/r1/utils/index";
import {
GROUP_HEADER_CONTENT_CLASS,
GROUP_ROW_CLASS
} from "../classes";
import tableCreatorModule from "../m_table_creator";
import timezoneUtils from "../m_utils_time_zone";
import HorizontalShader from "../shaders/current_time_shader_horizontal";
import {
getFirstVisibleDate
} from "../utils/skipped_days";
import SchedulerWorkSpace from "./work_space_indicator";
const {
tableCreator: tableCreator
} = tableCreatorModule;
const TIMELINE_CLASS = "dx-scheduler-timeline";
const GROUP_TABLE_CLASS = "dx-scheduler-group-table";
const HORIZONTAL_GROUPED_WORKSPACE_CLASS = "dx-scheduler-work-space-horizontal-grouped";
const HEADER_PANEL_CELL_CLASS = "dx-scheduler-header-panel-cell";
const HEADER_PANEL_WEEK_CELL_CLASS = "dx-scheduler-header-panel-week-cell";
const HORIZONTAL = "horizontal";
const toMs = dateUtils.dateToMilliseconds;
class SchedulerTimeline extends SchedulerWorkSpace {
constructor() {
super(...arguments);
this.viewDirection = "horizontal"
}
get verticalGroupTableClass() {
return GROUP_TABLE_CLASS
}
get renovatedHeaderPanelComponent() {
return HeaderPanelTimelineComponent
}
getGroupTableWidth() {
return this.$sidebarTable ? getOuterWidth(this.$sidebarTable) : 0
}
getTotalRowCount(groupCount, includeAllDayPanelRows) {
if (this.isHorizontalGroupedWorkSpace()) {
return this.getRowCount()
}
const totalGroupCount = groupCount || 1;
return this.getRowCount() * totalGroupCount
}
getFormat() {
return getGlobalFormatByDataType("time") || "shorttime"
}
getWorkSpaceHeight() {
if (this.option("crossScrollingEnabled") && hasWindow()) {
return getBoundingRect(this.$dateTable.get(0)).height
}
return getBoundingRect(this.$element().get(0)).height
}
dateTableScrollableConfig() {
const config = super.dateTableScrollableConfig();
const timelineConfig = {
direction: HORIZONTAL
};
return this.option("crossScrollingEnabled") ? config : extend(config, timelineConfig)
}
needCreateCrossScrolling() {
return true
}
headerScrollableConfig() {
const config = super.headerScrollableConfig();
return extend(config, {
scrollByContent: true
})
}
supportAllDayRow() {
return false
}
getGroupHeaderContainer() {
if (this.isHorizontalGroupedWorkSpace()) {
return this.$thead
}
return this.$sidebarTable
}
insertAllDayRowsIntoDateTable() {
return false
}
needRenderWeekHeader() {
return false
}
incrementDate(date) {
const skippedDays = this.option("skippedDays") ?? [];
const nextDate = new Date(date);
nextDate.setDate(nextDate.getDate() + 1);
const nextVisibleDate = getFirstVisibleDate(nextDate, skippedDays, currentDate => {
const result = new Date(currentDate);
result.setDate(result.getDate() + 1);
return result
});
date.setTime(nextVisibleDate.getTime())
}
getIndicationCellCount() {
const timeDiff = this.getTimeDiff();
return this.calculateDurationInCells(timeDiff)
}
getTimeDiff() {
let today = this.getToday();
const date = this.getIndicationFirstViewDate();
const startViewDate = this.getStartViewDate();
const dayLightOffset = timezoneUtils.getDaylightOffsetInMs(startViewDate, today);
if (dayLightOffset) {
today = new Date(today.getTime() + dayLightOffset)
}
return today.getTime() - date.getTime()
}
calculateDurationInCells(timeDiff) {
const today = this.getToday();
const differenceInDays = Math.floor(timeDiff / toMs("day"));
const skippedDaysCount = this.getSkippedDaysCount(this.getIndicationFirstViewDate(), differenceInDays);
let duration = (timeDiff - differenceInDays * toMs("day") - this.option("startDayHour") * toMs("hour")) / this.getCellDuration();
if (today.getHours() > this.option("endDayHour")) {
duration = this.getCellCountInDay()
}
if (duration < 0) {
duration = 0
}
return (differenceInDays - skippedDaysCount) * this.getCellCountInDay() + duration
}
getIndicationWidth() {
if (this.isGroupedByDate()) {
const cellCount = this.getIndicationCellCount();
const integerPart = Math.floor(cellCount);
const fractionPart = cellCount - integerPart;
return this.getCellWidth() * (integerPart * this.getGroupCount() + fractionPart)
}
return this.getIndicationCellCount() * this.getCellWidth()
}
isVerticalShader() {
return false
}
isCurrentTimeHeaderCell() {
return false
}
setTableSizes() {
super.setTableSizes();
const minHeight = this.getWorkSpaceMinHeight();
setHeight(this.$sidebarTable, minHeight);
setHeight(this.$dateTable, minHeight);
this.virtualScrollingDispatcher.updateDimensions()
}
getWorkSpaceMinHeight() {
let minHeight = this.getWorkSpaceHeight();
const workspaceContainerHeight = getOuterHeight(this.$flexContainer, true);
if (minHeight < workspaceContainerHeight) {
minHeight = workspaceContainerHeight
}
return minHeight
}
getCellCoordinatesByIndex(index) {
return {
columnIndex: index % this.getCellCount(),
rowIndex: 0
}
}
getCellElementByPosition(cellCoordinates, groupIndex) {
const indexes = this.groupedStrategy.prepareCellIndexes(cellCoordinates, groupIndex);
return this.$dateTable.find("tr").eq(indexes.rowIndex).find("td").eq(indexes.columnIndex)
}
getWorkSpaceWidth() {
return getOuterWidth(this.$dateTable, true)
}
getIndicationFirstViewDate() {
return dateUtils.trimTime(new Date(this.getStartViewDate()))
}
getIntervalBetween(currentDate, allDay) {
const startDayHour = this.option("startDayHour");
const endDayHour = this.option("endDayHour");
const firstViewDate = this.getStartViewDate();
const firstViewDateTime = firstViewDate.getTime();
const hiddenInterval = (24 - endDayHour + startDayHour) * toMs("hour");
const timeZoneOffset = dateUtils.getTimezonesDifference(firstViewDate, currentDate);
const apptStart = currentDate.getTime();
const fullInterval = apptStart - firstViewDateTime - timeZoneOffset;
const fullDays = Math.floor(fullInterval / toMs("day"));
const tailDuration = fullInterval - fullDays * toMs("day");
let tailDelta = 0;
const skippedDaysCount = this.getSkippedDaysCount(firstViewDate, fullDays);
const cellCount = this.getCellCountInDay() * (fullDays - skippedDaysCount);
const gapBeforeAppt = apptStart - dateUtils.trimTime(new Date(currentDate)).getTime();
let result = cellCount * this.option("hoursInterval") * toMs("hour");
if (!allDay) {
const hour = currentDate.getHours();
switch (true) {
case hour < startDayHour:
tailDelta = tailDuration - hiddenInterval + gapBeforeAppt;
break;
case hour >= startDayHour && hour < endDayHour:
tailDelta = tailDuration;
break;
case hour >= endDayHour:
tailDelta = tailDuration - (gapBeforeAppt - endDayHour * toMs("hour"));
break;
case !fullDays:
result = fullInterval
}
result += tailDelta
}
return result
}
getAllDayContainer() {
return null
}
getTimePanelWidth() {
return 0
}
getIntervalDuration(allDay) {
return this.getCellDuration()
}
getCellMinWidth() {
return 0
}
getWorkSpaceLeftOffset() {
return 0
}
renderRAllDayPanel() {}
renderRTimeTable() {}
generateRenderOptions(isProvideVirtualCellsWidth) {
const options = super.generateRenderOptions(isProvideVirtualCellsWidth ?? true);
return Object.assign({}, options, {
isGenerateWeekDaysHeaderData: this.needRenderWeekHeader(),
getDateForHeaderText: timelineWeekUtils.getDateForHeaderText
})
}
_init() {
super._init();
this.$element().addClass(TIMELINE_CLASS);
this.$sidebarTable = $("<div>").addClass(GROUP_TABLE_CLASS)
}
getDefaultGroupStrategy() {
return "vertical"
}
toggleGroupingDirectionClass() {
this.$element().toggleClass(HORIZONTAL_GROUPED_WORKSPACE_CLASS, this.isHorizontalGroupedWorkSpace())
}
_getDefaultOptions() {
return extend(super._getDefaultOptions(), {
groupOrientation: "vertical"
})
}
createWorkSpaceElements() {
this.createWorkSpaceScrollableElements()
}
updateAllDayVisibility() {
return noop()
}
getDateHeaderTemplate() {
return this.option("timeCellTemplate")
}
renderView() {
this.renderWorkSpace();
this.virtualScrollingDispatcher.updateDimensions();
this.shader = new HorizontalShader(this);
this.$sidebarTable.appendTo(this.$sidebarScrollable.$content());
if (this.isVerticalGroupedWorkSpace()) {
this.renderRGroupPanel()
}
this.updateHeaderEmptyCellWidth()
}
setHorizontalGroupHeaderCellsHeight() {
return noop()
}
getTimePanelCells() {
return this.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`)
}
getCurrentTimePanelCellIndices() {
const columnCountPerGroup = this.getCellCount();
const today = this.getToday();
const index = this.getCellIndexByDate(today);
const {
columnIndex: currentTimeColumnIndex
} = this.getCellCoordinatesByIndex(index);
if (void 0 === currentTimeColumnIndex) {
return []
}
const horizontalGroupCount = this.isHorizontalGroupedWorkSpace() && !this.isGroupedByDate() ? this.getGroupCount() : 1;
return [...new Array(horizontalGroupCount)].map((_, groupIndex) => columnCountPerGroup * groupIndex + currentTimeColumnIndex)
}
renderIndicator(height, rtlOffset, $container, groupCount) {
let $indicator;
const width = this.getIndicationWidth();
if ("vertical" === this.option("groupOrientation")) {
$indicator = this.createIndicator($container);
setHeight($indicator, getBoundingRect($container.get(0)).height);
$indicator.css("left", rtlOffset ? rtlOffset - width : width)
} else {
for (let i = 0; i < groupCount; i += 1) {
const offset = this.isGroupedByDate() ? i * this.getCellWidth() : this.getCellCount() * this.getCellWidth() * i;
$indicator = this.createIndicator($container);
setHeight($indicator, getBoundingRect($container.get(0)).height);
$indicator.css("left", rtlOffset ? rtlOffset - width - offset : width + offset)
}
}
}
makeGroupRows(groups, groupByDate) {
const tableCreatorStrategy = "vertical" === this.option("groupOrientation") ? tableCreator.VERTICAL : tableCreator.HORIZONTAL;
return tableCreator.makeGroupedTable(tableCreatorStrategy, groups, {
groupRowClass: GROUP_ROW_CLASS,
groupHeaderRowClass: GROUP_ROW_CLASS,
groupHeaderClass: this.getGroupHeaderClass.bind(this),
groupHeaderContentClass: GROUP_HEADER_CONTENT_CLASS
}, this.getCellCount() || 1, this.option("resourceCellTemplate"), this.getTotalRowCount(this.getGroupCount()), groupByDate)
}
}
registerComponent("dxSchedulerTimeline", SchedulerTimeline);
export default SchedulerTimeline;