Scheduler — Year view

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,53 @@
+.dx-scheduler-work-space-year {
+    .dx-scheduler-year-calendars-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-column-gap: 12px;
+        grid-row-gap: 20px;
+        padding: 12px;
+
+        .dx-scheduler-year-calendar-item {
+            .dx-scheduler-year-calendar-label {
+                font-size: 14px;
+                font-weight: 500;
+                margin-bottom: 8px;
+                text-align: center;
+            }
+
+            table {
+                width: 100%;
+                table-layout: fixed;
+                border-spacing: 0;
+                line-height: normal;
+            }
+
+            td,
+            th {
+                padding: 0;
+            }
+
+            .dx-calendar-cell {
+                cursor: pointer;
+
+                &.dx-calendar-other-month {
+                    opacity: 0.5;
+                }
+
+                &:hover {
+                    background-color: #f5f5f5;
+                }
+
+                .dx-scheduler-year-calendar-has-appointment {
+                    background-color: #337ab7;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: inline-block;
+                    width: 1.5em;
+                    height: 1.5em;
+                    line-height: 1.5em;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}

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',
@@ -888,6 +893,10 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     if (this._isAgenda()) {
       this._workSpace.renderAgendaLayout(viewModel);
     }
+
+    if (this.currentView.type === 'year') {
+      workspace.repaint();
+    }
   }
 
   _initExpressions(fields: IFieldExpr) {
@@ -1308,6 +1317,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/appointments_layout_manager.ts

@@ -39,6 +39,9 @@ class AppointmentLayoutManager {
 
   public generateViewModel(): AppointmentViewModelPlain[] {
     const viewType = this.schedulerStore.currentView.type;
+    if (viewType === 'year') {
+      return [];
+    }
     if (viewType === 'agenda') {
       const viewModel = generateAgendaViewModel(this.schedulerStore, this.filteredItems);
       return viewModel.map((item) => ({

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' },