[Spike] Scheduler - Timeline Year View

packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_text.ts

@@ -18,6 +18,7 @@ const viewTypeLocalization: Record<ViewType, string> = {
   workWeek: 'dxScheduler-switcherWorkWeek',
   timelineDay: 'dxScheduler-switcherTimelineDay',
   timelineMonth: 'dxScheduler-switcherTimelineMonth',
+  timelineYear: 'dxScheduler-switcherTimelineYear',
   timelineWeek: 'dxScheduler-switcherTimelineWeek',
   timelineWorkWeek: 'dxScheduler-switcherTimelineWorkWeek',
 };
@@ -54,7 +55,7 @@ export const getA11yStatusText = (
   const viewType = view?.type;
   const viewName = view?.name;
   const viewTypeLabel = localizeName(viewName, viewType);
-  const isMonth = viewType === 'month' || viewType === 'timelineMonth';
+  const isMonth = viewType === 'month' || viewType === 'timelineMonth' || viewType === 'timelineYear';
   const startDateText = isMonth ? localizeMonth(startDate) : localizeDate(startDate);
   const endDateText = isMonth ? localizeMonth(endDate) : localizeDate(endDate);
   const intervalText = startDateText === endDateText

packages/devextreme/js/__internal/scheduler/appointments/resizing/get_delta_time.ts

@@ -50,6 +50,8 @@ export const getDeltaTime = (
   switch (true) {
     case ['timelineMonth', 'month'].includes(viewType) || Boolean(isAllDayPanel):
       return getAllDayDeltaWidth(args, initialSize, resizableStep) * toMs('day');
+    case ['timelineYear'].includes(viewType):
+      return toMs('week');
     case viewType === 'agenda':
       return 0;
     case VERTICAL_VIEW_TYPES.includes(viewType) && !isAllDayPanel:

packages/devextreme/js/__internal/scheduler/header/m_header.ts

@@ -48,7 +48,8 @@ export class SchedulerHeader extends Widget<HeaderOptions> {
   _calendar: any;
 
   get captionText() {
-    return this._getCaption().text;
+    return 'ABOBA';
+    // return this._getCaption().text;
   }
 
   getIntervalOptions(date: Date): IntervalOptions {

packages/devextreme/js/__internal/scheduler/header/m_utils.ts

@@ -88,6 +88,8 @@ const getIntervalStartDate = (options: IntervalOptions) => {
       return getWorkWeekStart(firstWeekDay);
     case 'agenda':
       return new Date(date);
+    case 'year':
+      break;
   }
 };
 
@@ -133,6 +135,8 @@ const getPeriodEndDate = (currentPeriodStartDate: Date, step: Step, agendaDurati
     case 'month':
       date = nextMonth(currentPeriodStartDate);
       break;
+    case 'year':
+      break;
     case 'workWeek':
       date = getDateAfterWorkWeek(currentPeriodStartDate);
       break;
@@ -323,6 +327,7 @@ const STEP_MAP: Record<ViewType, Step> = {
   timelineWeek: 'week',
   timelineWorkWeek: 'workWeek',
   timelineMonth: 'month',
+  timelineYear: 'year',
   agenda: 'agenda',
 } as const;
 

packages/devextreme/js/__internal/scheduler/header/types.ts

@@ -18,7 +18,7 @@ export interface HeaderOptions {
   customizeDateNavigatorText: SafeSchedulerOptions['customizeDateNavigatorText'];
 }
 
-export type Step = 'day' | 'week' | 'workWeek' | 'month' | 'agenda';
+export type Step = 'day' | 'week' | 'workWeek' | 'month' | 'agenda' | 'year';
 
 export interface IntervalOptions {
   date: Date;

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -85,6 +85,7 @@ import SchedulerTimelineDay from './workspaces/m_timeline_day';
 import SchedulerTimelineMonth from './workspaces/m_timeline_month';
 import SchedulerTimelineWeek from './workspaces/m_timeline_week';
 import SchedulerTimelineWorkWeek from './workspaces/m_timeline_work_week';
+import SchedulerTimelineYear from './workspaces/m_timeline_year';
 import SchedulerWorkSpaceDay from './workspaces/m_work_space_day';
 import SchedulerWorkSpaceMonth from './workspaces/m_work_space_month';
 import SchedulerWorkSpaceWeek from './workspaces/m_work_space_week';
@@ -135,6 +136,10 @@ const VIEWS_CONFIG = {
     workSpace: SchedulerTimelineMonth,
     renderingStrategy: 'horizontalMonthLine',
   },
+  timelineYear: {
+    workSpace: SchedulerTimelineYear,
+    renderingStrategy: 'horizontalMonthLine',
+  },
   agenda: {
     workSpace: SchedulerAgenda,
     renderingStrategy: 'agenda',

packages/devextreme/js/__internal/scheduler/m_subscribes.ts

@@ -197,7 +197,7 @@ const subscribes = {
   },
 
   needCorrectAppointmentDates() {
-    return !['month', 'timelineMonth'].includes(this.currentView.type);
+    return !['month', 'timelineMonth', 'timelineYear'].includes(this.currentView.type);
   },
 
   getRenderingStrategyDirection() {

packages/devextreme/js/__internal/scheduler/r1/utils/base.ts

@@ -214,21 +214,25 @@ const TIMELINE_VIEWS = [
   VIEWS.TIMELINE_WEEK,
   VIEWS.TIMELINE_WORK_WEEK,
   VIEWS.TIMELINE_MONTH,
+  VIEWS.TIMELINE_YEAR,
 ];
 export const isTimelineView = (
   viewType?: ViewType,
 ): boolean => Boolean(viewType && TIMELINE_VIEWS.includes(viewType));
 
 export const isDateAndTimeView = (
   viewType: ViewType,
-): boolean => viewType !== VIEWS.TIMELINE_MONTH && viewType !== VIEWS.MONTH;
+): boolean => ![
+  VIEWS.MONTH, VIEWS.TIMELINE_MONTH, VIEWS.TIMELINE_YEAR,
+].includes(viewType);
 
 export const isHorizontalView = (viewType: ViewType): boolean => {
   switch (viewType) {
     case VIEWS.TIMELINE_DAY:
     case VIEWS.TIMELINE_WEEK:
     case VIEWS.TIMELINE_WORK_WEEK:
     case VIEWS.TIMELINE_MONTH:
+    case VIEWS.TIMELINE_YEAR:
     case VIEWS.MONTH:
       return true;
     default:
@@ -294,6 +298,9 @@ export const getCellDuration = (
     case 'timelineMonth':
       return dateUtils.dateToMilliseconds('day');
 
+    case 'timelineYear':
+      return dateUtils.dateToMilliseconds('week');
+
     default:
       return 3600000 * hoursInterval;
   }

packages/devextreme/js/__internal/scheduler/types.ts

@@ -6,7 +6,7 @@ import type { AppointmentViewModelPlain } from './view_model/types';
 
 export type Direction = 'vertical' | 'horizontal';
 export type GroupOrientation = 'vertical' | 'horizontal';
-export type ViewType = 'agenda' | 'day' | 'month' | 'timelineDay' | 'timelineMonth' | 'timelineWeek' | 'timelineWorkWeek' | 'week' | 'workWeek';
+export type ViewType = 'agenda' | 'day' | 'month' | 'timelineDay' | 'timelineMonth' | 'timelineYear' | 'timelineWeek' | 'timelineWorkWeek' | 'week' | 'workWeek';
 export type AllDayPanelModeType = 'all' | 'allDay' | 'hidden';
 export type RenderStrategyName = 'horizontal' | 'horizontalMonth' | 'horizontalMonthLine' | 'vertical' | 'week' | 'agenda';
 export type FilterItemType = Record<string, string | number> | string | number;

packages/devextreme/js/__internal/scheduler/utils/options/constants_view.ts

@@ -9,6 +9,7 @@ export const VIEWS: Record<string, ViewType> = {
   TIMELINE_WEEK: 'timelineWeek',
   TIMELINE_WORK_WEEK: 'timelineWorkWeek',
   TIMELINE_MONTH: 'timelineMonth',
+  TIMELINE_YEAR: 'timelineYear',
   AGENDA: 'agenda',
 };
 export const VIEW_TYPES: ViewType[] = Object.values(VIEWS);
@@ -36,6 +37,7 @@ export const DEFAULT_VIEW_OPTIONS: Record<Exclude<ViewType, 'agenda'>, View> & {
   timelineWeek: getView('timelineWeek', 'vertical'),
   timelineWorkWeek: getView('timelineWorkWeek', 'vertical', WEEKENDS),
   timelineMonth: getView('timelineMonth', 'vertical'),
+  timelineYear: getView('timelineYear', 'vertical'),
   agenda: {
     agendaDuration: 7,
     intervalCount: 1,

packages/devextreme/js/__internal/scheduler/utils/options/types.ts

@@ -11,6 +11,7 @@ export type View = ViewObject & Required<Pick<ViewObject,
 >> & {
   skippedDays: number[];
 };
+
 export type AgendaView = ViewObject & Required<Pick<ViewObject,
   'agendaDuration'
   | 'intervalCount'

packages/devextreme/js/__internal/scheduler/view_model/common/split_interval_by_days.ts

@@ -8,6 +8,7 @@ export const splitIntervalByDay = ({
   min,
   max,
   skippedDays,
+  cellInterval = 1,
 }: CompareOptions): DateInterval[] => {
   if (endDayHour < startDayHour) {
     return [];
@@ -36,7 +37,7 @@ export const splitIntervalByDay = ({
       });
     }
 
-    time.setUTCDate(time.getUTCDate() + 1);
+    time.setUTCDate(time.getUTCDate() + cellInterval);
   }
 
   return result;

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_group_size.ts

@@ -25,6 +25,7 @@ export const getGroupSize = ({
 }: Options): RealSize => {
   switch (viewType) {
     case 'month':
+    case 'timelineYear':
     case 'timelineMonth': {
       const intervalDaysCount = cells.filter((cell) => cell.rowIndex === 0).length;
       return {

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_month_intervals.ts

@@ -30,7 +30,7 @@ const cropIntervalsByDayHours = (
 
 export const getMonthIntervals = (
   {
-    startDayHour, endDayHour, skippedDays, ...dateInterval
+    startDayHour, endDayHour, skippedDays, cellInterval, ...dateInterval
   }: CompareOptions,
   viewOffset: number,
   isTimeline: boolean,
@@ -45,6 +45,7 @@ export const getMonthIntervals = (
     startDayHour,
     endDayHour,
     skippedDays,
+    cellInterval,
   });
   const shiftedCells = shiftIntervals(cells, viewOffset);
 

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_one_day_cell_intervals.ts

@@ -6,16 +6,18 @@ interface Options {
   startDayHour: number;
   endDayHour: number;
   skippedDays: number[];
+  cellInterval?: number;
 }
 
 export const getOneDayCellIntervals = ({
   intervals,
   startDayHour,
   endDayHour,
   skippedDays,
+  cellInterval = 1,
 }: Options): CellInterval[] => intervals.reduce<CellInterval[]>((result, interval, rowIndex) => {
   const cells = splitIntervalByDay({
-    ...interval, startDayHour, endDayHour, skippedDays,
+    ...interval, startDayHour, endDayHour, skippedDays, cellInterval,
   });
 
   let columnIndex = 0;

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts

@@ -18,6 +18,7 @@ const configByView: Record<Exclude<ViewType, 'agenda'>, {
   timelineWeek: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },
   timelineWorkWeek: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },
   timelineMonth: { isTimelineView: true, isMonthView: true, viewOrientation: 'horizontal' },
+  timelineYear: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },
 };
 
 export interface ViewModelOptions {

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.ts

@@ -22,8 +22,13 @@ const getLayoutIntervals = (
   viewOffset: number,
   isTimeline: boolean,
   isMonthView: boolean,
+  isYearView: boolean,
   panelName: PanelName,
 ): LayoutIntervals => {
+  if (isYearView) {
+    return getMonthIntervals({ ...compareOptions, cellInterval: 7 }, viewOffset, true);
+  }
+
   switch (true) {
     case isMonthView:
       return getMonthIntervals(compareOptions, viewOffset, isTimeline);
@@ -106,6 +111,7 @@ export class OptionManager {
         viewOffset,
         isTimelineView || panelName === 'allDayPanel',
         isMonthView,
+        this.schedulerStore.option('currentView') === 'timelineYear',
         panelName,
       );
 

packages/devextreme/js/__internal/scheduler/view_model/types.ts

@@ -30,6 +30,7 @@ export interface CompareOptions {
   min: number;
   max: number;
   skippedDays: number[];
+  cellInterval?: number;
 }
 
 export interface LayoutIntervals {

packages/devextreme/js/__internal/scheduler/workspaces/m_timeline_year.ts

@@ -0,0 +1,69 @@
+import registerComponent from '@js/core/component_registrator';
+import dateUtils from '@js/core/utils/date';
+// NOTE: Renovation component import.
+import { HeaderPanelComponent } from '@ts/scheduler/r1/components/index';
+import { formatWeekdayAndDay, monthUtils } from '@ts/scheduler/r1/utils/index';
+
+import { VIEWS } from '../utils/options/constants_view';
+import SchedulerTimeline from './m_timeline';
+
+const TIMELINE_CLASS = 'dx-scheduler-timeline-month';
+
+class SchedulerTimelineYear extends SchedulerTimeline {
+  get type() { return VIEWS.TIMELINE_YEAR; }
+
+  readonly viewDirection = 'horizontal';
+
+  get renovatedHeaderPanelComponent() { return HeaderPanelComponent; }
+
+  _renderView() {
+    super._renderView();
+
+    this._updateScrollable();
+  }
+
+  _getElementClass() {
+    return TIMELINE_CLASS;
+  }
+
+  _getDateHeaderTemplate() {
+    return this.option('dateCellTemplate');
+  }
+
+  _calculateDurationInCells(timeDiff) {
+    return timeDiff / this.getCellDuration();
+  }
+
+  isIndicatorVisible() {
+    return true;
+  }
+
+  _getFormat() {
+    return (date: Date) => {
+      // return index of the week + date and month
+      const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+      const daysOffset = firstDayOfYear.getDay();
+      const dayOfYear = Math.ceil((date.getTime() - firstDayOfYear.getTime()) / dateUtils.dateToMilliseconds('day')) + 1;
+      const weekNumber = Math.ceil((dayOfYear + daysOffset - 1) / 7);
+
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      return `W${weekNumber} ${date.getDate()}/${months[date.getMonth()]}`;
+    };
+  }
+
+  generateRenderOptions() {
+    const options = super.generateRenderOptions(true);
+    return {
+      ...options,
+      getDateForHeaderText: (_, date) => date,
+    };
+  }
+
+  keepOriginalHours() {
+    return true;
+  }
+}
+
+registerComponent('dxSchedulerTimelineYear', SchedulerTimelineYear as any);
+
+export default SchedulerTimelineYear;

packages/devextreme/js/__internal/scheduler/workspaces/view_model/m_view_data_generator_timeline_year.ts

@@ -0,0 +1,47 @@
+import dateUtils from '@js/core/utils/date';
+import { setOptionHour, timelineMonthUtils } from '@ts/scheduler/r1/utils/index';
+
+import timezoneUtils from '../../m_utils_time_zone';
+import { ViewDataGenerator } from './m_view_data_generator';
+
+const toMs = dateUtils.dateToMilliseconds;
+
+export class ViewDataGeneratorTimelineYear extends ViewDataGenerator {
+  calculateEndDate(startDate, interval, endDayHour) {
+    return setOptionHour(startDate, endDayHour);
+  }
+
+  getInterval(): number {
+    return toMs('week');
+  }
+
+  _calculateStartViewDate(options: any) {
+    const date = new Date(options.currentDate.getFullYear(), 0, 1, 0, 0, 0, 0);
+
+    return date;
+  }
+
+  getCellCount(options) {
+    const year = options.currentDate.getFullYear();
+    const firstDayOfYear = new Date(year, 0, 1);
+    const lastDayOfYear = new Date(year, 11, 31);
+    const firstDayOfYearWeekday = firstDayOfYear.getDay() || 7; // Make Sunday (0) the 7th day
+    const daysInYear = (lastDayOfYear.getTime() - firstDayOfYear.getTime()) / toMs('day') + 1;
+    const totalDaysWithOffset = daysInYear + (firstDayOfYearWeekday - 1);
+    const weeksInYear = Math.ceil(totalDaysWithOffset / 7);
+
+    return weeksInYear;
+  }
+
+  setHiddenInterval() {
+    this.hiddenInterval = 0;
+  }
+
+  protected getCellEndDate(cellStartDate: Date, options: any): Date {
+    const daysToAdd = 7;
+    const cellEndDate = new Date(cellStartDate);
+    cellEndDate.setDate(cellStartDate.getDate() + daysToAdd);
+
+    return timezoneUtils.addOffsetsWithoutDST(cellEndDate, 0);
+  }
+}