feat: create spike

Author: sjbur

packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss

@@ -60,6 +60,7 @@ $scheduler-month-date-text-padding: 6px;
   $scheduler-month-date-text-padding: $scheduler-month-date-text-padding,
   $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
 );
+@use "./year";
 @use "./timelines" with (
   $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
   $scheduler-accent-border: $scheduler-accent-border,

packages/devextreme-scss/scss/widgets/base/scheduler/views/year/_index.scss

@@ -0,0 +1,47 @@
+.dx-scheduler-work-space-year {
+    .dx-scheduler-all-day-title {
+        display: none;
+    }
+
+    .dx-scheduler-header-panel {
+        display: none;
+    }
+
+    .dx-scheduler-time-panel {
+        display: none;
+    }
+
+    .dx-scheduler-year-calendars-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-column-gap: 12px;
+        grid-row-gap: 20px;
+        padding: 12px;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .dx-scheduler-year-calendar-label {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        text-align: center;
+    }
+
+    .dx-scheduler-year-calendar-wrapper {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        width: 100%;
+
+        .dx-calendar-navigator {
+            display: none;
+        }
+
+        .dx-calendar-cell.dx-calendar-selected-date span {
+            color: unset;
+            background-color: unset;
+        }
+    }
+}

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

@@ -14,6 +14,7 @@ const viewTypeLocalization: Record<ViewType, string> = {
   agenda: 'dxScheduler-switcherAgenda',
   day: 'dxScheduler-switcherDay',
   month: 'dxScheduler-switcherMonth',
+  year: 'dxScheduler-switcherYear',
   week: 'dxScheduler-switcherWeek',
   workWeek: 'dxScheduler-switcherWorkWeek',
   timelineDay: 'dxScheduler-switcherTimelineDay',

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

@@ -81,6 +81,7 @@ const getIntervalStartDate = (options: IntervalOptions) => {
     case 'day':
     case 'week':
     case 'month':
+    case 'year':
       return getPeriodStart(date, step, false, firstDayOfWeek);
     case 'workWeek':
       // eslint-disable-next-line no-case-declarations
@@ -133,6 +134,10 @@ const getPeriodEndDate = (currentPeriodStartDate: Date, step: Step, agendaDurati
     case 'month':
       date = nextMonth(currentPeriodStartDate);
       break;
+    case 'year':
+      date = new Date(currentPeriodStartDate);
+      date.setFullYear(date.getFullYear() + 1);
+      break;
     case 'workWeek':
       date = getDateAfterWorkWeek(currentPeriodStartDate);
       break;
@@ -176,6 +181,10 @@ export const getNextIntervalDate = (options, direction: Direction): Date => {
       break;
     case 'month':
       return getNextMonthDate(date, intervalCount, direction);
+    case 'year':
+    { const nextYearDate = new Date(date);
+      nextYearDate.setFullYear(nextYearDate.getFullYear() + intervalCount * direction);
+      return nextYearDate; }
   }
 
   return addDateInterval(date, { days: dayDuration }, direction);
@@ -299,6 +308,10 @@ const getCaptionText = (startDate: Date, endDate: Date, isShort: boolean, step):
     return formatMonthViewCaption(startDate, endDate);
   }
 
+  if (step === 'year') {
+    return String(formatDate(startDate, 'year') ?? '');
+  }
+
   return formatCaptionByMonths(startDate, endDate, isShort);
 };
 
@@ -319,6 +332,7 @@ const STEP_MAP: Record<ViewType, Step> = {
   week: 'week',
   workWeek: 'workWeek',
   month: 'month',
+  year: 'year',
   timelineDay: 'day',
   timelineWeek: 'week',
   timelineWorkWeek: 'workWeek',

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' | 'year' | 'agenda';
 
 export interface IntervalOptions {
   date: Date;

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

@@ -89,6 +89,7 @@ import SchedulerWorkSpaceDay from './workspaces/m_work_space_day';
 import SchedulerWorkSpaceMonth from './workspaces/m_work_space_month';
 import SchedulerWorkSpaceWeek from './workspaces/m_work_space_week';
 import SchedulerWorkSpaceWorkWeek from './workspaces/m_work_space_work_week';
+import SchedulerWorkSpaceYear from './workspaces/m_work_space_year';
 
 const toMs = dateUtils.dateToMilliseconds;
 
@@ -119,6 +120,10 @@ const VIEWS_CONFIG = {
     workSpace: SchedulerWorkSpaceMonth,
     renderingStrategy: 'horizontalMonth',
   },
+  year: {
+    workSpace: SchedulerWorkSpaceYear,
+    renderingStrategy: 'horizontalMonth',
+  },
   timelineDay: {
     workSpace: SchedulerTimelineDay,
     renderingStrategy: 'horizontal',
@@ -1308,6 +1313,15 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     const currentViewType = this.currentView.type;
     const workSpaceComponent = VIEWS_CONFIG[currentViewType].workSpace;
     const workSpaceConfig = this._workSpaceConfig(this.currentView);
+    
+    // Add callback for year view date click
+    if (currentViewType === 'year') {
+      workSpaceConfig.onDateClick = (date: Date) => {
+        this.option('currentView', 'day');
+        this.option('currentDate', date);
+      };
+    }
+    
     // @ts-expect-error
     this._workSpace = this._createComponent($workSpace, workSpaceComponent, workSpaceConfig);
 

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' | 'year' | 'timelineDay' | 'timelineMonth' | '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

@@ -5,6 +5,7 @@ export const VIEWS: Record<string, ViewType> = {
   WEEK: 'week',
   WORK_WEEK: 'workWeek',
   MONTH: 'month',
+  YEAR: 'year',
   TIMELINE_DAY: 'timelineDay',
   TIMELINE_WEEK: 'timelineWeek',
   TIMELINE_WORK_WEEK: 'timelineWorkWeek',
@@ -32,6 +33,7 @@ export const DEFAULT_VIEW_OPTIONS: Record<Exclude<ViewType, 'agenda'>, View> & {
   week: getView('week', 'horizontal'),
   workWeek: getView('workWeek', 'horizontal', WEEKENDS),
   month: getView('month', 'horizontal'),
+  year: getView('year', 'horizontal'),
   timelineDay: getView('timelineDay', 'vertical'),
   timelineWeek: getView('timelineWeek', 'vertical'),
   timelineWorkWeek: getView('timelineWorkWeek', 'vertical', WEEKENDS),

packages/devextreme/js/__internal/scheduler/view_model/filtration/utils/get_filter_options/get_filter_options.ts

@@ -6,7 +6,7 @@ import type { FilterOptions } from '../../../types';
 import { getVisibleDateTimeIntervals } from './get_visible_date_time_intervals';
 
 const VIEWS_WITH_ALL_DAY_PANEL: ViewType[] = ['day', 'week', 'workWeek'];
-const DATE_TIME_VIEWS: ViewType[] = ['day', 'week', 'workWeek', 'timelineDay', 'timelineWeek', 'timelineWorkWeek'];
+const DATE_TIME_VIEWS: ViewType[] = ['day', 'week', 'workWeek', 'year', 'timelineDay', 'timelineWeek', 'timelineWorkWeek'];
 
 export const getFilterOptions = (schedulerStore: Scheduler): FilterOptions => {
   const compareOptions = getCompareOptions(schedulerStore);

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

@@ -14,6 +14,7 @@ const configByView: Record<Exclude<ViewType, 'agenda'>, {
   week: { isTimelineView: false, isMonthView: false, viewOrientation: 'vertical' },
   workWeek: { isTimelineView: false, isMonthView: false, viewOrientation: 'vertical' },
   month: { isTimelineView: false, isMonthView: true, viewOrientation: 'horizontal' },
+  year: { isTimelineView: false, isMonthView: true, viewOrientation: 'horizontal' },
   timelineDay: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },
   timelineWeek: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },
   timelineWorkWeek: { isTimelineView: true, isMonthView: false, viewOrientation: 'horizontal' },