Fluent: Scheduler - Make a circle around today date (apply dxCalendar style)

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

@@ -1,5 +1,5 @@
 import dateUtils from '@js/core/utils/date';
-import { isMaterial } from '@js/ui/themes';
+import { isMaterialBased } from '@js/ui/themes';
 
 const { trimTime } = dateUtils;
 
@@ -20,7 +20,7 @@ export const getDateNavigator = (header, item) => {
   ];
 
   // @ts-expect-error
-  const stylingMode = isMaterial() ? 'text' : 'contained';
+  const stylingMode = isMaterialBased() ? 'text' : 'contained';
 
   return {
     widget: 'dxButtonGroup',

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

@@ -1,3 +1,5 @@
+import { isFluent } from '@js/ui/themes';
+
 import {
   formatViews,
   getViewName,
@@ -22,6 +24,9 @@ const getViewsAndSelectedView = (header) => {
 export const getViewSwitcher = (header, item) => {
   const { selectedView, views } = getViewsAndSelectedView(header);
 
+  // @ts-expect-error
+  const stylingMode = isFluent() ? 'outlined' : 'contained';
+
   return {
     widget: 'dxButtonGroup',
     locateInMenu: 'auto',
@@ -30,7 +35,7 @@ export const getViewSwitcher = (header, item) => {
       items: views,
       keyExpr: 'name',
       selectedItemKeys: [selectedView],
-      stylingMode: 'contained',
+      stylingMode,
       onItemClick: (e) => {
         const { view } = e.itemData;
 

packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx

@@ -17,7 +17,7 @@ export const viewFunction = ({
     {
       splitText
         // eslint-disable-next-line react/jsx-key
-        ? textParts.map((part) => (<span className="dx-scheduler-header-panel-cell-date">{part}</span>))
+        ? textParts.map((part) => (<div className="dx-scheduler-header-panel-cell-date"><span>{part}</span></div>))
         : text
     }
   </Fragment>

packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx

@@ -18,7 +18,7 @@ import { isHorizontalGroupingApplied } from '../../../utils';
 import { DateHeaderCell } from './cell';
 import getThemeType from '../../../../../../utils/getThemeType';
 
-const { isMaterial } = getThemeType();
+const { isMaterialBased } = getThemeType();
 
 export const viewFunction = ({
   isHorizontalGrouping,
@@ -73,7 +73,7 @@ export const viewFunction = ({
               dateCellTemplate={dateCellTemplate}
               key={key}
               colSpan={colSpan}
-              splitText={isMaterial}
+              splitText={isMaterialBased}
             />
           ))}
         </Row>

packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/__tests__/layout.test.tsx

@@ -12,7 +12,7 @@ import { DateHeaderCell } from '../../../../base/header_panel/date_header/cell';
 jest.mock('../../../../../../../utils/getThemeType', () => ({
   __esModule: true,
   ...jest.requireActual('../../../../../../../utils/getThemeType'),
-  default: jest.fn(() => ({ isMaterial: true })),
+  default: jest.fn(() => ({ isMaterialBased: true })),
 }));
 
 const isHorizontalGroupingApplied = jest.spyOn(utilsModule, 'isHorizontalGroupingApplied');

packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx

@@ -9,7 +9,7 @@ import { DateHeaderCell } from '../../../base/header_panel/date_header/cell';
 import { DateHeaderLayoutProps } from '../../../base/header_panel/date_header/layout';
 import getThemeType from '../../../../../../utils/getThemeType';
 
-const { isMaterial } = getThemeType();
+const { isMaterialBased } = getThemeType();
 
 export const viewFunction = ({
   isHorizontalGrouping,
@@ -38,7 +38,7 @@ export const viewFunction = ({
         const rowsCount = dataMap.length;
         const isTimeCellTemplate = rowsCount - 1 === rowIndex;
         const isWeekDayRow = rowsCount > 1 && rowIndex === 0;
-        const splitText = isMaterial && (isMonthDateHeader || isWeekDayRow);
+        const splitText = isMaterialBased && (isMonthDateHeader || isWeekDayRow);
 
         let validLeftVirtualCellCount: number | undefined = leftVirtualCellCount;
         let validRightVirtualCellCount: number | undefined = rightVirtualCellCount;

packages/devextreme/js/renovation/utils/__tests__/getThemeType.test.ts

@@ -1,8 +1,12 @@
 import getThemeType from '../getThemeType';
-import { isMaterial, isCompact, current } from '../../../ui/themes';
+import {
+  isMaterialBased, isFluent, isMaterial, isCompact, current,
+} from '../../../ui/themes';
 
 jest.mock('../../../ui/themes', () => ({
   current: jest.fn(() => 'test_current'),
+  isMaterialBased: jest.fn(() => 'test_isMaterialBased'),
+  isFluent: jest.fn(() => 'test_isFluent'),
   isMaterial: jest.fn(() => 'test_isMaterial'),
   isCompact: jest.fn(() => 'test_isCompact'),
 }));
@@ -13,8 +17,16 @@ describe('getThemeType', () => {
       .toEqual({
         isCompact: 'test_isCompact',
         isMaterial: 'test_isMaterial',
+        isFluent: 'test_isFluent',
+        isMaterialBased: 'test_isMaterialBased',
       });
 
+    expect(isMaterialBased)
+      .toBeCalledWith('test_current');
+
+    expect(isFluent)
+      .toBeCalledWith('test_current');
+
     expect(isMaterial)
       .toBeCalledWith('test_current');
 

packages/devextreme/js/renovation/utils/getThemeType.ts

@@ -1,11 +1,17 @@
-import { isMaterial, isCompact, current } from '../../ui/themes';
+import {
+  isMaterialBased, isFluent, isMaterial, isCompact, current,
+} from '../../ui/themes';
 
-const getThemeType = (): { isCompact: boolean; isMaterial: boolean } => {
+const getThemeType = (): {
+  isCompact: boolean; isMaterial: boolean; isFluent: boolean; isMaterialBased: boolean;
+} => {
   const theme = current();
 
   return {
     isCompact: isCompact(theme),
     isMaterial: isMaterial(theme),
+    isFluent: isFluent(theme),
+    isMaterialBased: isMaterialBased(theme),
   };
 };
 

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

@@ -33,9 +33,10 @@ export default class themes {
      * @public
      */
     static initialized(callback: Function): void;
-    static isMaterial(theme: string): boolean;
 }
 
 export function current(): string;
+export function isMaterialBased(theme: string): boolean;
+export function isFluent(theme: string): boolean;
 export function isMaterial(theme: string): boolean;
 export function isCompact(theme: string): boolean;

packages/devextreme/js/ui/themes.js

@@ -318,6 +318,10 @@ function isTheme(themeRegExp, themeName) {
     return new RegExp(themeRegExp).test(themeName);
 }
 
+export function isMaterialBased(themeName) {
+    return isMaterial(themeName) || isFluent(themeName);
+}
+
 export function isMaterial(themeName) {
     return isTheme('material', themeName);
 }
@@ -449,6 +453,8 @@ export default {
     isDark,
     isGeneric,
     isMaterial,
+    isFluent,
+    isMaterialBased,
     detachCssClasses,
     attachCssClasses,
     current,

packages/devextreme/scss/widgets/fluent/scheduler/_index.scss

@@ -105,9 +105,12 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   line-height: $fluent-scheduler-all-day-table-cell-height;
   font-size: $fluent-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
+  text-align: right;
+  padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
 
   .dx-scheduler-small & {
     font-size: $fluent-scheduler-all-day-title-font-size * 0.8;
+    padding-right: 2px;
   }
 
   .dx-scheduler-work-space-all-day-collapsed & {
@@ -224,9 +227,27 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
 
   &.dx-scheduler-header-panel-current-time-cell {
+    color: $scheduler-panel-text-color;
+
     &::before {
       content: none;
     }
+
+    .dx-scheduler-header-panel-cell-date {
+      &:last-child {
+        span {
+          color: $scheduler-appointment-text-color;
+          background-color: $scheduler-current-time-cell-color;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          width: 28px;
+          height: 28px;
+          line-height: $fluent-scheduler-header-panel-day-font-size + 16;
+        }
+      }
+    }
   }
 
   .dx-scheduler-header-panel-cell-date {
@@ -244,7 +265,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
     &:last-child {
       font-size: $fluent-scheduler-header-panel-day-font-size;
-      line-height: $fluent-scheduler-header-panel-day-font-size + 5;
+      line-height: $fluent-scheduler-header-panel-day-font-size + 19;
     }
   }
 }

packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss

@@ -52,7 +52,7 @@ $scheduler-timeline-cell-height: 50px !default;
 
   $fluent-scheduler-toolbar-item-offset: 0 16px !default;
   $fluent-scheduler-navigator-height: 36px !default;
-  $fluent-scheduler-header-panel-day-font-size: 30px !default;
+  $fluent-scheduler-header-panel-day-font-size: 16px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 18px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;

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

@@ -29817,7 +29817,6 @@ declare module DevExpress.ui {
      * [descr:ui.themes.initialized(callback)]
      */
     static initialized(callback: Function): void;
-    static isMaterial(theme: string): boolean;
   }
   /**
    * [descr:Widget]