Scheduler: add today built-in button (DevExpress#29447)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/header/customization.ts

@@ -31,28 +31,31 @@ const customToolbarItems = [
 test('Scheduler default toolbar should works', async (t) => {
   const scheduler = new Scheduler('#container');
 
-  await t.expect(await compareScreenshot(t, 'scheduler-default toolbar.png', scheduler.element)).ok();
+  await t.expect(await compareScreenshot(t, 'scheduler-default toolbar.png', scheduler.toolbar.element)).ok();
 }).before(async () => createWidget('dxScheduler', {
-  views: ['day', 'week', 'workWeek', 'month'],
-  currentView: 'workWeek',
   currentDate: new Date(2021, 3, 27),
-  height: 200,
+}));
+
+test('Scheduler toolbar should be hided', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.expect(scheduler.toolbar.element.exists).notOk();
+}).before(async () => createWidget('dxScheduler', {
+  currentDate: new Date(2021, 3, 27),
+  toolbar: { visible: false },
 }));
 
 [
   { toolbar: { items: customToolbarItems }, description: 'custom toolbar' },
-  { toolbar: { visible: false }, description: 'hided toolbar' },
+  { toolbar: { items: ['today', 'dateNavigator', 'viewSwitcher'] }, description: 'toolbar with today' },
   { toolbar: { disabled: true, items: customToolbarItems }, description: 'disabled toolbar' },
 ].forEach(({ toolbar, description }) => {
   test(`Scheduler ${description} should works`, async (t) => {
     const scheduler = new Scheduler('#container');
 
-    await t.expect(await compareScreenshot(t, `scheduler-${description}.png`, scheduler.element)).ok();
+    await t.expect(await compareScreenshot(t, `scheduler-${description}.png`, scheduler.toolbar.element)).ok();
   }).before(async () => createWidget('dxScheduler', {
-    views: ['day', 'week', 'workWeek', 'month'],
-    currentView: 'workWeek',
     currentDate: new Date(2021, 3, 27),
-    height: 200,
     toolbar,
   }));
 });

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-custom toolbar.png

@@ -0,0 +1,38 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Scheduler header today button`
+  .page(url(__dirname, '../../../container.html'));
+
+test('Scheduler today button should works', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.click(scheduler.toolbar.todayButton);
+
+  const currentDate = await scheduler.option('currentDate') as Date;
+  const today = new Date();
+
+  currentDate.setHours(0, 0, 0, 0);
+  today.setHours(0, 0, 0, 0);
+
+  await t.expect(currentDate).eql(today);
+}).before(async () => createWidget('dxScheduler', {
+  currentDate: new Date(2021, 3, 27),
+  toolbar: { items: ['today', 'dateNavigator', 'viewSwitcher'] },
+}));
+
+const indicatorTime = new Date(2023, 3, 27);
+
+test('Scheduler today button should use indicatorTime', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t
+    .click(scheduler.toolbar.todayButton)
+    .expect(scheduler.option('currentDate'))
+    .eql(indicatorTime);
+}).before(async () => createWidget('dxScheduler', {
+  currentDate: new Date(2021, 3, 27),
+  indicatorTime,
+  toolbar: { items: ['today', 'dateNavigator', 'viewSwitcher'] },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-default toolbar.png

@@ -1,16 +1,4 @@
-// DateNavigator
 export enum Direction {
   Left = -1,
   Right = 1,
 }
-
-export const DATE_NAVIGATOR_CLASS = 'dx-scheduler-navigator';
-
-export const PREVIOUS_BUTTON_CLASS = 'dx-scheduler-navigator-previous';
-export const CALENDAR_BUTTON_CLASS = 'dx-scheduler-navigator-caption';
-export const NEXT_BUTTON_CLASS = 'dx-scheduler-navigator-next';
-
-export const PREVIOUS_BUTTON_NAME = 'prev';
-export const NEXT_BUTTON_NAME = 'next';
-export const CALENDAR_BUTTON_NAME = 'dateInterval';
-export const DEFAULT_ITEMS = [PREVIOUS_BUTTON_NAME, NEXT_BUTTON_NAME, CALENDAR_BUTTON_NAME];

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-disabled toolbar.png

@@ -3,15 +3,16 @@ import {
 } from '@jest/globals';
 
 import {
-  CALENDAR_BUTTON_NAME, DATE_NAVIGATOR_CLASS, DEFAULT_ITEMS, NEXT_BUTTON_NAME,
-} from './constants';
-import { getDateNavigator } from './m_date_navigator';
+  CLASS, DEFAULT_ITEMS, getDateNavigator, ITEMS_NAME,
+} from './m_date_navigator';
 
 describe('getDateNavigator', () => {
   it('should return default options in case of item is empty', () => {
     expect(getDateNavigator({} as any, {})).toEqual({
+      location: 'before',
+      name: 'dateNavigator',
       widget: 'dxButtonGroup',
-      cssClass: DATE_NAVIGATOR_CLASS,
+      cssClass: CLASS.container,
       options: {
         stylingMode: 'contained',
         selectionMode: 'none',
@@ -31,17 +32,19 @@ describe('getDateNavigator', () => {
         customOption: 'customOption',
         items: ['dateInterval', 'next', { key: 'customButton' }],
       },
-    })).toEqual({
+    } as any)).toEqual({
+      location: 'before',
+      name: 'dateNavigator',
       widget: 'dxButtonGroup',
-      cssClass: DATE_NAVIGATOR_CLASS,
+      cssClass: CLASS.container,
       customField: 'customField',
       options: {
         stylingMode: 'contained',
         selectionMode: 'none',
         customOption: 'customOption',
         items: [
-          expect.objectContaining({ key: CALENDAR_BUTTON_NAME }),
-          expect.objectContaining({ key: NEXT_BUTTON_NAME }),
+          expect.objectContaining({ key: ITEMS_NAME.calendarButton }),
+          expect.objectContaining({ key: ITEMS_NAME.nextButton }),
           expect.objectContaining({ key: 'customButton' }),
         ],
         onItemClick: expect.any(Function),
@@ -60,8 +63,10 @@ describe('getDateNavigator', () => {
     expect(customClick).toHaveBeenCalledWith(event);
     expect(event.itemData.clickHandler).toHaveBeenCalledWith(event);
     expect(config).toEqual({
+      location: 'before',
+      name: 'dateNavigator',
       widget: 'dxButtonGroup',
-      cssClass: DATE_NAVIGATOR_CLASS,
+      cssClass: CLASS.container,
       options: {
         stylingMode: 'contained',
         selectionMode: 'none',

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar with today.png

@@ -8,17 +8,24 @@ import { dateUtilsTs } from '@ts/core/utils/date';
 import { extend } from '@ts/core/utils/m_extend';
 import type { SchedulerHeader } from '@ts/scheduler/header/m_header';
 
-import {
-  CALENDAR_BUTTON_CLASS,
-  CALENDAR_BUTTON_NAME,
-  DATE_NAVIGATOR_CLASS,
-  DEFAULT_ITEMS,
-  Direction,
-  NEXT_BUTTON_CLASS,
-  NEXT_BUTTON_NAME,
-  PREVIOUS_BUTTON_CLASS,
-  PREVIOUS_BUTTON_NAME,
-} from './constants';
+import { Direction } from './constants';
+
+export const CLASS = {
+  container: 'dx-scheduler-navigator',
+  previousButton: 'dx-scheduler-navigator-previous',
+  calendarButton: 'dx-scheduler-navigator-caption',
+  nextButton: 'dx-scheduler-navigator-next',
+};
+export const ITEMS_NAME = {
+  previousButton: 'prev',
+  nextButton: 'next',
+  calendarButton: 'dateInterval',
+};
+export const DEFAULT_ITEMS = [
+  ITEMS_NAME.previousButton,
+  ITEMS_NAME.nextButton,
+  ITEMS_NAME.calendarButton,
+];
 
 const { trimTime } = dateUtils;
 
@@ -60,10 +67,10 @@ const getPreviousButtonOptions = (header: SchedulerHeader): DateNavigatorItem =>
   const ariaMessage = messageLocalization.format('dxScheduler-navigationPrevious');
 
   return {
-    key: PREVIOUS_BUTTON_NAME,
+    key: ITEMS_NAME.previousButton,
     icon: 'chevronprev',
     elementAttr: {
-      class: PREVIOUS_BUTTON_CLASS,
+      class: CLASS.previousButton,
       'aria-label': ariaMessage,
     },
     clickHandler: () => header._updateDateByDirection(Direction.Left),
@@ -87,9 +94,9 @@ const getPreviousButtonOptions = (header: SchedulerHeader): DateNavigatorItem =>
 };
 
 const getCalendarButtonOptions = (header: SchedulerHeader): DateNavigatorItem => ({
-  key: CALENDAR_BUTTON_NAME,
+  key: ITEMS_NAME.calendarButton,
   text: header.captionText,
-  elementAttr: { class: CALENDAR_BUTTON_CLASS },
+  elementAttr: { class: CLASS.calendarButton },
   clickHandler: (event) => header._showCalendar(event),
   onContentReady: (event): void => {
     const calendarButton = event.component;
@@ -120,10 +127,10 @@ const getNextButtonOptions = (header: SchedulerHeader): DateNavigatorItem => {
   const ariaMessage = messageLocalization.format('dxScheduler-navigationNext');
 
   return {
-    key: NEXT_BUTTON_NAME,
+    key: ITEMS_NAME.nextButton,
     icon: 'chevronnext',
     elementAttr: {
-      class: NEXT_BUTTON_CLASS,
+      class: CLASS.nextButton,
       'aria-label': ariaMessage,
     },
     clickHandler: () => header._updateDateByDirection(Direction.Right),
@@ -147,12 +154,14 @@ const getNextButtonOptions = (header: SchedulerHeader): DateNavigatorItem => {
   };
 };
 
-export const getDateNavigator = (header: SchedulerHeader, item): ToolbarItem => {
-  // @ts-expect-error
+export const getDateNavigator = (header: SchedulerHeader, item: ToolbarItem): ToolbarItem => {
+  // @ts-expect-error current theme used
   const stylingMode = isMaterialBased() ? 'text' : 'contained';
   const config: ToolbarItem = extend(true, {}, {
+    location: 'before',
+    name: 'dateNavigator',
     widget: 'dxButtonGroup',
-    cssClass: DATE_NAVIGATOR_CLASS,
+    cssClass: CLASS.container,
     options: {
       stylingMode,
       selectionMode: 'none',
@@ -163,11 +172,11 @@ export const getDateNavigator = (header: SchedulerHeader, item): ToolbarItem =>
 
   options.items = (options.items ?? DEFAULT_ITEMS).map((groupItem) => {
     switch (groupItem) {
-      case PREVIOUS_BUTTON_NAME:
+      case ITEMS_NAME.previousButton:
         return getPreviousButtonOptions(header);
-      case NEXT_BUTTON_NAME:
+      case ITEMS_NAME.nextButton:
         return getNextButtonOptions(header);
-      case CALENDAR_BUTTON_NAME:
+      case ITEMS_NAME.calendarButton:
         return getCalendarButtonOptions(header);
       default:
         return groupItem;

e2e/testcafe-devextreme/tests/scheduler/common/header/todayButton.ts

@@ -31,13 +31,13 @@ import {
   getDropDownViewSwitcher,
   getTabViewSwitcher,
 } from './m_view_switcher';
+import { getTodayButtonOptions } from './today';
 
 const COMPONENT_CLASS = 'dx-scheduler-header';
-const DATE_NAVIGATOR_NAME = 'dateNavigator';
-const VIEW_SWITCHER_NAME = 'viewSwitcher';
-const TOOLBAR_ITEMS_MAP = {
-  [DATE_NAVIGATOR_NAME]: { location: 'before', name: 'dateNavigator' },
-  [VIEW_SWITCHER_NAME]: { location: 'after', name: 'viewSwitcher' },
+const ITEM_NAMES = {
+  today: 'today',
+  dateNavigator: 'dateNavigator',
+  viewSwitcher: 'viewSwitcher',
 };
 
 export class SchedulerHeader extends Widget<dxSchedulerOptions> {
@@ -91,6 +91,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
         ['tabIndex', [this.repaint.bind(this)]],
         ['focusStateEnabled', [this.repaint.bind(this)]],
         ['useDropDownViewSwitcher', [this.repaint.bind(this)]],
+        ['indicatorTime', []],
       ],
     );
   }
@@ -184,15 +185,17 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
 
   _parseItem(item) {
     const itemName = typeof item === 'string' ? item : item.name;
-    const itemOptions = { ...TOOLBAR_ITEMS_MAP[itemName], ...item };
+    const itemOptions = typeof item === 'string' ? {} : item;
 
     if (itemName) {
       switch (itemName) {
-        case VIEW_SWITCHER_NAME:
+        case ITEM_NAMES.today:
+          return getTodayButtonOptions(this, itemOptions);
+        case ITEM_NAMES.viewSwitcher:
           return this.option('useDropDownViewSwitcher')
             ? getDropDownViewSwitcher(this, itemOptions)
             : getTabViewSwitcher(this, itemOptions);
-        case DATE_NAVIGATOR_NAME:
+        case ITEM_NAMES.dateNavigator:
           this._renderCalendar();
 
           return getDateNavigator(this, itemOptions);