Scheduler: Provide the SnapToCellsMode option — update .d.ts

packages/devextreme-angular/src/ui/scheduler/index.ts

@@ -24,7 +24,7 @@ import {
 
 import type dxSortable from 'devextreme/ui/sortable';
 import type dxDraggable from 'devextreme/ui/draggable';
-import type { default as dxScheduler, AllDayPanelMode, ViewType, dxSchedulerAppointment, AppointmentFormProperties, CellAppointmentsLimit, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent, RecurrenceEditMode, dxSchedulerScrolling, dxSchedulerToolbar } from 'devextreme/ui/scheduler';
+import type { default as dxScheduler, AllDayPanelMode, ViewType, dxSchedulerAppointment, AppointmentFormProperties, CellAppointmentsLimit, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent, RecurrenceEditMode, dxSchedulerScrolling, SnapToCellsMode, dxSchedulerToolbar } from 'devextreme/ui/scheduler';
 import type { event } from 'devextreme/events/events.types';
 import type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';
 import type { Store } from 'devextreme/data/store';
@@ -762,6 +762,16 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     }
 
 
+
+    @Input()
+    get snapToCellsMode(): SnapToCellsMode {
+        return this._getOption('snapToCellsMode');
+    }
+    set snapToCellsMode(value: SnapToCellsMode) {
+        this._setOption('snapToCellsMode', value);
+    }
+
+
     /**
      * [descr:dxSchedulerOptions.startDateExpr]
 
@@ -884,10 +894,10 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
 
      */
     @Input()
-    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
+    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
         return this._getOption('views');
     }
-    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
+    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
         this._setOption('views', value);
     }
 
@@ -1397,6 +1407,13 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      */
     @Output() showCurrentTimeIndicatorChange: EventEmitter<boolean>;
 
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() snapToCellsModeChange: EventEmitter<SnapToCellsMode>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -1465,7 +1482,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
+    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
 
     /**
 
@@ -1560,6 +1577,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
             { emit: 'shadeUntilCurrentTimeChange' },
             { emit: 'showAllDayPanelChange' },
             { emit: 'showCurrentTimeIndicatorChange' },
+            { emit: 'snapToCellsModeChange' },
             { emit: 'startDateExprChange' },
             { emit: 'startDateTimeZoneExprChange' },
             { emit: 'startDayHourChange' },

packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts

@@ -12,7 +12,7 @@ import {
 
 
 
-import type { AllDayPanelMode, CellAppointmentsLimit, dxSchedulerScrolling, ViewType } from 'devextreme/ui/scheduler';
+import type { AllDayPanelMode, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode, ViewType } from 'devextreme/ui/scheduler';
 import type { FirstDayOfWeek, Orientation } from 'devextreme/common';
 
 import {
@@ -190,6 +190,14 @@ export class DxiSchedulerViewComponent extends CollectionNestedOption {
         this._setOption('scrolling', value);
     }
 
+    @Input()
+    get snapToCellsMode(): SnapToCellsMode {
+        return this._getOption('snapToCellsMode');
+    }
+    set snapToCellsMode(value: SnapToCellsMode) {
+        this._setOption('snapToCellsMode', value);
+    }
+
     @Input()
     get startDate(): Date | number | string | undefined {
         return this._getOption('startDate');

packages/devextreme-metadata/make-angular-metadata.ts

@@ -63,6 +63,7 @@ Ng.makeMetadata({
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.form/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.popup/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.resources\.icon/),
+    removeMembers(/\/scheduler:.*\.snapToCellsMode/),
     removeMembers(/\/stepper:/),
     removeMembers(/\/speech_to_text:/),
     removeMembers(/\/tree_list:dxTreeListColumnButton.onClick/),

packages/devextreme-react/src/scheduler.ts

@@ -8,7 +8,7 @@ import dxScheduler, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentFormProperties, AppointmentFormIconsShowMode, SchedulerPredefinedToolbarItem, DateNavigatorItemProperties, SchedulerPredefinedDateNavigatorItem, dxSchedulerToolbarItem, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling } from "devextreme/ui/scheduler";
+import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentFormProperties, AppointmentFormIconsShowMode, SchedulerPredefinedToolbarItem, DateNavigatorItemProperties, SchedulerPredefinedDateNavigatorItem, dxSchedulerToolbarItem, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode } from "devextreme/ui/scheduler";
 import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
 import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, FormItemType, FormPredefinedButtonItem, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form";
 import type { ContentReadyEvent as ButtonGroupContentReadyEvent, DisposingEvent as ButtonGroupDisposingEvent, InitializedEvent as ButtonGroupInitializedEvent, OptionChangedEvent as ButtonGroupOptionChangedEvent, dxButtonGroupItem, ItemClickEvent, SelectionChangedEvent } from "devextreme/ui/button_group";
@@ -1460,6 +1460,7 @@ type IViewProps = React.PropsWithChildren<{
   offset?: number;
   resourceCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
   scrolling?: dxSchedulerScrolling;
+  snapToCellsMode?: SnapToCellsMode;
   startDate?: Date | number | string | undefined;
   startDayHour?: number;
   timeCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;

packages/devextreme-vue/src/scheduler.ts

@@ -31,6 +31,7 @@ import {
  OptionChangedEvent,
  RecurrenceEditMode,
  dxSchedulerScrolling,
+ SnapToCellsMode,
  dxSchedulerToolbar,
  AppointmentFormIconsShowMode,
  SchedulerPredefinedToolbarItem,
@@ -197,6 +198,7 @@ type AccessibleOptions = Pick<Properties,
   "shadeUntilCurrentTime" |
   "showAllDayPanel" |
   "showCurrentTimeIndicator" |
+  "snapToCellsMode" |
   "startDateExpr" |
   "startDateTimeZoneExpr" |
   "startDayHour" |
@@ -283,6 +285,7 @@ const componentConfig = {
     shadeUntilCurrentTime: Boolean,
     showAllDayPanel: Boolean,
     showCurrentTimeIndicator: Boolean,
+    snapToCellsMode: String as PropType<SnapToCellsMode>,
     startDateExpr: String,
     startDateTimeZoneExpr: String,
     startDayHour: Number,
@@ -365,6 +368,7 @@ const componentConfig = {
     "update:shadeUntilCurrentTime": null,
     "update:showAllDayPanel": null,
     "update:showCurrentTimeIndicator": null,
+    "update:snapToCellsMode": null,
     "update:startDateExpr": null,
     "update:startDateTimeZoneExpr": null,
     "update:startDayHour": null,
@@ -1776,6 +1780,7 @@ const DxViewConfig = {
     "update:offset": null,
     "update:resourceCellTemplate": null,
     "update:scrolling": null,
+    "update:snapToCellsMode": null,
     "update:startDate": null,
     "update:startDayHour": null,
     "update:timeCellTemplate": null,
@@ -1801,6 +1806,7 @@ const DxViewConfig = {
     offset: Number,
     resourceCellTemplate: {},
     scrolling: Object as PropType<dxSchedulerScrolling>,
+    snapToCellsMode: String as PropType<SnapToCellsMode>,
     startDate: [Date, Number, String],
     startDayHour: Number,
     timeCellTemplate: {},

packages/devextreme/js/ui/scheduler.d.ts

@@ -76,6 +76,8 @@ export type AllDayPanelMode = 'all' | 'allDay' | 'hidden';
 /** @public */
 export type CellAppointmentsLimit = 'auto' | 'unlimited';
 /** @public */
+export type SnapToCellsMode = 'always' | 'auto' | 'never';
+/** @public */
 export type RecurrenceEditMode = 'dialog' | 'occurrence' | 'series';
 /** @public */
 export type AppointmentFormIconsShowMode = 'both' | 'main' | 'recurrence' | 'none';
@@ -1015,6 +1017,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
      * @default "all"
      */
     allDayPanelMode?: AllDayPanelMode;
+    /**
+     * @docid
+     * @public
+     */
+    snapToCellsMode?: SnapToCellsMode;
     /**
      * @docid
      * @default 0
@@ -1145,6 +1152,10 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
        * @default "all"
        */
        allDayPanelMode?: AllDayPanelMode;
+       /**
+        * @docid
+        */
+       snapToCellsMode?: SnapToCellsMode;
        /**
         * @docid
         * @default 0

packages/devextreme/js/ui/scheduler_types.d.ts

@@ -4,6 +4,7 @@ export {
   ScrollMode,
   AllDayPanelMode,
   CellAppointmentsLimit,
+  SnapToCellsMode,
   RecurrenceEditMode,
   AppointmentFormIconsShowMode,
   AppointmentFormProperties,

packages/devextreme/ts/dx.all.d.ts

@@ -26326,6 +26326,7 @@ declare module DevExpress.ui {
       | 'dateNavigator'
       | 'viewSwitcher';
     export type SchedulerScrollToAlign = 'start' | 'center';
+    export type SnapToCellsMode = 'always' | 'auto' | 'never';
     /**
      * [descr:TargetedAppointmentInfo]
      * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
@@ -26860,6 +26861,10 @@ declare module DevExpress.ui {
      * [descr:dxSchedulerOptions.allDayPanelMode]
      */
     allDayPanelMode?: DevExpress.ui.dxScheduler.AllDayPanelMode;
+    /**
+     * [descr:dxSchedulerOptions.snapToCellsMode]
+     */
+    snapToCellsMode?: DevExpress.ui.dxScheduler.SnapToCellsMode;
     /**
      * [descr:dxSchedulerOptions.offset]
      */
@@ -27009,6 +27014,10 @@ declare module DevExpress.ui {
            * [descr:dxSchedulerOptions.views.allDayPanelMode]
            */
           allDayPanelMode?: DevExpress.ui.dxScheduler.AllDayPanelMode;
+          /**
+           * [descr:dxSchedulerOptions.views.snapToCellsMode]
+           */
+          snapToCellsMode?: DevExpress.ui.dxScheduler.SnapToCellsMode;
           /**
            * [descr:dxSchedulerOptions.views.offset]
            */