diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx
index b2a755872b0f..9f5d2785a065 100644
--- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/dateHeaderText.tsx
+++ b/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) => ({part}))
+ ? textParts.map((part) => (
{part}
))
: text
}
diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx
index 886e6a14b14d..a83585363194 100644
--- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/base/header_panel/date_header/layout.tsx
+++ b/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 { isMaterial, isFluent } = getThemeType();
export const viewFunction = ({
isHorizontalGrouping,
@@ -73,7 +73,7 @@ export const viewFunction = ({
dateCellTemplate={dateCellTemplate}
key={key}
colSpan={colSpan}
- splitText={isMaterial}
+ splitText={isMaterial || isFluent}
/>
))}
diff --git a/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx b/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx
index aa95a4a405a5..10a8c9e1b775 100644
--- a/packages/devextreme/js/renovation/ui/scheduler/workspaces/timeline/header_panel/date_header/layout.tsx
+++ b/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 { isMaterial, isFluent } = 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 = (isMaterial || isFluent) && (isMonthDateHeader || isWeekDayRow);
let validLeftVirtualCellCount: number | undefined = leftVirtualCellCount;
let validRightVirtualCellCount: number | undefined = rightVirtualCellCount;
diff --git a/packages/devextreme/js/renovation/utils/getThemeType.ts b/packages/devextreme/js/renovation/utils/getThemeType.ts
index 36f6374f0085..e50665137056 100644
--- a/packages/devextreme/js/renovation/utils/getThemeType.ts
+++ b/packages/devextreme/js/renovation/utils/getThemeType.ts
@@ -1,11 +1,14 @@
-import { isMaterial, isCompact, current } from '../../ui/themes';
+import {
+ isFluent, isMaterial, isCompact, current,
+} from '../../ui/themes';
-const getThemeType = (): { isCompact: boolean; isMaterial: boolean } => {
+const getThemeType = (): { isCompact: boolean; isMaterial: boolean; isFluent: boolean } => {
const theme = current();
return {
isCompact: isCompact(theme),
isMaterial: isMaterial(theme),
+ isFluent: isFluent(theme),
};
};
diff --git a/packages/devextreme/js/ui/themes.d.ts b/packages/devextreme/js/ui/themes.d.ts
index 67df532f3244..664a3ee14679 100644
--- a/packages/devextreme/js/ui/themes.d.ts
+++ b/packages/devextreme/js/ui/themes.d.ts
@@ -34,8 +34,10 @@ export default class themes {
*/
static initialized(callback: Function): void;
static isMaterial(theme: string): boolean;
+ static isFluent(theme: string): boolean;
}
export function current(): string;
+export function isFluent(theme: string): boolean;
export function isMaterial(theme: string): boolean;
export function isCompact(theme: string): boolean;
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
index 7d03e800ddc0..80c10a5ed4e3 100644
--- a/packages/devextreme/js/ui/themes.js
+++ b/packages/devextreme/js/ui/themes.js
@@ -318,6 +318,10 @@ function isTheme(themeRegExp, themeName) {
return new RegExp(themeRegExp).test(themeName);
}
+export function isFluent(themeName) {
+ return isTheme('fluent', themeName);
+}
+
export function isMaterial(themeName) {
return isTheme('material', themeName);
}
@@ -445,6 +449,7 @@ export default {
isDark,
isGeneric,
isMaterial,
+ isFluent,
detachCssClasses,
attachCssClasses,
current,
diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
index ae802e89d67a..7285af718cd4 100644
--- a/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
@@ -220,9 +220,26 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
&.dx-scheduler-header-panel-current-time-cell {
+ color: $scheduler-panel-text-color;
+
&::before {
content: none;
}
+
+ > div: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;
+ margin-top: 3px;
+ margin-bottom: 4px;
+ }
+ }
}
.dx-scheduler-header-panel-cell-date {
@@ -240,7 +257,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;
}
}
}
diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss
index 113e99bef902..fd504b76c713 100644
--- a/packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss
+++ b/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;