diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
index b6779c03f5e5..3855fdb3bb56 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
@@ -94,6 +94,7 @@ $reduced-icon-offset: null !default;
   background-clip: padding-box;
   position: absolute;
   cursor: default;
+  outline: none;
 
   @include user-select(none);
 
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/appointments_new.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/appointments_new.test.ts
index 3f56d8ea273f..eb6bf531eed7 100644
--- a/packages/devextreme/js/__internal/scheduler/__tests__/appointments_new.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/__tests__/appointments_new.test.ts
@@ -66,6 +66,18 @@ describe('New Appointments', () => {
         return $(POM.getAppointments()[0].element).text() === 'Custom appointment';
       };
 
+      it('should render default template', async () => {
+        const { POM } = await createScheduler(config);
+
+        if (templateName === 'appointmentCollectorTemplate') {
+          const collectorButton = POM.getCollectorButton();
+          expect(collectorButton.textContent).toBe('1');
+        } else {
+          const appointment = POM.getAppointments()[0];
+          expect(appointment.getText()).toBe('Appointment 1');
+        }
+      });
+
       it('should apply custom template', async () => {
         const { POM } = await createScheduler({
           ...config,
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_collector.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_collector.ts
new file mode 100644
index 000000000000..34828b78d721
--- /dev/null
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_collector.ts
@@ -0,0 +1,45 @@
+import $ from '@js/core/renderer';
+import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
+import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
+
+import type { AppointmentCollectorProperties } from '../appointment_collector';
+import { AppointmentCollector } from '../appointment_collector';
+
+export const getAppointmentCollectorProperties = (
+  appointmentsData: SafeAppointment[],
+): AppointmentCollectorProperties => {
+  const targetedAppointmentData: TargetedAppointment = {
+    ...appointmentsData[0],
+    displayStartDate: appointmentsData[0].startDate as Date,
+    displayEndDate: appointmentsData[0].endDate as Date,
+  };
+
+  const config: AppointmentCollectorProperties = {
+    tabIndex: 0,
+    sortedIndex: 0,
+    appointmentsData,
+    isCompact: false,
+    geometry: {
+      height: 30,
+      width: 30,
+      top: 0,
+      left: 0,
+    },
+    targetedAppointmentData,
+    appointmentCollectorTemplate: new EmptyTemplate(),
+    onFocusIn: () => {},
+    onFocusOut: () => {},
+    onKeyDown: () => {},
+  };
+
+  return config;
+};
+
+export const createAppointmentCollector = (
+  properties: AppointmentCollectorProperties,
+): AppointmentCollector => {
+  const $element = $('.root');
+
+  // @ts-expect-error
+  return new AppointmentCollector($element, properties);
+};
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts
index 1a10a4fc3cd9..f74399dda0e2 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts
@@ -1,11 +1,12 @@
+import $ from '@js/core/renderer';
 import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
 import { mockAppointmentDataAccessor } from '@ts/scheduler/__mock__/appointment_data_accessor.mock';
 import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
 
-import type { BaseAppointmentViewProperties } from '../appointment/base_appointment';
+import { BaseAppointmentView, type BaseAppointmentViewProperties } from '../appointment/base_appointment';
 
-export const getBaseAppointmentProperties = (
+export const getBaseAppointmentViewProperties = (
   appointmentData: SafeAppointment,
   targetedAppointmentData?: TargetedAppointment,
 ): BaseAppointmentViewProperties => {
@@ -17,13 +18,32 @@ export const getBaseAppointmentProperties = (
 
   const config: BaseAppointmentViewProperties = {
     index: 0,
+    tabIndex: 0,
+    sortedIndex: 0,
     appointmentData,
     targetedAppointmentData: normalizedTargetedAppointmentData,
     appointmentTemplate: new EmptyTemplate(),
-    onAppointmentRendered: () => {},
+    onRendered: () => {},
+    onFocusIn: () => {},
+    onFocusOut: () => {},
+    onKeyDown: () => {},
     getDataAccessor: (): AppointmentDataAccessor => mockAppointmentDataAccessor,
     getResourceColor: (): Promise<string | undefined> => Promise.resolve(undefined),
   };
 
   return config;
 };
+
+export const createBaseAppointment = async (
+  properties: BaseAppointmentViewProperties,
+): Promise<BaseAppointmentView> => {
+  const $element = $('.root');
+
+  // @ts-expect-error
+  const instance = new BaseAppointmentView($element, properties);
+
+  // Await for resources
+  await new Promise(process.nextTick);
+
+  return instance;
+};
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.ts
index da1a3b867064..47d562fbcd6c 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.ts
@@ -6,7 +6,7 @@ import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 import type { AppointmentResource } from '@ts/scheduler/utils/resource_manager/appointment_groups_utils';
 
 import fx from '../../../common/core/animation/fx';
-import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
+import { getBaseAppointmentViewProperties } from '../__mock__/appointment_properties';
 import { AGENDA_APPOINTMENT_CLASSES, APPOINTMENT_CLASSES } from '../const';
 import type { AgendaAppointmentViewProperties } from './agenda_appointment';
 import { AgendaAppointmentView } from './agenda_appointment';
@@ -15,7 +15,7 @@ const getProperties = (
   appointmentData: SafeAppointment,
   targetedAppointmentData?: TargetedAppointment,
 ): AgendaAppointmentViewProperties => {
-  const baseProperties = getBaseAppointmentProperties(
+  const baseProperties = getBaseAppointmentViewProperties(
     appointmentData,
     targetedAppointmentData,
   );
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.ts
index ad4b8985b0ea..bf85202b6577 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.ts
@@ -4,7 +4,11 @@ import type { SafeAppointment } from '@ts/scheduler/types';
 import type { AppointmentResource } from '@ts/scheduler/utils/resource_manager/appointment_groups_utils';
 
 import {
-  AGENDA_APPOINTMENT_CLASSES, ALL_DAY_TEXT, APPOINTMENT_CLASSES, RECURRING_LABEL,
+  AGENDA_APPOINTMENT_CLASSES,
+  ALL_DAY_TEXT,
+  APPOINTMENT_CLASSES,
+  APPOINTMENT_TYPE_CLASSES,
+  RECURRING_LABEL,
 } from '../const';
 import type { BaseAppointmentViewProperties } from './base_appointment';
 import { BaseAppointmentView } from './base_appointment';
@@ -32,11 +36,11 @@ export class AgendaAppointmentView extends BaseAppointmentView<AgendaAppointment
       .toggleClass(AGENDA_APPOINTMENT_CLASSES.LAST_IN_DATE, this.option().modifiers.isLastInGroup);
   }
 
-  public override resize(): void {
-    this.$element().css({
-      height: this.option().geometry.height,
-      width: this.option().geometry.width,
-    });
+  public override resize(geometry?: { height: number, width: string | number }): void {
+    const newGeometry = geometry ?? this.option().geometry;
+    const { height, width } = newGeometry;
+
+    this.$element().css({ height, width });
   }
 
   protected override defaultAppointmentContent(
@@ -60,6 +64,7 @@ export class AgendaAppointmentView extends BaseAppointmentView<AgendaAppointment
     // eslint-disable-next-line no-void
     void this.option().getResourceColor().then((color) => {
       if (color) {
+        this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
         $marker.css('backgroundColor', color);
       }
     });
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.test.ts
index de9ea8198a70..5e1d3c4bef71 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.test.ts
@@ -4,24 +4,8 @@ import {
 import $ from '@js/core/renderer';
 
 import fx from '../../../common/core/animation/fx';
-import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
+import { createBaseAppointment, getBaseAppointmentViewProperties as getProperties } from '../__mock__/appointment_properties';
 import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
-import type { BaseAppointmentViewProperties } from './base_appointment';
-import { BaseAppointmentView } from './base_appointment';
-
-const createBaseAppointment = async (
-  properties: BaseAppointmentViewProperties,
-): Promise<BaseAppointmentView> => {
-  const $element = $('.root');
-
-  // @ts-expect-error
-  const instance = new BaseAppointmentView($element, properties);
-
-  // Await for resources
-  await new Promise(process.nextTick);
-
-  return instance;
-};
 
 const defaultAppointmentData = {
   title: 'Test appointment',
@@ -51,7 +35,7 @@ describe('BaseAppointment', () => {
   describe('Classes', () => {
     it('should have container class', async () => {
       const instance = await createBaseAppointment(
-        getBaseAppointmentProperties(defaultAppointmentData),
+        getProperties(defaultAppointmentData),
       );
 
       expect(instance.$element().hasClass(APPOINTMENT_CLASSES.CONTAINER)).toBe(true);
@@ -61,7 +45,7 @@ describe('BaseAppointment', () => {
       true, false,
     ])('should have correct class for isRecurring = %o', async (isRecurring) => {
       const instance = await createBaseAppointment(
-        getBaseAppointmentProperties({
+        getProperties({
           ...defaultAppointmentData,
           recurrenceRule: isRecurring ? 'FREQ=DAILY;COUNT=5' : undefined,
         }),
@@ -76,7 +60,7 @@ describe('BaseAppointment', () => {
       true, false,
     ])('should have correct class for allDay = %o', async (allDay) => {
       const instance = await createBaseAppointment(
-        getBaseAppointmentProperties({
+        getProperties({
           ...defaultAppointmentData,
           allDay,
         }),
@@ -91,7 +75,7 @@ describe('BaseAppointment', () => {
   describe('Aria', () => {
     it('should have role button', async () => {
       const instance = await createBaseAppointment(
-        getBaseAppointmentProperties(defaultAppointmentData),
+        getProperties(defaultAppointmentData),
       );
 
       expect(instance.$element().attr('role')).toBe('button');
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts
index 51cb121cc754..5e3a6a777011 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts
@@ -3,27 +3,28 @@ import registerComponent from '@js/core/component_registrator';
 import type { DxElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
 import { getPublicElement } from '@ts/core/m_element';
 import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
 import { FunctionTemplate } from '@ts/core/templates/m_function_template';
 import type { TemplateBase } from '@ts/core/templates/m_template_base';
-import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
-import DOMComponent from '@ts/core/widget/dom_component';
+import { click } from '@ts/events/m_short';
 import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
 
-import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
+import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES, FOCUSED_STATE_CLASS } from '../const';
 import { DateFormatType, getDateTextFromTargetAppointment } from '../utils/get_date_text';
+import type { ViewItemProperties } from '../view_item';
+import { EVENTS_NAMESPACE, ViewItem } from '../view_item';
 
 export interface BaseAppointmentViewProperties
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extends DOMComponentProperties<BaseAppointmentView<any>> {
+  extends ViewItemProperties {
   index: number;
   appointmentData: SafeAppointment;
   targetedAppointmentData: TargetedAppointment;
   appointmentTemplate: TemplateBase;
 
-  onAppointmentRendered: (e: {
+  onRendered: (e: {
     element: DxElement;
     appointmentData: SafeAppointment;
     targetedAppointmentData: TargetedAppointment;
@@ -35,7 +36,7 @@ export interface BaseAppointmentViewProperties
 
 export class BaseAppointmentView<
   TProperties extends BaseAppointmentViewProperties = BaseAppointmentViewProperties,
-> extends DOMComponent<BaseAppointmentView<TProperties>, TProperties> {
+> extends ViewItem<TProperties> {
   protected get targetedAppointmentData(): TargetedAppointment {
     return this.option().targetedAppointmentData;
   }
@@ -60,10 +61,17 @@ export class BaseAppointmentView<
     this.resize();
     this.applyElementClasses();
     this.applyAria();
+    this.attachFocusEvents();
+    this.attachClickEvent();
+    this.attachKeydownEvents();
     this.renderContentTemplate();
   }
 
-  public resize(): void { }
+  override _dispose(): void {
+    super._dispose();
+
+    click.off(this.$element(), EVENTS_NAMESPACE);
+  }
 
   protected applyElementClasses(): void {
     this.$element()
@@ -74,7 +82,31 @@ export class BaseAppointmentView<
 
   protected applyAria(): void {
     this.$element()
-      .attr('role', 'button');
+      .attr('role', 'button')
+      .attr('tabindex', -1);
+  }
+
+  private attachClickEvent(): void {
+    click.off(this.$element(), EVENTS_NAMESPACE);
+    click.on(
+      this.$element(),
+      this.onClick.bind(this),
+      EVENTS_NAMESPACE,
+    );
+  }
+
+  protected override onFocusIn(): void {
+    this.$element().addClass(FOCUSED_STATE_CLASS);
+
+    super.onFocusIn();
+  }
+
+  protected override onFocusOut(e: DxEvent): void {
+    this.$element()
+      .removeClass(FOCUSED_STATE_CLASS)
+      .attr('tabindex', -1);
+
+    super.onFocusOut(e);
   }
 
   protected getTitleText(): string {
@@ -128,7 +160,7 @@ export class BaseAppointmentView<
       },
       index: this.option().index,
       onRendered: () => {
-        this.option().onAppointmentRendered({
+        this.option().onRendered({
           element: getPublicElement(this.$element()),
           appointmentData: this.appointmentData,
           targetedAppointmentData: this.targetedAppointmentData,
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts
index 8e3df06770f7..4be78ad04664 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts
@@ -5,7 +5,7 @@ import $ from '@js/core/renderer';
 import type { SafeAppointment } from '@ts/scheduler/types';
 
 import fx from '../../../common/core/animation/fx';
-import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
+import { getBaseAppointmentViewProperties } from '../__mock__/appointment_properties';
 import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
 import type { GridAppointmentViewProperties } from './grid_appointment';
 import { GridAppointmentView } from './grid_appointment';
@@ -13,7 +13,7 @@ import { GridAppointmentView } from './grid_appointment';
 const getProperties = (
   appointmentData: SafeAppointment,
 ): GridAppointmentViewProperties => {
-  const baseProperties = getBaseAppointmentProperties(appointmentData);
+  const baseProperties = getBaseAppointmentViewProperties(appointmentData);
 
   return {
     ...baseProperties,
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.ts
index f8388dff4de3..f88edee5b703 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.ts
@@ -27,14 +27,16 @@ export class GridAppointmentView extends BaseAppointmentView<GridAppointmentView
     void this.applyElementColor();
   }
 
-  public override resize(): void {
-    const { geometry } = this.option();
+  public override resize(
+    geometry?: { height: number, width: number, top: number, left: number },
+  ): void {
+    const newGeometry = geometry ?? this.option().geometry;
+    const {
+      top, left, width, height,
+    } = newGeometry;
 
     this.$element().css({
-      height: geometry.height,
-      width: geometry.width,
-      top: geometry.top,
-      left: geometry.left,
+      height, width, top, left,
     });
   }
 
@@ -84,6 +86,7 @@ export class GridAppointmentView extends BaseAppointmentView<GridAppointmentView
     const color = await this.option().getResourceColor();
 
     if (color) {
+      this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
       this.$element().css('backgroundColor', color);
     }
   }
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.test.ts
index 0df69c54b1ca..75b49f0f1055 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.test.ts
@@ -2,46 +2,11 @@ import {
   afterEach, beforeEach, describe, expect, it, jest,
 } from '@jest/globals';
 import $ from '@js/core/renderer';
-import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
 
 import fx from '../../../common/core/animation/fx';
-import type { SafeAppointment, TargetedAppointment } from '../types';
-import type { AppointmentCollectorProperties } from './appointment_collector';
-import { AppointmentCollector } from './appointment_collector';
+import { createAppointmentCollector, getAppointmentCollectorProperties as getProperties } from './__mock__/appointment_collector';
 import { APPOINTMENT_COLLECTOR_CLASSES } from './const';
 
-const getProperties = (
-  appointmentsData: SafeAppointment[],
-): AppointmentCollectorProperties => {
-  const targetedAppointmentData: TargetedAppointment = {
-    ...appointmentsData[0],
-    displayStartDate: appointmentsData[0].startDate as Date,
-    displayEndDate: appointmentsData[0].endDate as Date,
-  };
-
-  return {
-    appointmentsData,
-    isCompact: false,
-    geometry: {
-      height: 30,
-      width: 30,
-      top: 0,
-      left: 0,
-    },
-    targetedAppointmentData,
-    appointmentCollectorTemplate: new EmptyTemplate(),
-  };
-};
-
-const createAppointmentCollector = (
-  properties: AppointmentCollectorProperties,
-): AppointmentCollector => {
-  const $element = $('.root');
-
-  // @ts-expect-error
-  return new AppointmentCollector($element, properties);
-};
-
 const defaultAppointmentData = {
   title: 'Test appointment',
   startDate: new Date(2024, 0, 1, 9, 0),
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.ts
index f220a29b2af4..586c89ee4447 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.ts
@@ -4,17 +4,18 @@ import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { EmptyTemplate } from '@js/core/templates/empty_template';
+import type { DxEvent } from '@js/events';
 import Button from '@js/ui/button';
 import { FunctionTemplate } from '@ts/core/templates/m_function_template';
 import type { TemplateBase } from '@ts/core/templates/m_template_base';
-import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
-import DOMComponent from '@ts/core/widget/dom_component';
 import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 
 import { APPOINTMENT_COLLECTOR_CLASSES } from './const';
+import type { ViewItemProperties } from './view_item';
+import { ViewItem } from './view_item';
 
 export interface AppointmentCollectorProperties
-  extends DOMComponentProperties<AppointmentCollector> {
+  extends ViewItemProperties {
   appointmentsData: SafeAppointment[];
   isCompact: boolean;
   geometry: {
@@ -28,7 +29,7 @@ export interface AppointmentCollectorProperties
 }
 
 export class AppointmentCollector
-  extends DOMComponent<AppointmentCollector, AppointmentCollectorProperties> {
+  extends ViewItem<AppointmentCollectorProperties> {
   private defaultAppointmentCollectorTemplate!: FunctionTemplate;
 
   private buttonInstance?: Button;
@@ -48,22 +49,35 @@ export class AppointmentCollector
   override _initMarkup(): void {
     super._initMarkup();
 
+    this.resize();
     this.applyElementClasses();
     this.applyElementAria();
-    this.resize();
+    this.attachFocusEvents();
+    this.attachKeydownEvents();
     this.renderContentTemplate();
   }
 
-  public resize(): void {
-    this.$element().css({
-      top: this.option().geometry.top,
-      left: this.option().geometry.left,
-    });
+  public override resize(
+    geometry?: { height: number, width: number, top: number, left: number },
+  ): void {
+    const newGeometry = geometry ?? this.option().geometry;
+    const {
+      top, left, width, height,
+    } = newGeometry;
 
-    this.buttonInstance?.option({
-      width: this.option().geometry.width,
-      height: this.option().geometry.height,
-    });
+    this.$element().css({ top, left });
+
+    this.buttonInstance?.option({ width, height });
+  }
+
+  public override makeFocusable(): void {
+    this.buttonInstance?.option('tabIndex', this.option().tabIndex);
+  }
+
+  protected override onFocusOut(e: DxEvent): void {
+    this.buttonInstance?.option('tabIndex', -1);
+
+    super.onFocusOut(e);
   }
 
   private applyElementClasses(): void {
@@ -97,6 +111,7 @@ export class AppointmentCollector
 
     this.buttonInstance = this._createComponent(this.$element(), Button, {
       type: 'default',
+      tabIndex: -1,
       width: this.option().geometry.width,
       height: this.option().geometry.height,
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -108,6 +123,7 @@ export class AppointmentCollector
           items: this.option().appointmentsData,
         },
       })),
+      onClick: this.onClick.bind(this),
     });
   }
 
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts
new file mode 100644
index 000000000000..36a0dff0dc4e
--- /dev/null
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts
@@ -0,0 +1,103 @@
+import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
+
+import { getRawAppointmentGroupValues } from '../utils/resource_manager/appointment_groups_utils';
+import type { SortedEntity } from '../view_model/types';
+import type { Appointments } from './appointments';
+
+export class AppointmentsFocusController {
+  private needRestoreFocusIndex = -1;
+
+  private get sortedAppointments(): SortedEntity[] {
+    return this.appointments.option().getSortedAppointments();
+  }
+
+  private get isVirtualScrolling(): boolean {
+    return this.appointments.option().isVirtualScrolling();
+  }
+
+  constructor(private readonly appointments: Appointments) { }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onAppointmentFocusIn(sortedIndex: number): void { }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onAppointmentFocusOut(e: DxEvent, sortedIndex: number): void {
+    const focusEvent = e.originalEvent as FocusEvent;
+
+    const $relatedTarget = $(focusEvent.relatedTarget as Element);
+    const { $commonContainer, $allDayContainer } = this.appointments;
+
+    const isFocusOutside = $relatedTarget.length === 0 || (
+      $relatedTarget.closest($commonContainer).length === 0
+      && $relatedTarget?.closest($allDayContainer ?? $()).length === 0
+    );
+
+    if (isFocusOutside) {
+      this.resetTabIndex();
+    }
+  }
+
+  public onAppointmentKeyDown(e: KeyboardKeyDownEvent, sortedIndex: number): void {
+    if (e.key === 'Tab') {
+      this.handleTabKeyDown(e, sortedIndex);
+    }
+  }
+
+  public resetTabIndex(): void {
+    if (this.needRestoreFocusIndex >= 0) {
+      const appointmentView = this.appointments.getViewItemBySortedIndex(
+        this.needRestoreFocusIndex,
+      );
+      appointmentView?.focus();
+      this.needRestoreFocusIndex = -1;
+      return;
+    }
+
+    // TODO: in virtual scrolling no appointment may be rendered in the initial viewport
+    this.appointments.getViewItemByIndex(0)?.makeFocusable();
+  }
+
+  private handleTabKeyDown(e: KeyboardKeyDownEvent, sortedIndex: number): void {
+    const nextIndex = sortedIndex + (e.shift ? -1 : 1);
+    const nextItemData = this.sortedAppointments[nextIndex];
+
+    if (!nextItemData) {
+      return;
+    }
+
+    e.originalEvent.preventDefault();
+    this.focusByItemData(nextItemData);
+  }
+
+  private focusByItemData(itemData: SortedEntity): void {
+    if (this.isVirtualScrolling) {
+      this.scrollToItem(itemData);
+    }
+
+    const appointmentView = this.appointments.getViewItemBySortedIndex(itemData.sortedIndex);
+
+    if (appointmentView) {
+      appointmentView.focus();
+    } else if (this.isVirtualScrolling) {
+      this.needRestoreFocusIndex = itemData.sortedIndex;
+    }
+  }
+
+  private scrollToItem(itemData: SortedEntity): void {
+    const { getStartViewDate, getResourceManager, scrollTo } = this.appointments.option();
+
+    const date = new Date(Math.max(
+      getStartViewDate().getTime(),
+      itemData.source.startDate,
+    ));
+
+    const group = getRawAppointmentGroupValues(
+      itemData.itemData,
+      getResourceManager().resources,
+    );
+
+    scrollTo(date, { group, allDay: itemData.allDay });
+  }
+}
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts
index 324ee673523c..5e56a1f186ae 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts
@@ -8,6 +8,7 @@ import { mockAppointmentDataAccessor } from '../__mock__/appointment_data_access
 import { getResourceManagerMock } from '../__mock__/resource_manager.mock';
 import type { ResourceConfig } from '../utils/loader/types';
 import type { AppointmentDataSource } from '../view_model/m_appointment_data_source';
+import type { AppointmentCollectorViewModel, AppointmentItemViewModel, SortedEntity } from '../view_model/types';
 import {
   mockAgendaViewModel,
   mockAppointmentCollectorViewModel,
@@ -29,11 +30,25 @@ const mockAppointmentDataSource = (): AppointmentDataSource => ({
 const getProperties = (options: {
   resources?: ResourceConfig[];
 } = {}): AppointmentsProperties => ({
+  currentView: 'week',
+  tabIndex: 0,
+  viewModel: [],
+  items: [],
+  $allDayContainer: $('<div>'),
+  appointmentTemplate: 'appointment',
+  appointmentCollectorTemplate: 'appointmentCollector',
+
+  onAppointmentRendered: (): void => {},
+
+  getStartViewDate: () => new Date(2024, 0, 1),
+  getSortedAppointments: () => [],
+  isVirtualScrolling: () => false,
+  scrollTo: (): void => {},
+
   getAppointmentDataSource: mockAppointmentDataSource,
   getResourceManager: () => getResourceManagerMock(options.resources ?? []),
   getDataAccessor: () => mockAppointmentDataAccessor,
-  currentView: 'week',
-} as AppointmentsProperties);
+});
 
 const createAppointments = (
   properties?: AppointmentsProperties,
@@ -139,26 +154,18 @@ describe('Appointments', () => {
     });
 
     it('should render allDay appointment to the allDay container', () => {
-      const $allDayContainer = $('.allday-container');
-
-      const instance = createAppointments({
-        ...getProperties(),
-        $allDayContainer,
-      });
+      const instance = createAppointments(getProperties());
       instance.option('viewModel', [
         mockGridViewModel({ ...defaultAppointmentData, allDay: true }, { sortedIndex: 0 }),
       ]);
 
       expect(instance.$element().find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(0);
-      expect($allDayContainer.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
+      expect(instance.option().$allDayContainer?.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
     });
 
     it('should not render allDay agenda appointment to the allDay container', () => {
-      const $allDayContainer = $('.allday-container');
-
       const instance = createAppointments({
         ...getProperties(),
-        $allDayContainer,
         currentView: 'agenda',
       });
       instance.option('viewModel', [
@@ -166,29 +173,26 @@ describe('Appointments', () => {
       ]);
 
       expect(instance.$element().find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
-      expect($allDayContainer.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(0);
+      expect(instance.option().$allDayContainer?.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(0);
     });
 
     it('should clean all day container when switching from grid view to agenda view', () => {
-      const $allDayContainer = $('.allday-container');
-
       const instance = createAppointments({
         ...getProperties(),
         currentView: 'week',
-        $allDayContainer,
       });
       instance.option('viewModel', [
         mockGridViewModel({ ...defaultAppointmentData, allDay: true }, { sortedIndex: 0 }),
       ]);
 
-      expect($allDayContainer.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
+      expect(instance.option().$allDayContainer?.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
 
       instance.option('currentView', 'agenda');
       instance.option('viewModel', [
         mockAgendaViewModel({ ...defaultAppointmentData, allDay: true }, { sortedIndex: 0 }),
       ]);
 
-      expect($allDayContainer.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(0);
+      expect(instance.option().$allDayContainer?.find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(0);
       expect(instance.$element().find(`.${APPOINTMENT_CLASSES.CONTAINER}`).length).toBe(1);
     });
 
@@ -348,6 +352,322 @@ describe('Appointments', () => {
     });
   });
 
+  describe('Options', () => {
+    it('should pass tabIndex change to view items', () => {
+      const instance = createAppointments(getProperties());
+      instance.option('viewModel', [
+        mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+        mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+      ]);
+
+      instance.getViewItemByIndex(0)?.focus();
+
+      instance.option('tabIndex', 2);
+
+      expect(instance.getViewItemByIndex(0)?.option('tabIndex')).toBe(2);
+      expect(instance.getViewItemByIndex(1)?.option('tabIndex')).toBe(2);
+      expect(instance.getViewItemByIndex(2)?.option('tabIndex')).toBe(2);
+    });
+
+    it('should not rerender view items on tabIndex change', () => {
+      const instance = createAppointments(getProperties());
+      instance.option('viewModel', [
+        mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+      ]);
+
+      const viewItem0 = instance.getViewItemByIndex(0)?.$element().get(0);
+      const viewItem2 = instance.getViewItemByIndex(1)?.$element().get(0);
+
+      instance.option('tabIndex', 2);
+
+      expect(instance.getViewItemByIndex(0)?.$element().get(0)).toBe(viewItem0);
+      expect(instance.getViewItemByIndex(1)?.$element().get(0)).toBe(viewItem2);
+    });
+  });
+
+  describe('Focus and keyboard navigation', () => {
+    describe('Basic navigation', () => {
+      it('should set tabindex=0 on first appointment and tabindex=-1 on others after render', () => {
+        const instance = createAppointments(getProperties());
+        instance.option('viewModel', [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+          mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+        ]);
+
+        expect(instance.getViewItemByIndex(0)?.$element().attr('tabindex')).toBe('0');
+        expect(instance.getViewItemByIndex(1)?.$element().attr('tabindex')).toBe('-1');
+        expect(instance.getViewItemByIndex(2)?.$element().attr('tabindex')).toBe('-1');
+      });
+
+      it('should restore tabindex=0 on first appointment and tabindex=-1 on others after rerender', () => {
+        const instance = createAppointments(getProperties());
+        instance.option('viewModel', [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+          mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+        ]);
+
+        instance.option('appointmentTemplate', () => {});
+
+        expect(instance.getViewItemByIndex(0)?.$element().attr('tabindex')).toBe('0');
+        expect(instance.getViewItemByIndex(1)?.$element().attr('tabindex')).toBe('-1');
+        expect(instance.getViewItemByIndex(2)?.$element().attr('tabindex')).toBe('-1');
+      });
+    });
+
+    describe.each([
+      'appointment',
+      'appointmentCollector',
+    ])('Basic navigation for %s', (type) => {
+      const createItem = (
+        data: typeof defaultAppointmentData,
+        overrides: { sortedIndex: number },
+      ): AppointmentItemViewModel | AppointmentCollectorViewModel => (
+        type === 'appointmentCollector'
+          ? mockAppointmentCollectorViewModel(data, overrides)
+          : mockGridViewModel(data, overrides)
+      );
+
+      it('should move focus to next view item on Tab', () => {
+        const viewModel = [
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          getSortedAppointments: () => viewModel as unknown as SortedEntity[],
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem0 = instance.getViewItemBySortedIndex(0);
+        const viewItem1 = instance.getViewItemBySortedIndex(1);
+
+        viewItem0?.focus();
+        viewItem0?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        expect(viewItem0?.$element().attr('tabindex')).toBe('-1');
+        expect(viewItem1?.$element().attr('tabindex')).toBe('0');
+        expect(document.activeElement).toBe(viewItem1?.$element().get(0) as HTMLElement);
+      });
+
+      it('should move focus to previous view item on Shift+Tab', () => {
+        const viewModel = [
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          getSortedAppointments: () => viewModel as unknown as SortedEntity[],
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem0 = instance.getViewItemBySortedIndex(0);
+        const viewItem1 = instance.getViewItemBySortedIndex(1);
+
+        viewItem1?.focus();
+        viewItem1?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true }),
+        );
+
+        expect(viewItem0?.$element().attr('tabindex')).toBe('0');
+        expect(viewItem1?.$element().attr('tabindex')).toBe('-1');
+        expect(document.activeElement).toBe(viewItem0?.$element().get(0) as HTMLElement);
+      });
+
+      it('should focus view item on click', () => {
+        const instance = createAppointments(getProperties());
+        instance.option('viewModel', [
+          createItem(defaultAppointmentData, { sortedIndex: 0 }),
+        ]);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        const element = viewItem?.$element().get(0) as HTMLElement;
+        element.click();
+
+        expect(element.getAttribute('tabindex')).toBe('0');
+        expect(document.activeElement).toBe(element);
+      });
+
+      it('should reset focused state when focus moves outside the container', () => {
+        const externalButton = $('<button>').prependTo($('.container')).get(0) as HTMLElement;
+
+        const instance = createAppointments(getProperties());
+        instance.option('viewModel', [
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          createItem({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+        ]);
+
+        instance.getViewItemBySortedIndex(1)?.focus();
+
+        externalButton.focus();
+
+        expect(instance.getViewItemByIndex(0)?.$element().attr('tabindex')).toBe('0');
+        expect(instance.getViewItemByIndex(1)?.$element().attr('tabindex')).toBe('-1');
+      });
+    });
+
+    describe('Virtual scrolling navigation', () => {
+      const makeSortedEntity = (
+        sortedIndex: number,
+        startDate: Date = new Date(2024, 0, 1, 9, 0),
+      ): SortedEntity => ({
+        sortedIndex,
+        allDay: false,
+        itemData: {},
+        source: {
+          startDate: startDate.getTime(),
+          endDate: startDate.getTime() + 3600000,
+        },
+      } as unknown as SortedEntity);
+
+      it('should call scrollTo on Tab when virtual scrolling is enabled', () => {
+        const scrollTo = jest.fn();
+
+        const instance = createAppointments({
+          ...getProperties(),
+          isVirtualScrolling: () => true,
+          scrollTo,
+          getSortedAppointments: () => [
+            makeSortedEntity(0), makeSortedEntity(1), makeSortedEntity(1),
+          ],
+        });
+        instance.option('viewModel', [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+        ]);
+
+        const viewItem1 = instance.getViewItemBySortedIndex(0);
+        viewItem1?.focus();
+        viewItem1?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        expect(scrollTo).toHaveBeenCalled();
+      });
+
+      it('should focus next appointment directly if it is already rendered', () => {
+        const instance = createAppointments({
+          ...getProperties(),
+          isVirtualScrolling: () => true,
+          getSortedAppointments: () => [
+            makeSortedEntity(0), makeSortedEntity(1), makeSortedEntity(2),
+          ],
+        });
+        instance.option('viewModel', [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 }),
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 2 }),
+        ]);
+
+        const viewItem1 = instance.getViewItemBySortedIndex(1);
+        const viewItem2 = instance.getViewItemBySortedIndex(2);
+
+        viewItem1?.focus();
+        viewItem1?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        expect(document.activeElement).toBe(viewItem2?.$element().get(0));
+      });
+
+      it('should restore focus to target appointment after it scrolls into view', () => {
+        const item0 = mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 });
+        const item1 = mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 1 });
+        const item2 = mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 2 });
+
+        const instance = createAppointments({
+          ...getProperties(),
+          isVirtualScrolling: () => true,
+          getSortedAppointments: () => [
+            makeSortedEntity(0), makeSortedEntity(1), makeSortedEntity(2),
+          ],
+        });
+
+        // item2 is outside the viewport — not in the initial viewModel
+        instance.option('viewModel', [item0, item1]);
+
+        const viewItem1 = instance.getViewItemBySortedIndex(1);
+        viewItem1?.focus();
+        viewItem1?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        // item2 is not rendered yet, so focus cannot move yet
+        expect(instance.getViewItemBySortedIndex(2)).toBeUndefined();
+
+        // viewModel updates as item2 scrolls into view
+        instance.option('viewModel', [item0, item1, item2]);
+
+        const $viewItem2 = instance.getViewItemBySortedIndex(2)?.$element();
+
+        expect(document.activeElement).toBe($viewItem2?.get(0));
+        expect($viewItem2?.attr('tabindex')).toBe('0');
+      });
+
+      it('should pass appointment start date to scrollTo when it is after the start view date', () => {
+        const scrollTo = jest.fn();
+        const startViewDate = new Date(2024, 0, 1);
+        const appointmentStartDate = new Date(2024, 0, 5, 9, 0); // after startViewDate
+
+        const instance = createAppointments({
+          ...getProperties(),
+          isVirtualScrolling: () => true,
+          scrollTo,
+          getStartViewDate: () => startViewDate,
+          getSortedAppointments: () => [
+            makeSortedEntity(0), makeSortedEntity(1, appointmentStartDate),
+          ],
+        });
+        instance.option('viewModel', [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ]);
+
+        const viewItem0 = instance.getViewItemBySortedIndex(0);
+        viewItem0?.focus();
+        viewItem0?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        expect(scrollTo).toHaveBeenCalledWith(appointmentStartDate, expect.anything());
+      });
+
+      it('should clamp scrollTo date to start view date when appointment starts before it', () => {
+        const scrollTo = jest.fn();
+        const startViewDate = new Date(2024, 0, 1);
+        const appointmentStartDate = new Date(2023, 11, 31, 9, 0); // before startViewDate
+
+        const viewModel = [mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 })];
+        const sortedEntities = [makeSortedEntity(0), makeSortedEntity(1, appointmentStartDate)];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          isVirtualScrolling: () => true,
+          scrollTo,
+          getStartViewDate: () => startViewDate,
+          getSortedAppointments: () => sortedEntities,
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem0 = instance.getViewItemBySortedIndex(0);
+        viewItem0?.focus();
+        viewItem0?.$element().get(0).dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        );
+
+        expect(scrollTo).toHaveBeenCalledWith(startViewDate, expect.anything());
+      });
+    });
+  });
+
   describe('onAppointmentRendered', () => {
     it('should be called with correct arguments when grid appointment is rendered', () => {
       const onAppointmentRendered = jest.fn();
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts
index 2d5eb89a7b41..e8ce2e894ed8 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts
@@ -8,7 +8,9 @@ import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
 import DOMComponent from '@ts/core/widget/dom_component';
 import type { OptionChanged } from '@ts/core/widget/types';
 
-import type { SafeAppointment, TargetedAppointment, ViewType } from '../types';
+import type {
+  SafeAppointment, ScrollToOptions, TargetedAppointment, ViewType,
+} from '../types';
 import type { AppointmentDataAccessor } from '../utils/data_accessor/appointment_data_accessor';
 import type { AppointmentResource } from '../utils/resource_manager/appointment_groups_utils';
 import type { ResourceManager } from '../utils/resource_manager/resource_manager';
@@ -18,19 +20,23 @@ import type {
   AppointmentItemViewModel,
   AppointmentViewModelPlain,
   BaseAppointmentViewModel,
+  SortedEntity,
 } from '../view_model/types';
 import { AgendaAppointmentView } from './appointment/agenda_appointment';
 import type { BaseAppointmentViewProperties } from './appointment/base_appointment';
 import { GridAppointmentView } from './appointment/grid_appointment';
 import { AppointmentCollector } from './appointment_collector';
+import { AppointmentsFocusController } from './appointments.focus_controller';
 import { APPOINTMENTS_CONTAINER_CLASS } from './const';
 import { getTargetedAppointment } from './utils/get_targeted_appointment';
 import type { DiffItem } from './utils/get_view_model_diff';
 import { getViewModelDiff } from './utils/get_view_model_diff';
 import { isAgendaAppointmentViewModel, isCollectorViewModel as isAppointmentCollectorViewModel, isGridAppointmentViewModel } from './utils/type_helpers';
+import type { ViewItem } from './view_item';
 
 export interface AppointmentsProperties extends DOMComponentProperties<Appointments> {
   currentView: ViewType;
+  tabIndex: number;
   viewModel: AppointmentViewModelPlain[];
   items: AppointmentViewModelPlain[]; // TODO: legacy compatibility
   $allDayContainer: dxElementWrapper | null;
@@ -38,33 +44,68 @@ export interface AppointmentsProperties extends DOMComponentProperties<Appointme
   appointmentTemplate: SchedulerProperties['appointmentTemplate'];
   appointmentCollectorTemplate: SchedulerProperties['appointmentCollectorTemplate'];
 
-  onAppointmentRendered: BaseAppointmentViewProperties['onAppointmentRendered'];
+  onAppointmentRendered: BaseAppointmentViewProperties['onRendered'];
+
+  getStartViewDate: () => Date;
+  getSortedAppointments: () => SortedEntity[];
+  isVirtualScrolling: () => boolean;
+  scrollTo: (
+    date: Date,
+    options?: ScrollToOptions,
+  ) => void;
 
   getAppointmentDataSource: () => AppointmentDataSource;
   getResourceManager: () => ResourceManager;
   getDataAccessor: () => AppointmentDataAccessor;
 }
 
-type AppointmentComponent = GridAppointmentView | AgendaAppointmentView | AppointmentCollector;
+/*
+Check rtlEnabled works correctly
+Check that 'disabled' works correctly
+Restore focus on the edited appointment - move to another task
 
+Rendering:
+- Render strip
+- Render allDay appointmentCollectors
+- In virtual scrolling sometimes appointments are empty on scrolling
+*/
 export class Appointments extends DOMComponent<Appointments, AppointmentsProperties> {
-  private appointmentBySortIndex: Record<number, AppointmentComponent> = {};
+  private focusController!: AppointmentsFocusController;
+
+  private viewItemBySortedIndex: Record<number, ViewItem> = {};
+
+  private viewItems: ViewItem[] = [];
+
+  public getViewItemByIndex(index: number): ViewItem | undefined {
+    return this.viewItems[index];
+  }
 
-  private get $allDayContainer(): dxElementWrapper | null {
+  public getViewItemBySortedIndex(sortedIndex: number): ViewItem | undefined {
+    return this.viewItemBySortedIndex[sortedIndex];
+  }
+
+  public get $allDayContainer(): dxElementWrapper | null {
     return this.option().$allDayContainer;
   }
 
-  private get $commonContainer(): dxElementWrapper {
+  public get $commonContainer(): dxElementWrapper {
     return this.$element();
   }
 
   override _init(): void {
     super._init();
 
+    this.focusController = new AppointmentsFocusController(this);
+
     this._templateManager.addDefaultTemplates({
       appointment: new EmptyTemplate(),
       appointmentCollector: new EmptyTemplate(),
     });
+
+    // TODO: legacy compatibility
+    if (this.option().appointmentTemplate === 'item') {
+      this.option('appointmentTemplate', 'appointment');
+    }
   }
 
   override _initMarkup(): void {
@@ -76,6 +117,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
   override _getDefaultOptions(): AppointmentsProperties {
     return {
       ...super._getDefaultOptions(),
+      tabIndex: 0,
       viewModel: [],
       $allDayContainer: null,
       appointmentTemplate: 'appointment',
@@ -114,6 +156,12 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
         this.renderAppointments(this.option().viewModel);
         break;
       }
+      case 'tabIndex': {
+        this.viewItems.forEach((item) => {
+          item.setTabIndex(args.value);
+        });
+        break;
+      }
       default:
         break;
     }
@@ -127,10 +175,6 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
 
   public _renderAppointmentTemplate(): void { /* TODO: legacy compatibility */ }
 
-  private getAppointmentElement(sortedIndex: number): dxElementWrapper {
-    return this.appointmentBySortIndex[sortedIndex].$element();
-  }
-
   private getViewModelDiff(
     oldViewModel: AppointmentViewModelPlain[],
     newViewModel: AppointmentItemViewModel[] | AppointmentCollectorViewModel[],
@@ -152,7 +196,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
     const allDayFragment = domAdapter.createDocumentFragment();
     const commonFragment = domAdapter.createDocumentFragment();
 
-    this.appointmentBySortIndex = {};
+    this.viewItemBySortedIndex = {};
     this.$allDayContainer?.empty();
     this.$commonContainer.empty();
 
@@ -161,21 +205,23 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
         ? commonFragment
         : allDayFragment;
 
-      const appointment = this.renderAppointment(container, appointmentViewModel, index);
-      this.appointmentBySortIndex[appointmentViewModel.sortedIndex] = appointment;
+      const appointment = this.renderAppointmentView(container, appointmentViewModel, index);
+      this.viewItemBySortedIndex[appointmentViewModel.sortedIndex] = appointment;
     });
 
-    if (this.$allDayContainer) {
-      this.$allDayContainer.get(0).appendChild(allDayFragment);
-    }
+    this.viewItems = Object.values(this.viewItemBySortedIndex);
+
+    this.$allDayContainer?.get(0).appendChild(allDayFragment);
     this.$commonContainer.get(0).appendChild(commonFragment);
+
+    this.focusController.resetTabIndex();
   }
 
   private renderViewModelDiff(viewModelDiff: DiffItem[]): void {
     const allDayFragment = domAdapter.createDocumentFragment();
     const commonFragment = domAdapter.createDocumentFragment();
 
-    const newAppointmentBySortedIndex: Record<number, AppointmentComponent> = {};
+    const newViewItemBySortedIndex: Record<number, ViewItem> = {};
 
     const isRepaintAll = viewModelDiff.every(
       (item) => Boolean(item.needToAdd ?? item.needToRemove),
@@ -189,6 +235,8 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
     // TODO: remove passing index to appointmentTemplate, need only to avoid BC
     viewModelDiff.forEach((diffItem, index) => {
       const { allDay, sortedIndex } = diffItem.item;
+      const lookupIndex = diffItem.oldSortedIndex ?? sortedIndex;
+      const viewItem = this.viewItemBySortedIndex[lookupIndex];
 
       switch (true) {
         case diffItem.needToRemove: {
@@ -196,55 +244,66 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
             break;
           }
 
-          this.getAppointmentElement(sortedIndex).remove();
+          viewItem.$element().remove();
           break;
         }
         case diffItem.needToAdd: {
           const fragment = allDay ? allDayFragment : commonFragment;
-          const appointment = this.renderAppointment(fragment, diffItem.item, index);
+          const newViewItem = this.renderAppointmentView(fragment, diffItem.item, index);
 
-          newAppointmentBySortedIndex[sortedIndex] = appointment;
+          newViewItemBySortedIndex[sortedIndex] = newViewItem;
           break;
         }
         case diffItem.needToResize: {
-          const appointment = this.appointmentBySortIndex[sortedIndex];
-          appointment.option('geometry', {
+          viewItem.resize({
             height: diffItem.item.height,
             width: diffItem.item.width,
             top: diffItem.item.top,
             left: diffItem.item.left,
           });
-          appointment.resize();
+          viewItem.option('sortedIndex', sortedIndex);
 
-          newAppointmentBySortedIndex[sortedIndex] = this.appointmentBySortIndex[sortedIndex];
+          newViewItemBySortedIndex[sortedIndex] = viewItem;
           break;
         }
         default:
-          newAppointmentBySortedIndex[sortedIndex] = this.appointmentBySortIndex[sortedIndex];
+          viewItem.option('sortedIndex', sortedIndex);
+
+          newViewItemBySortedIndex[sortedIndex] = viewItem;
       }
     });
 
-    this.appointmentBySortIndex = newAppointmentBySortedIndex;
+    this.viewItemBySortedIndex = newViewItemBySortedIndex;
+    this.viewItems = Object.values(this.viewItemBySortedIndex);
 
-    if (this.$allDayContainer) {
-      this.$allDayContainer.get(0).appendChild(allDayFragment);
-    }
+    this.$allDayContainer?.get(0).appendChild(allDayFragment);
     this.$commonContainer.get(0).appendChild(commonFragment);
+
+    this.focusController.resetTabIndex();
   }
 
-  private renderAppointment(
+  private renderAppointmentView(
     fragment: DocumentFragment,
     appointmentViewModel: AppointmentViewModelPlain,
     index: number,
-  ): AppointmentComponent {
+  ): ViewItem {
     const $element = $('<div>');
 
     fragment.appendChild($element.get(0));
 
     const targetedAppointmentData = this.getTargetedAppointmentData(appointmentViewModel);
 
+    const baseViewItemConfig = {
+      tabIndex: this.option().tabIndex,
+      sortedIndex: appointmentViewModel.sortedIndex,
+      onFocusIn: this.focusController.onAppointmentFocusIn.bind(this.focusController),
+      onFocusOut: this.focusController.onAppointmentFocusOut.bind(this.focusController),
+      onKeyDown: this.focusController.onAppointmentKeyDown.bind(this.focusController),
+    };
+
     if (isAppointmentCollectorViewModel(appointmentViewModel)) {
       return this._createComponent($element, AppointmentCollector, {
+        ...baseViewItemConfig,
         appointmentsData: appointmentViewModel.items.map((item) => item.itemData),
         isCompact: appointmentViewModel.isCompact,
         geometry: {
@@ -258,13 +317,14 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
       });
     }
 
-    const baseConfig: BaseAppointmentViewProperties = {
+    const baseAppointmentViewConfig: BaseAppointmentViewProperties = {
+      ...baseViewItemConfig,
       index,
       appointmentTemplate: this._getTemplateByOption('appointmentTemplate'),
       appointmentData: appointmentViewModel.itemData,
       targetedAppointmentData,
-      getResourceColor: this.getResourceColor.bind(this, appointmentViewModel),
-      onAppointmentRendered: this.option().onAppointmentRendered,
+      onRendered: this.option().onAppointmentRendered,
+      getResourceColor: () => this.getResourceColor(appointmentViewModel),
       getDataAccessor: this.option().getDataAccessor,
     };
 
@@ -273,7 +333,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
         $element,
         GridAppointmentView,
         {
-          ...baseConfig,
+          ...baseAppointmentViewConfig,
           geometry: {
             height: appointmentViewModel.height,
             width: appointmentViewModel.width,
@@ -291,7 +351,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
       $element,
       AgendaAppointmentView,
       {
-        ...baseConfig,
+        ...baseAppointmentViewConfig,
         modifiers: {
           isLastInGroup: appointmentViewModel.isLastInGroup,
         },
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/const.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/const.ts
index 6edeb75ce6cc..f879da2014ab 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/const.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/const.ts
@@ -15,6 +15,7 @@ export const APPOINTMENT_TYPE_CLASSES = {
   EMPTY: 'dx-scheduler-appointment-empty',
   ALL_DAY: 'dx-scheduler-all-day-appointment',
   RECURRING: 'dx-scheduler-appointment-recurrence',
+  HAS_RESOURCE: 'dx-scheduler-appointment-has-resource-color',
 };
 
 export const APPOINTMENT_CLASSES = {
@@ -38,3 +39,5 @@ export const AGENDA_APPOINTMENT_CLASSES = {
   RESOURCE_ITEM: 'dx-scheduler-appointment-resource-item',
   RESOURCE_ITEM_VALUE: 'dx-scheduler-appointment-resource-item-value',
 };
+
+export const FOCUSED_STATE_CLASS = 'dx-state-focused';
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.test.ts
index 4f40610c55fd..7c2a3f4b56bc 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.test.ts
@@ -66,13 +66,21 @@ describe('getViewModelDiff', () => {
     const data1: ItemData = {};
     const data2: ItemData = {};
     const data3: ItemData = {};
-    const a = [makeItem(data1), makeItem(data2), makeItem(data3)];
+    const a = [
+      makeItem(data1, { sortedIndex: 0 }),
+      makeItem(data2, { sortedIndex: 1 }),
+      makeItem(data3, { sortedIndex: 2 }),
+    ];
     const b = [makeItem(data1), makeItem(data2), makeItem(data3)];
 
     const diff = getViewModelDiff(a, b, defaultDataSource);
 
     expect(getOperations(diff)).toBe('===');
-    expect(diff).toEqual([{ item: b[0] }, { item: b[1] }, { item: b[2] }]);
+    expect(diff).toEqual([
+      { item: b[0], oldSortedIndex: 0 },
+      { item: b[1], oldSortedIndex: 1 },
+      { item: b[2], oldSortedIndex: 2 },
+    ]);
   });
 
   it('should mark all as needToAdd when old list is empty', () => {
@@ -108,17 +116,21 @@ describe('getViewModelDiff', () => {
     const data2: ItemData = {};
     const data3: ItemData = {};
     const data4: ItemData = {};
-    const a = [makeItem(data1), makeItem(data2), makeItem(data4)];
+    const a = [
+      makeItem(data1, { sortedIndex: 0 }),
+      makeItem(data2, { sortedIndex: 1 }),
+      makeItem(data4, { sortedIndex: 2 }),
+    ];
     const b = [makeItem(data1), makeItem(data3), makeItem(data4)];
 
     const diff = getViewModelDiff(a, b, defaultDataSource);
 
     expect(getOperations(diff)).toBe('=+-=');
     expect(diff).toEqual([
-      { item: b[0] },
+      { item: b[0], oldSortedIndex: 0 },
       { item: b[1], needToAdd: true },
       { item: a[1], needToRemove: true },
-      { item: b[2] },
+      { item: b[2], oldSortedIndex: 2 },
     ]);
   });
 
@@ -126,17 +138,21 @@ describe('getViewModelDiff', () => {
     const data1: ItemData = {};
     const data2: ItemData = {};
     const data4: ItemData = {};
-    const a = [makeItem(data1), makeItem(data2), makeItem(data4)];
+    const a = [
+      makeItem(data1, { sortedIndex: 0 }),
+      makeItem(data2, { sortedIndex: 1 }),
+      makeItem(data4, { sortedIndex: 2 }),
+    ];
     const b = [makeItem(data1), makeItem(data2, { rowIndex: 1 }), makeItem(data4)];
 
     const diff = getViewModelDiff(a, b, defaultDataSource);
 
     expect(getOperations(diff)).toBe('=+-=');
     expect(diff).toEqual([
-      { item: b[0] },
+      { item: b[0], oldSortedIndex: 0 },
       { item: b[1], needToAdd: true },
       { item: a[1], needToRemove: true },
-      { item: b[2] },
+      { item: b[2], oldSortedIndex: 2 },
     ]);
   });
 
@@ -145,7 +161,12 @@ describe('getViewModelDiff', () => {
     const data2: ItemData = {};
     const data3: ItemData = {};
     const data4: ItemData = {};
-    const a = [makeItem(data1), makeItem(data2), makeItem(data3), makeItem(data4)];
+    const a = [
+      makeItem(data1, { sortedIndex: 0 }),
+      makeItem(data2, { sortedIndex: 1 }),
+      makeItem(data3, { sortedIndex: 2 }),
+      makeItem(data4, { sortedIndex: 3 }),
+    ];
     const b = [makeItem(data4), makeItem(data1), makeItem(data2), makeItem(data3)];
 
     const diff = getViewModelDiff(a, b, defaultDataSource);
@@ -153,9 +174,9 @@ describe('getViewModelDiff', () => {
     expect(getOperations(diff)).toBe('+===-');
     expect(diff).toEqual([
       { item: b[0], needToAdd: true },
-      { item: b[1] },
-      { item: b[2] },
-      { item: b[3] },
+      { item: b[1], oldSortedIndex: 0 },
+      { item: b[2], oldSortedIndex: 1 },
+      { item: b[3], oldSortedIndex: 2 },
       { item: a[3], needToRemove: true },
     ]);
   });
@@ -166,7 +187,12 @@ describe('getViewModelDiff', () => {
     const data3: ItemData = {};
     const data4: ItemData = {};
     const data5: ItemData = {};
-    const a = [makeItem(data1), makeItem(data2), makeItem(data3), makeItem(data4)];
+    const a = [
+      makeItem(data1, { sortedIndex: 0 }),
+      makeItem(data2, { sortedIndex: 1 }),
+      makeItem(data3, { sortedIndex: 2 }),
+      makeItem(data4, { sortedIndex: 3 }),
+    ];
     const b = [makeItem(data4), makeItem(data1), makeItem(data5), makeItem(data3)];
 
     const diff = getViewModelDiff(a, b, defaultDataSource);
@@ -174,10 +200,10 @@ describe('getViewModelDiff', () => {
     expect(getOperations(diff)).toBe('+=+-=-');
     expect(diff).toEqual([
       { item: b[0], needToAdd: true },
-      { item: b[1] },
+      { item: b[1], oldSortedIndex: 0 },
       { item: b[2], needToAdd: true },
       { item: a[1], needToRemove: true },
-      { item: b[3] },
+      { item: b[3], oldSortedIndex: 2 },
       { item: a[3], needToRemove: true },
     ]);
   });
@@ -188,7 +214,12 @@ describe('getViewModelDiff', () => {
     const data3: ItemData = { myId: 2 };
     const data4: ItemData = { myId: 3 };
     const data5: ItemData = { myId: 4 };
-    const a = [makeItem(data1), makeItem(data2), makeItem(data3), makeItem(data4)];
+    const a = [
+      makeItem(data1),
+      makeItem(data2, { sortedIndex: 5 }),
+      makeItem(data3),
+      makeItem(data4),
+    ];
     // bItem1 uses the same data2 ref as a[1] but with a different sortedIndex,
     // which is not part of the comparison object — items are still considered equal.
     const bItem1 = makeItem(data2, { sortedIndex: 99 });
@@ -197,14 +228,14 @@ describe('getViewModelDiff', () => {
     const diff = getViewModelDiff(a, b, defaultDataSource);
 
     expect(getOperations(diff)).toBe('+-=+=-');
-    expect(diff[2]).toEqual({ item: bItem1 });
+    expect(diff[2]).toEqual({ item: bItem1, oldSortedIndex: 5 });
   });
 
   describe('needToResize', () => {
     it('should mark needToResize when only dimensions change for the same item', () => {
       const data1: ItemData = {};
       const a = [makeItem(data1, {
-        left: 0, top: 0, height: 100, width: 200,
+        sortedIndex: 3, left: 0, top: 0, height: 100, width: 200,
       })];
       const b = [makeItem(data1, {
         left: 10, top: 20, height: 50, width: 150,
@@ -213,14 +244,18 @@ describe('getViewModelDiff', () => {
       const diff = getViewModelDiff(a, b, defaultDataSource);
 
       expect(getOperations(diff)).toBe('r');
-      expect(diff).toEqual([{ item: b[0], needToResize: true }]);
+      expect(diff).toEqual([{ item: b[0], needToResize: true, oldSortedIndex: 3 }]);
     });
 
     it('should mix needToResize with other operations', () => {
       const data1: ItemData = {};
       const data2: ItemData = {};
       const data3: ItemData = {};
-      const a = [makeItem(data1), makeItem(data2), makeItem(data3)];
+      const a = [
+        makeItem(data1, { sortedIndex: 0 }),
+        makeItem(data2, { sortedIndex: 1 }),
+        makeItem(data3, { sortedIndex: 2 }),
+      ];
       const b = [
         makeItem(data1),
         makeItem(data2, { left: 50, top: 50 }),
@@ -231,9 +266,9 @@ describe('getViewModelDiff', () => {
 
       expect(getOperations(diff)).toBe('=r=');
       expect(diff).toEqual([
-        { item: b[0] },
-        { item: b[1], needToResize: true },
-        { item: b[2] },
+        { item: b[0], oldSortedIndex: 0 },
+        { item: b[1], needToResize: true, oldSortedIndex: 1 },
+        { item: b[2], oldSortedIndex: 2 },
       ]);
     });
   });
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.ts
index 02213a5de55f..6e91fa23a0bb 100644
--- a/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_view_model_diff.ts
@@ -12,6 +12,7 @@ export interface DiffItem {
   needToRemove?: boolean;
   needToResize?: boolean;
   item: AppointmentItemViewModel | AppointmentCollectorViewModel;
+  oldSortedIndex?: number;
 }
 
 const getObjectToCompare = (item: Item, includeDimensions: boolean): object => {
@@ -92,9 +93,9 @@ function getArraysDiff(options: {
 
     if (match(ai, bj)) {
       if (equal(ai, bj)) {
-        result.push({ item: bj });
+        result.push({ item: bj, oldSortedIndex: ai.sortedIndex });
       } else if (canResize(ai, bj)) {
-        result.push({ item: bj, needToResize: true });
+        result.push({ item: bj, needToResize: true, oldSortedIndex: ai.sortedIndex });
       } else {
         result.push({ item: ai, needToRemove: true });
         result.push({ item: bj, needToAdd: true });
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.test.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.test.ts
new file mode 100644
index 000000000000..2c54099b88da
--- /dev/null
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.test.ts
@@ -0,0 +1,179 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import fx from '@ts/common/core/animation/fx';
+
+import { createAppointmentCollector, getAppointmentCollectorProperties } from './__mock__/appointment_collector';
+import { createBaseAppointment, getBaseAppointmentViewProperties } from './__mock__/appointment_properties';
+import type { BaseAppointmentView, BaseAppointmentViewProperties } from './appointment/base_appointment';
+import type { AppointmentCollector, AppointmentCollectorProperties } from './appointment_collector';
+import type { ViewItemProperties } from './view_item';
+
+const defaultAppointmentData = {
+  title: 'Test appointment',
+  startDate: new Date(2024, 0, 1, 9, 0),
+  endDate: new Date(2024, 0, 1, 10, 0),
+};
+
+describe.each([
+  'BaseAppointment',
+  'AppointmentCollector',
+])('ViewItem Common - %s', (viewItemName) => {
+  beforeEach(() => {
+    fx.off = true;
+
+    const $container = $('<div>')
+      .addClass('container')
+      .appendTo(document.body);
+
+    $('<div>')
+      .addClass('root')
+      .appendTo($container);
+  });
+
+  afterEach(() => {
+    $('.container').remove();
+    fx.off = false;
+    jest.useRealTimers();
+  });
+
+  const createViewItem = (
+    properties: Partial<ViewItemProperties> = {},
+  ): Promise<BaseAppointmentView | AppointmentCollector> => {
+    const baseProperties: ViewItemProperties = {
+      tabIndex: 0,
+      sortedIndex: 0,
+      onFocusIn: () => {},
+      onFocusOut: () => {},
+      onKeyDown: () => {},
+    };
+
+    if (viewItemName === 'BaseAppointment') {
+      const extendedProperties: BaseAppointmentViewProperties = {
+        ...baseProperties,
+        ...getBaseAppointmentViewProperties(defaultAppointmentData),
+        ...properties,
+      };
+
+      return createBaseAppointment(extendedProperties);
+    }
+
+    const extendedProperties: AppointmentCollectorProperties = {
+      ...baseProperties,
+      ...getAppointmentCollectorProperties([defaultAppointmentData]),
+      ...properties,
+    };
+
+    return Promise.resolve(createAppointmentCollector(extendedProperties));
+  };
+
+  describe('Focus', () => {
+    it('should have tabindex -1 by default', async () => {
+      const instance = await createViewItem();
+
+      expect(instance.$element().attr('tabindex')).toBe('-1');
+    });
+
+    it('should set tabindex attr on makeFocusable', async () => {
+      const instance = await createViewItem({ tabIndex: 2 });
+
+      instance.makeFocusable();
+
+      expect(instance.$element().attr('tabindex')).toBe('2');
+    });
+
+    it('should update tabindex attr on setTabIndex if appointment is focusable', async () => {
+      const instance = await createViewItem();
+
+      instance.makeFocusable();
+      instance.setTabIndex(1);
+
+      expect(instance.$element().attr('tabindex')).toBe('1');
+    });
+
+    it('should not update tabindex attr on setTabIndex if appointment is not focusable', async () => {
+      const instance = await createViewItem();
+
+      instance.setTabIndex(1);
+
+      expect(instance.$element().attr('tabindex')).toBe('-1');
+    });
+
+    it('should set correct tabindex after setTabIndex and makeFocusable calls', async () => {
+      const instance = await createViewItem();
+
+      instance.setTabIndex(1);
+      instance.makeFocusable();
+
+      expect(instance.$element().attr('tabindex')).toBe('1');
+    });
+
+    it('should focus on element when focus method is called', async () => {
+      const instance = await createViewItem();
+
+      instance.focus();
+
+      expect(document.activeElement).toBe(instance.$element().get(0));
+    });
+
+    it('should call onFocusIn callback on focus', async () => {
+      const onFocusIn = jest.fn();
+
+      const instance = await createViewItem({ onFocusIn });
+
+      instance.focus();
+
+      expect(onFocusIn).toHaveBeenCalled();
+      expect(instance.$element().attr('tabindex')).toBe('0');
+      expect(instance.$element().hasClass('dx-state-focused')).toBe(true);
+    });
+
+    it('should call onFocusOut callback on blur', async () => {
+      const onFocusOut = jest.fn();
+
+      const instance = await createViewItem({ onFocusOut });
+
+      instance.focus();
+      (instance.$element().get(0) as HTMLElement).blur();
+
+      expect(onFocusOut).toHaveBeenCalled();
+      expect(instance.$element().attr('tabindex')).toBe('-1');
+      expect(instance.$element().hasClass('dx-state-focused')).toBe(false);
+    });
+
+    it('should be focusable after click', async () => {
+      const instance = await createViewItem({ tabIndex: 1 });
+
+      const element = instance.$element().get(0) as HTMLElement;
+
+      element.click();
+
+      expect(element.getAttribute('tabindex')).toBe('1');
+      expect(element.classList.contains('dx-state-focused')).toBe(true);
+      expect(document.activeElement).toBe(element);
+    });
+
+    it('should have correct tabindex after setTabIndex(-1) when being focused', async () => {
+      const instance = await createViewItem({ tabIndex: 1 });
+
+      instance.focus();
+      instance.setTabIndex(-1);
+
+      expect(instance.$element().attr('tabindex')).toBe('-1');
+    });
+  });
+
+  describe('Key down', () => {
+    it('should call onKeyDown callback on enter key press', async () => {
+      const onKeyDown = jest.fn();
+
+      const instance = await createViewItem({ onKeyDown });
+
+      instance.focus();
+      instance.$element().get(0)?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+      expect(onKeyDown).toHaveBeenCalledWith(expect.objectContaining({ key: 'Enter' }), 0);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.ts b/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.ts
new file mode 100644
index 000000000000..60aa295ad2ba
--- /dev/null
+++ b/packages/devextreme/js/__internal/scheduler/appointments_new/view_item.ts
@@ -0,0 +1,95 @@
+import type { DxEvent } from '@js/events';
+import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
+import DOMComponent from '@ts/core/widget/dom_component';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
+import { focus, keyboard } from '@ts/events/m_short';
+
+export const EVENTS_NAMESPACE = { namespace: 'dxSchedulerViewItem' };
+
+export interface ViewItemProperties
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extends DOMComponentProperties<ViewItem<any>> {
+  tabIndex: number;
+  sortedIndex: number;
+  onFocusIn: (sortedIndex: number) => void;
+  onFocusOut: (e: DxEvent, sortedIndex: number) => void;
+  onKeyDown: (e: KeyboardKeyDownEvent, sortedIndex: number) => void;
+}
+
+export class ViewItem<
+  TProperties extends ViewItemProperties = ViewItemProperties,
+> extends DOMComponent<ViewItem<TProperties>, TProperties> {
+  private keyboardListenerId?: string;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  override _getSynchronizableOptionsForCreateComponent(): (
+    keyof DOMComponentProperties<DOMComponent<ViewItem<TProperties>, TProperties>>
+  )[] {
+    // @ts-expect-error
+    return super._getSynchronizableOptionsForCreateComponent();
+  }
+
+  override _dispose(): void {
+    super._dispose();
+
+    focus.off(this.$element(), EVENTS_NAMESPACE);
+    keyboard.off(this.keyboardListenerId);
+  }
+
+  public resize(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    geometry?: { height: number; width: number | string; top: number; left: number },
+  ): void {}
+
+  public focus(): void {
+    this.makeFocusable();
+    focus.trigger(this.$element());
+  }
+
+  public makeFocusable(): void {
+    this.$element().attr('tabindex', this.option().tabIndex);
+  }
+
+  public setTabIndex(tabIndex: number | undefined): void {
+    this.option('tabIndex', tabIndex);
+
+    if (this.$element().attr('tabindex') !== '-1') {
+      this.makeFocusable();
+    }
+  }
+
+  protected attachFocusEvents(): void {
+    focus.off(this.$element(), EVENTS_NAMESPACE);
+    focus.on(
+      this.$element(),
+      this.onFocusIn.bind(this),
+      this.onFocusOut.bind(this),
+      EVENTS_NAMESPACE,
+    );
+  }
+
+  protected attachKeydownEvents(): void {
+    keyboard.off(this.keyboardListenerId);
+    this.keyboardListenerId = keyboard.on(
+      this.$element(),
+      this.$element(),
+      this.onKeyDown.bind(this),
+    );
+  }
+
+  protected onFocusIn(): void {
+    this.option().onFocusIn(this.option().sortedIndex);
+  }
+
+  protected onFocusOut(e: DxEvent): void {
+    this.option().onFocusOut(e, this.option().sortedIndex);
+  }
+
+  protected onClick(): void {
+    this.focus();
+  }
+
+  private onKeyDown(e: KeyboardKeyDownEvent): void {
+    this.option().onKeyDown(e, this.option().sortedIndex);
+  }
+}
diff --git a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts
index 2af79bd1fbfb..f0601ddf47ad 100644
--- a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts
+++ b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts
@@ -904,7 +904,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     }
   }
 
-  isVirtualScrolling() {
+  isVirtualScrolling(): boolean {
     const workspace = this.getWorkSpace();
 
     if (workspace) {
@@ -1058,9 +1058,11 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
     if (this.option('_newAppointments')) {
       const appointmentsConfig: Partial<AppointmentsProperties> = {
+        tabIndex: this.option('tabIndex'),
         currentView: this.option('currentView') as ViewType,
         appointmentTemplate: this.getViewOption('appointmentTemplate'),
         appointmentCollectorTemplate: this.getViewOption('appointmentCollectorTemplate'),
+
         onAppointmentRendered: (e) => {
           // @ts-expect-error 'component' property is set by action
           this.appointmentRenderedAction({
@@ -1069,6 +1071,12 @@ class Scheduler extends SchedulerOptionsBaseWidget {
             targetedAppointmentData: e.targetedAppointmentData,
           });
         },
+
+        getStartViewDate: () => this.getStartViewDate(),
+        getSortedAppointments: () => this._layoutManager.sortedItems,
+        isVirtualScrolling: () => this.isVirtualScrolling(),
+        scrollTo: this.scrollTo.bind(this),
+
         getResourceManager: () => this.resourceManager,
         getAppointmentDataSource: () => this.appointmentDataSource,
         getDataAccessor: () => this._dataAccessors,