From c38b9b67579756f154b66ac0ec60e8106b4a5dcc Mon Sep 17 00:00:00 2001
From: TeyaVes <Teya.Veselinova@progress.com>
Date: Wed, 3 Aug 2022 13:54:20 +0300
Subject: [PATCH] feat(scheduler): add scheduler fluent styles

---
 packages/fluent/scss/calendar/_theme.scss     |   2 +-
 packages/fluent/scss/core/helpers/_index.scss |   1 +
 .../fluent/scss/core/helpers/_resizing.scss   | 120 +++
 packages/fluent/scss/index.scss               |   4 +-
 packages/fluent/scss/scheduler/_layout.scss   | 978 ++++++++++++++++++
 packages/fluent/scss/scheduler/_theme.scss    | 249 +++++
 .../fluent/scss/scheduler/_variables.scss     | 260 +++++
 packages/fluent/scss/scheduler/index.scss     |  34 +
 8 files changed, 1645 insertions(+), 3 deletions(-)
 create mode 100644 packages/fluent/scss/core/helpers/_resizing.scss
 create mode 100644 packages/fluent/scss/scheduler/_layout.scss
 create mode 100644 packages/fluent/scss/scheduler/_theme.scss
 create mode 100644 packages/fluent/scss/scheduler/_variables.scss
 create mode 100644 packages/fluent/scss/scheduler/index.scss

diff --git a/packages/fluent/scss/calendar/_theme.scss b/packages/fluent/scss/calendar/_theme.scss
index 2e6db8f5726..3e2021bb65b 100644
--- a/packages/fluent/scss/calendar/_theme.scss
+++ b/packages/fluent/scss/calendar/_theme.scss
@@ -166,7 +166,7 @@
     // Scheduler integration
     .k-scheduler .k-calendar .k-other-month {
         @include fill(
-            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} )
+            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} ),
             transparent
         );
     }
diff --git a/packages/fluent/scss/core/helpers/_index.scss b/packages/fluent/scss/core/helpers/_index.scss
index 28d3275e0f6..2d2b1ed8cf7 100644
--- a/packages/fluent/scss/core/helpers/_index.scss
+++ b/packages/fluent/scss/core/helpers/_index.scss
@@ -5,3 +5,4 @@
 @use "reset";
 @use "normalize";
 @use "layout";
+@use "resizing";
diff --git a/packages/fluent/scss/core/helpers/_resizing.scss b/packages/fluent/scss/core/helpers/_resizing.scss
new file mode 100644
index 00000000000..0372b6633f5
--- /dev/null
+++ b/packages/fluent/scss/core/helpers/_resizing.scss
@@ -0,0 +1,120 @@
+// Resize handle
+.k-resize-handle,
+.k-resize-hint {
+    position: absolute;
+    border-color: inherit;
+    z-index: 200;
+}
+.k-resize-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.k-resize-handle::before {
+    content: "";
+    border: 0 solid;
+    border-color: inherit;
+}
+.k-resize-n {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    top: -3px;
+    cursor: n-resize;
+}
+.k-resize-s {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    bottom: -3px;
+    cursor: s-resize;
+}
+.k-resize-w {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    left: -3px;
+    cursor: w-resize;
+}
+.k-resize-e {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    right: -3px;
+    cursor: e-resize;
+}
+
+.k-resize-sw,
+.k-resize-se,
+.k-resize-nw,
+.k-resize-ne {
+    width: 5px;
+    height: 5px;
+}
+
+.k-resize-sw {
+    cursor: sw-resize;
+    bottom: 0;
+    left: 0;
+}
+.k-resize-se {
+    cursor: se-resize;
+    bottom: 0;
+    right: 0;
+}
+.k-resize-nw {
+    cursor: nw-resize;
+    top: 0;
+    left: 0;
+}
+.k-resize-ne {
+    cursor: ne-resize;
+    top: 0;
+    right: 0;
+}
+
+.k-vertical-resize {
+    cursor: row-resize;
+}
+.k-horizontal-resize {
+    cursor: col-resize;
+}
+
+
+.k-resize-hint {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: auto;
+        height: 20px;
+        align-self: stretch;
+    }
+    .k-resize-hint-marker {
+        width: 2px;
+        height: auto;
+        flex: 1 1 auto;
+    }
+}
+.k-resize-hint-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: 20px;
+        height: auto;
+        align-self: stretch;
+    }
+
+    .k-resize-hint-marker {
+        width: auto;
+        height: 2px;
+        flex: 1 1 auto;
+    }
+}
diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
index b7f184daa65..72c16c495b1 100644
--- a/packages/fluent/scss/index.scss
+++ b/packages/fluent/scss/index.scss
@@ -140,7 +140,7 @@
 
 // Scheduling
 // @use "gantt";
-// @use "scheduler";
+@use "scheduler";
 
 
 // Misc
@@ -302,7 +302,7 @@
 
     // Scheduling
     // @include gantt.styles();
-    // @include scheduler.styles();
+    @include scheduler.styles();
 
 
     // Misc
diff --git a/packages/fluent/scss/scheduler/_layout.scss b/packages/fluent/scss/scheduler/_layout.scss
new file mode 100644
index 00000000000..e543807e8a6
--- /dev/null
+++ b/packages/fluent/scss/scheduler/_layout.scss
@@ -0,0 +1,978 @@
+@use "_variables.scss" as *;
+@use "../core" as *;
+@use "../toolbar/_variables.scss" as *;
+
+@mixin kendo-scheduler--layout() {
+
+    .k-scheduler {
+        border-width: var( --kendo-scheduler-border-width, #{$kendo-scheduler-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-scheduler-font-family, #{$kendo-scheduler-font-family} );
+        font-size: var( --kendo-scheduler-font-size, #{$kendo-scheduler-font-size} );
+        line-height: var( --kendo-scheduler-line-height, #{$kendo-scheduler-line-height} );
+        display: flex;
+        flex-direction: column;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        table,
+        thead,
+        tfoot,
+        tbody,
+        tr,
+        th,
+        td,
+        div,
+        > * {
+            border-color: inherit;
+        }
+    }
+
+    kendo-scheduler.k-scheduler {
+        overflow: hidden;
+
+        &.k-readonly-scheduler .k-event-delete {
+            display: none;
+        }
+    }
+
+    .k-scheduler-table {
+        width: 100%;
+        max-width: none;
+        border-collapse: separate;
+        border-spacing: 0;
+        table-layout: fixed;
+
+        td,
+        th {
+            padding-inline: var( --kendo-scheduler-cell-padding-x, #{$kendo-scheduler-cell-padding-x} );
+            padding-block: var( --kendo-scheduler-cell-padding-y, #{$kendo-scheduler-cell-padding-y} );
+            height: var( --kendo-scheduler-cell-height, #{$kendo-scheduler-cell-height} );
+            overflow: hidden;
+            white-space: nowrap;
+            border-style: solid;
+            border-inline-width: 1px 0;
+            border-block-width: 0 1px;
+            vertical-align: top;
+            box-sizing: content-box;
+        }
+
+        td:first-child,
+        th:first-child {
+            border-inline-start-width: 0;
+        }
+
+        .k-middle-row td {
+            border-block-end-style: dotted;
+        }
+
+        .k-link {
+            cursor: pointer;
+        }
+    }
+
+    .k-scheduler-layout-flex {
+        overflow: auto;
+
+        .k-scheduler-head {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: 3;
+        }
+
+        .k-scheduler-body {
+            position: relative;
+        }
+
+        .k-scheduler-head,
+        .k-scheduler-body {
+            display: flex;
+            flex: 100%;
+            flex-wrap: wrap;
+        }
+
+        .k-scheduler-row {
+            display: flex;
+            flex: 1 1 100%;
+            width: 100%;
+            min-width: 0;
+        }
+
+        .k-scheduler-group {
+            display: flex;
+            flex: 1 1 100%;
+            width: 100%;
+            min-width: 0;
+            flex-wrap: wrap;
+
+            .k-group-cell {
+                display: flex;
+                flex: 1 1 auto;
+                flex-wrap: wrap;
+                overflow: auto;
+            }
+
+            .k-group-content {
+                padding: 0;
+                display: flex;
+                flex: 1 1 100%;
+                width: 100%;
+                border-width: 0;
+                flex-wrap: wrap;
+            }
+
+            &.k-group-horizontal {
+                .k-group-cell {
+                    flex-basis: 100%;
+                    border-width: 0;
+                    padding: 0;
+                }
+            }
+        }
+
+        &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell {
+            flex-basis: auto;
+        }
+
+        .k-more-events {
+            inset-block-end: 2px;
+            inset-inline-start: 0;
+            width: 100%;
+        }
+
+        .k-scheduler-cell {
+            display: flex;
+            flex: 1 1 100%;
+            padding-inline: var( --kendo-scheduler-cell-padding-x, #{$kendo-scheduler-cell-padding-x} );
+            padding-block: var( --kendo-scheduler-cell-padding-y, #{$kendo-scheduler-cell-padding-y} );
+            min-height: 1.5em;
+            overflow: hidden;
+            white-space: nowrap;
+            border-style: solid;
+            border-inline-width: 0 1px;
+            border-block-width: 0 1px;
+            vertical-align: top;
+            box-sizing: content-box;
+
+            &.k-slot-cell {
+                position: relative;
+            }
+
+            &.k-heading-cell {
+                justify-content: center;
+                font-weight: bold;
+            }
+
+            &.k-side-cell {
+                justify-content: flex-end;
+                flex-grow: 0;
+                flex-basis: auto;
+                overflow: visible;
+            }
+
+            &.k-major-cell {
+                border-block-end-width: 0;
+            }
+        }
+
+        .k-middle-row .k-scheduler-cell {
+            border-block-end-style: dotted;
+        }
+
+        .k-resource-cell {
+            flex: none;
+            display: flex;
+            flex-wrap: wrap;
+            overflow: visible;
+        }
+
+        .k-resource-content {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0;
+            border-width: 0;
+        }
+
+        .k-sticky-cell {
+            display: flex;
+            flex-wrap: wrap;
+            flex-basis: 0;
+            position: sticky;
+            inset-inline-start: 0;
+            z-index: 3;
+        }
+    }
+
+    // Header and footer
+    .k-scheduler-toolbar {
+        border-width: 0;
+        border-block-end-width: $kendo-toolbar-border-width;
+        white-space: nowrap;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 2;
+
+        .k-widget {
+            font-size: inherit;
+        }
+
+        // Current date
+        .k-nav-current {
+            color: inherit;
+            outline: 0;
+            text-decoration: none;
+            display: inline-flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            cursor: pointer;
+
+            .k-sm-date-format,
+            .k-lg-date-format {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .k-sm-date-format { display: none; }
+        }
+
+        // Scheduler search
+        .k-scheduler-search {
+            display: inline-flex;
+            flex-flow: row nowrap;
+        }
+
+        // Responsive scheduler toolbar
+        @media (max-width: 1400px) {
+            .k-nav-current .k-lg-date-format { max-width: 200px; }
+        }
+
+        @media (max-width: 1024px) {
+            .k-nav-current .k-lg-date-format { display: none; }
+            .k-nav-current .k-sm-date-format { display: inline-block; }
+        }
+    }
+
+
+    // Scheduler navigation
+    .k-scheduler-navigation {}
+
+
+    // View switcher
+    .k-scheduler-views-wrapper {
+
+        // Views dropdown
+        .k-views-dropdown {
+            width: auto;
+            font: inherit;
+            display: none;
+        }
+
+        @media (max-width: 1024px) {
+            .k-scheduler-views { display: none; }
+            .k-views-dropdown { display: inline-block; }
+        }
+    }
+
+
+    // Scheduler footer
+    .k-scheduler-footer {
+        @include box-shadow( none );
+        border-width: 0;
+        border-top-width: $kendo-toolbar-border-width;
+        white-space: nowrap;
+        flex-shrink: 0;
+        position: relative;
+    }
+
+    // Layout
+    .k-scheduler-layout {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
+
+        > tbody > tr > td {
+            padding: 0;
+            vertical-align: top;
+        }
+
+        // Remove bottom border from first cell of hours cells spaning on two rows
+        tr + tr,
+        .k-scheduler-pane + .k-scheduler-pane {
+            .k-scheduler-times tr {
+                th {
+                    border-block-end-color: transparent;
+                }
+
+                .k-slot-cell,
+                .k-scheduler-times-all-day,
+                &:last-child th {
+                    border-block-end-color: inherit;
+                }
+            }
+        }
+    }
+
+    .k-scheduler-layout.k-scheduler-flex-layout {
+        display: flex;
+        flex-direction: column;
+
+        &.k-scheduler-weekview,
+        &.k-scheduler-dayview {
+            .k-scheduler-pane:first-child .k-scheduler-table {
+                table-layout: fixed;
+            }
+        }
+    }
+
+    // Scheduler view header
+    .k-scheduler-header,
+    .k-scheduler-view-header {
+        padding-inline-end: var(--kendo-scrollbar-width, #{$default-scrollbar-width});
+    }
+
+    .k-scheduler-header th {
+        text-align: center;
+    }
+
+    .k-scheduler-header,
+    .k-scheduler-header-wrap,
+    .k-scheduler-header-wrap > div {
+        border-color: inherit;
+        overflow: hidden;
+    }
+
+    .k-scheduler-header-wrap {
+        border-width: 0;
+        border-style: solid;
+        position: relative;
+    }
+
+    .k-scheduler-times {
+        border-color: inherit;
+        position: relative;
+        overflow: hidden;
+
+        .k-scheduler-table { table-layout: auto; }
+
+        th {
+            border-inline-width: 0 1px;
+            border-block-width: 0 1px;
+            text-align: right;
+        }
+
+        .k-slot-cell,
+        .k-scheduler-times-all-day {
+            border-block-end-color: inherit;
+        }
+
+        .k-slot-cell.k-last-resource {
+            border-inline-end: 0;
+        }
+
+        .k-slot-cell.k-empty-slot {
+            padding-inline: 0;
+        }
+    }
+
+    .k-scheduler-datecolumn {
+        width: var( --kendo-scheduler-datecolumn-width, #{$kendo-scheduler-datecolumn-width} );
+    }
+
+    .k-scheduler-timecolumn {
+        width: var( --kendo-scheduler-timecolumn-width, #{$kendo-scheduler-timecolumn-width} );
+        white-space: nowrap;
+    }
+
+    // Scheduler content
+    .k-scheduler-content {
+        border-color: inherit;
+        position: relative;
+        overflow: auto;
+    }
+
+
+    // Appointments
+    kendo-scheduler .k-event,
+    .k-event {
+        @include border-radius( var( --kendo-scheduler-event-border-radius, #{$kendo-scheduler-event-border-radius} ) );
+        min-height: var( --kendo-scheduler-event-min-height, #{$kendo-scheduler-event-min-height} );
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        outline: 0;
+        cursor: default;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        position: absolute;
+        overflow: hidden;
+        padding-inline: var( --kendo-scheduler-event-padding-x, #{$kendo-scheduler-event-padding-x} ) calc( var( --kendo-scheduler-event-padding-x, #{$kendo-scheduler-event-padding-x} ) / 2 );
+        padding-block: var( --kendo-scheduler-event-padding-y, #{$kendo-scheduler-event-padding-y} );
+        gap: 2px;
+
+        > div {
+            position: relative;
+            z-index: 2;
+            flex: 1 1 auto;
+            overflow: hidden;
+        }
+
+        // Template
+        .k-event-template {
+            line-height: var( --kendo-scheduler-event-line-height, #{$kendo-scheduler-event-line-height} );
+        }
+
+        .k-event-time {
+            padding-block-end: 0;
+            font-size: .875em;
+            white-space: nowrap;
+            display: none;
+        }
+
+
+        // Actions
+        .k-event-actions {
+            white-space: nowrap;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: calc( var( --kendo-scheduler-line-height, #{$kendo-scheduler-line-height} ) * var( --kendo-scheduler-font-size, #{$kendo-scheduler-font-size} ) );
+            position: relative;
+            z-index: 1;
+
+            a { color: inherit; }
+        }
+
+        // Resize handles
+        .k-resize-handle {
+            z-index: 4;
+            opacity: .5;
+            visibility: hidden;
+        }
+
+        .k-resize-handle::before { border-color: currentColor; }
+
+        .k-resize-n {
+            height: .5em;
+            inset-block-start: 0;
+        }
+
+        .k-resize-s {
+            height: .5em;
+            inset-block-end: 0;
+        }
+
+        .k-resize-n::before,
+        .k-resize-s::before {
+            width: var( --kendo-scheduler-resize-handle-width, #{$kendo-scheduler-resize-handle-width} );
+            border-block-end-width: 1px;
+        }
+
+        .k-resize-w {
+            width: .5em;
+            inset-inline-start: 0;
+        }
+
+        .k-resize-e {
+            width: .5em;
+            inset-inline-end: 0;
+        }
+
+        .k-resize-w::before,
+        .k-resize-e::before {
+            height: var( --kendo-scheduler-resize-handle-width, #{$kendo-scheduler-resize-handle-width} );
+            border-inline-start-width: 1px;
+        }
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            .k-event-actions .k-event-delete,
+            .k-resize-handle {
+                visibility: visible;
+            }
+        }
+
+        &.k-event-drag-hint .k-event-time {
+            display: block;
+        }
+
+        .k-event-top-actions,
+        .k-event-bottom-actions {
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            width: 100%;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+        }
+
+        .k-event-bottom-actions {
+            inset-block-start: auto;
+            inset-block-end: 0;
+        }
+    }
+
+    .k-event-delete {
+        opacity: .5;
+        visibility: hidden;
+        display: flex;
+        align-items: center;
+        margin-inline-start: auto;
+
+        &:hover,
+        &.k-hover {
+            opacity: 1;
+        }
+    }
+
+    // Tasks
+    .k-scheduler-mark {
+        width: 1em;
+        height: 1em;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    // More events indicator
+    .k-more-events {
+        padding: 0;
+        height: var( --kendo-scheduler-more-btn-height, #{$kendo-scheduler-more-btn-height} );
+        border-style: solid;
+        border-width: 1px;
+        overflow: hidden;
+        position: absolute;
+        justify-content: center;
+    }
+
+    // Current time
+    .k-current-time {
+        position: absolute;
+
+        &.k-current-time-arrow-left,
+        &.k-current-time-arrow-right,
+        &.k-current-time-arrow-down {
+            width: 0;
+            height: 0;
+            background: transparent;
+            border: 4px solid transparent;
+        }
+    }
+
+    // Draging hint
+    .k-event-drag-hint {
+        opacity: .5;
+        z-index: 3;
+
+        .k-event-actions,
+        .k-event-top-actions,
+        .k-event-bottom-actions,
+        .k-resize-handle {
+            display: none;
+        }
+
+        .k-event-time {
+            display: block;
+        }
+    }
+
+
+    // Resizing
+    .k-scheduler-marquee {
+        border-width: 0;
+        border-style: solid;
+
+        // label
+        .k-label-top,
+        .k-label-bottom {
+            font-size: .75em;
+            position: absolute;
+        }
+
+        // Angle tingie
+        &.k-first::before,
+        &.k-last::after {
+            content: "";
+            border-width: 3px;
+            border-style: solid;
+            position: absolute;
+            width: 0;
+            height: 0;
+        }
+
+        &.k-first::before {
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            border-right-color: transparent;
+            border-block-end-color: transparent;
+        }
+
+        &.k-last::after {
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            border-inline-start-color: transparent;
+            border-top-color: transparent;
+        }
+    }
+
+    // sass-lint:disable no-important
+    // remove scrollbars during PDF export
+    .k-pdf-export-shadow .k-scheduler,
+    .k-scheduler-pdf-export .k-scheduler-content,
+    .k-scheduler-pdf-export .k-scheduler-times {
+        height: auto !important;
+        overflow: visible !important;
+    }
+
+    .k-scheduler-pdf-export {
+        overflow: hidden;
+
+        .k-scheduler-header {
+            padding: 0 !important;
+        }
+
+        .k-scheduler-header-wrap {
+            border-width: 0 !important;
+        }
+
+        .k-scheduler-header .k-scheduler-table,
+        .k-scheduler-content .k-scheduler-table {
+            width: 100% !important;
+        }
+    }
+    // sass-lint:enable no-important
+
+
+    // TODO: add this class to jQuery rendering
+    // after refactoring jQuery scheduler layout to be flex
+    .k-recurrence-editor {
+        display: flex;
+        flex-direction: column;
+    }
+
+    kendo-scheduler .k-recurrence-editor {
+        display: block;
+    }
+
+    // Day view
+    .k-scheduler-dayview {}
+
+
+    // Workweek view
+    // sass-lint:disable class-name-format
+    .k-scheduler-workWeekview {}
+    // sass-lint:enable class-name-format
+
+
+    // Week view
+    .k-scheduler-weekview {}
+
+
+    // Month view
+    .k-scheduler-monthview {
+
+        .k-scheduler-table {
+            height: 100%;
+        }
+
+        .k-scheduler-table td {
+            height: 80px;
+            text-align: right;
+        }
+
+        .k-scheduler-body .k-scheduler-cell {
+            min-height: 80px;
+        }
+
+        // sass-lint:disable no-important
+        // hidden cells must have no layout
+        .k-hidden {
+            padding-inline: 0 !important;
+            border-inline-end-width: 0 !important;
+        }
+
+        // sass-lint:enable no-important
+        .k-scheduler-table-auto,
+        .k-scheduler-table-auto td,
+        .k-scheduler-content .k-scheduler-table-auto {
+            height: auto;
+        }
+
+        // Force vertical scroll in monthview for jquery
+        .k-scheduler-content {
+            overflow-y: scroll;
+        }
+
+        &.k-scheduler-flex-layout .k-scheduler-content {
+            overflow-y: auto;
+        }
+    }
+
+
+    // Agenda view
+    .k-scheduler-agendaview {
+
+        .k-task {
+            display: flex;
+            flex: 1 1 100%;
+            align-items: center;
+            gap: map-get( $kendo-spacing, thin );
+        }
+
+        .k-scheduler-mark {
+            margin-inline-end: .5em;
+            width: 1em;
+            height: 1em;
+        }
+
+        .k-scheduler-table {
+            th:first-child,
+            td:first-child {
+                border-inline-start-width: 1px;
+            }
+
+            td.k-first {
+                border-inline-start-width: 0;
+            }
+        }
+
+        .k-hover .k-task > .k-event-delete,
+        .k-scheduler-content tr:hover .k-event-delete,
+        .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
+        .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
+            visibility: visible;
+        }
+    }
+
+    .k-scheduler-agendaday {
+        margin: 0 .2em 0 0;
+        font-size: 3em;
+        line-height: 1;
+        font-weight: 400;
+        float: left;
+    }
+
+    .k-scheduler-agendaweek {
+        display: block;
+        margin: .4em 0 0;
+        line-height: 1;
+        font-style: normal;
+    }
+
+    .k-scheduler-agendadate {
+        font-size: .75em;
+    }
+
+
+    // Timeline view
+    .k-scheduler-timelineview {
+        .k-slot-cell {
+            overflow: hidden;
+        }
+        .k-scheduler-content {
+            overflow: auto;
+        }
+    }
+
+    .k-scheduler-pane {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .k-scheduler-pane .k-scheduler-times {
+        flex: 0 0 auto;
+    }
+
+    .k-scheduler-pane .k-scheduler-times .k-scheduler-table {
+        height: 100%;
+    }
+
+    .k-scheduler-pane .k-scheduler-header,
+    .k-scheduler-pane .k-scheduler-content {
+        flex: 1 1 auto;
+    }
+
+
+    // Year view
+    .k-scheduler-yearview {
+        .k-scheduler-body {
+            padding-inline: var( --kendo-scheduler-yearview-padding-x, #{$kendo-scheduler-yearview-padding-x} );
+            padding-block: var( --kendo-scheduler-yearview-padding-y, #{$kendo-scheduler-yearview-padding-y} );
+            justify-content: center;
+        }
+
+        .k-calendar {
+            width: 100%;
+            border-width: 0;
+
+            .k-calendar-view {
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: var( --kendo-scheduler-yearview-calendar-gap, #{$kendo-scheduler-yearview-calendar-gap} );
+            }
+
+            .k-content {
+                flex: 0;
+            }
+
+            .k-link {
+                position: relative;
+            }
+
+            td.k-selected {
+                background-color: inherit;
+            }
+        }
+
+        .k-day-indicator {
+            margin-block-start: $kendo-scheduler-yearview-indicator-calc-offset-top;
+            width: var( --kendo-scheduler-yearview-indicator-size, #{$kendo-scheduler-yearview-indicator-size} );
+            height: var( --kendo-scheduler-yearview-indicator-size, #{$kendo-scheduler-yearview-indicator-size} );
+            border-radius: var( --kendo-scheduler-yearview-indicator-border-radius, #{$kendo-scheduler-yearview-indicator-border-radius} );
+            position: absolute;
+            inset-inline-start: var( --kendo-scheduler-yearview-indicator-calc-offset-left, #{$kendo-scheduler-yearview-indicator-calc-offset-left} );
+        }
+    }
+
+    .k-scheduler-tooltip {
+        padding-inline: var( --kendo-scheduler-tooltip-padding-x, #{$kendo-scheduler-tooltip-padding-x} );
+        padding-block: var( --kendo-scheduler-tooltip-padding-y, #{$kendo-scheduler-tooltip-padding-y} );
+        border-width: var( --kendo-scheduler-tooltip-border-width, #{$kendo-scheduler-tooltip-border-width} );
+        color: inherit;
+
+        .k-tooltip-title {
+            margin-block-end: var( --kendo-scheduler-tooltip-title-margin-y, #{$kendo-scheduler-tooltip-title-margin-y} );
+
+            .k-month {
+                font-size: var( --kendo-scheduler-tooltip-month-font-size, #{$kendo-scheduler-tooltip-month-font-size} );
+                text-transform: uppercase;
+            }
+
+            .k-day {
+                font-size: var( --kendo-scheduler-tooltip-day-font-size, #{$kendo-scheduler-tooltip-day-font-size} );
+            }
+        }
+
+        .k-tooltip-events-container {
+            overflow: auto;
+        }
+
+        .k-tooltip-events {
+            max-height: var( --kendo-scheduler-tooltip-events-max-height, #{$kendo-scheduler-tooltip-events-max-height} );
+            display: flex;
+            flex-direction: column;
+            gap: var( --kendo-scheduler-tooltip-events-gap, #{$kendo-scheduler-tooltip-events-gap} );
+        }
+
+        .k-tooltip-event {
+            padding-inline: var( --kendo-scheduler-tooltip-event-padding-x, #{$kendo-scheduler-tooltip-event-padding-x} );
+            padding-block: var( --kendo-scheduler-tooltip-event-padding-y, #{$kendo-scheduler-tooltip-event-padding-y} );
+            border-radius: var( --kendo-scheduler-tooltip-event-border-radius, #{$kendo-scheduler-tooltip-event-border-radius} );
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex-shrink: 0;
+            position: relative;
+            gap: var( --kendo-scheduler-tooltip-event-gap, #{$kendo-scheduler-tooltip-event-gap} );
+
+            .k-event-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .k-event-time {
+                display: flex;
+                flex-shrink: 0;
+                font-size: inherit;
+            }
+
+        }
+
+
+        .k-no-data {
+            height: auto;
+            min-height: auto;
+            color: inherit;
+        }
+    }
+
+    .k-scheduler-edit-dialog {
+        .k-dialog {
+            max-height: 100vh;
+        }
+    }
+
+    .k-scheduler-edit-form {
+
+        .k-edit-form-container { width: 100%; }
+        .k-edit-label { width: 17%; }
+        .k-edit-field { width: 77%; }
+
+        .k-edit-field > ul > li {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+        }
+
+        .k-recurrence-editor {
+            .k-radio-list .k-radio-wrap,
+            .k-checkbox-list .k-checkbox-wrap {
+                align-self: center;
+            }
+        }
+
+        .k-recur-interval,
+        .k-recur-count,
+        .k-recur-monthday {
+            width: 5em;
+        }
+
+        .k-recur-until,
+        .k-recur-month,
+        .k-recur-weekday,
+        .k-recur-weekday-offset {
+            width: 10em;
+        }
+
+        .k-scheduler-datetime-picker {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: map-get( $kendo-spacing, 1 );
+        }
+
+    }
+
+   .k-rtl {
+        .k-scheduler,
+        &.k-scheduler {
+            .k-i-arrow-60-left,
+            .k-i-arrow-60-right,
+            .k-current-time-arrow-right {
+                transform: scaleX(-1);
+            }
+
+            .k-scheduler-agendaday {
+                float: right;
+                margin: 0 0 0 .2em;
+            }
+        }
+    }
+
+    .k-safari {
+        .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
+            margin-block-end: var( --kendo-scheduler-tooltip-event-gap #{$kendo-scheduler-tooltip-event-gap} );
+        }
+
+        .k-scheduler-yearview .k-calendar-view .k-month {
+            margin-inline: calc(var( --kendo-scheduler-yearview-calendar-gap, #{$kendo-scheduler-yearview-calendar-gap} ) / 2);
+        }
+    }
+}
diff --git a/packages/fluent/scss/scheduler/_theme.scss b/packages/fluent/scss/scheduler/_theme.scss
new file mode 100644
index 00000000000..fdb4589b28e
--- /dev/null
+++ b/packages/fluent/scss/scheduler/_theme.scss
@@ -0,0 +1,249 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-scheduler--theme() {
+
+    .k-scheduler {
+        @include fill(
+            var( --kendo-scheduler-text, #{$kendo-scheduler-text} ),
+            var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} ),
+            var( --kendo-scheduler-border, #{$kendo-scheduler-border} )
+        );
+    }
+
+    // Current time
+    .k-current-time {
+        background: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+
+        &.k-current-time-arrow-left {
+            border-right-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
+        }
+    }
+
+    // Header and footer
+    .k-scheduler-toolbar {
+        @include fill(
+            var( --kendo-scheduler-toolbar-text, #{$kendo-scheduler-toolbar-text} ),
+            var( --kendo-scheduler-toolbar-bg, #{$kendo-scheduler-toolbar-bg} ),
+            var( --kendo-scheduler-toolbar-border, #{$kendo-scheduler-toolbar-border} ),
+            var( --kendo-scheduler-toolbar-gradient, #{$kendo-scheduler-toolbar-gradient} )
+        );
+    }
+    .k-scheduler-footer {
+        @include fill(
+            var( --kendo-scheduler-footer-text, #{$kendo-scheduler-footer-text} ),
+            var( --kendo-scheduler-footer-bg, #{$kendo-scheduler-footer-bg} ),
+            var( --kendo-scheduler-footer-border, #{$kendo-scheduler-footer-border} ),
+            var( --kendo-scheduler-footer-gradient, #{$kendo-scheduler-footer-gradient} )
+        );
+    }
+
+    .k-scheduler-header {
+       background-color: var( --kendo-scheduler-toolbar-bg, #{$kendo-scheduler-toolbar-bg} );
+    }
+
+    .k-scheduler-header-wrap {
+        background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+    }
+
+
+    //Scheduler navigation
+    .k-scheduler-navigation {}
+
+
+    // View switcher
+    .k-scheduler-views {}
+
+
+    // Scheduler footer
+    .k-scheduler-footer {}
+
+
+    // Scheduler content
+    .k-scheduler-content {}
+
+    .k-scheduler-nonwork,
+    .k-scheduler .k-nonwork-hour {
+        @include fill(
+            var( --kendo-scheduler-nonwork-text, #{$kendo-scheduler-nonwork-text} ),
+            var( --kendo-scheduler-nonwork-bg, #{$kendo-scheduler-nonwork-bg} )
+        );
+    }
+
+    .k-scheduler-other-month,
+    .k-scheduler .k-other-month {
+        @include fill(
+            var( --kendo-scheduler-othermonth-text, #{$kendo-scheduler-othermonth-text} ),
+            var( --kendo-scheduler-othermonth-bg, #{$kendo-scheduler-othermonth-bg} )
+        );
+    }
+
+    .k-scheduler-layout td.k-selected,
+    .k-scheduler-layout .k-scheduler-cell.k-selected {
+        background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+    }
+
+    .k-scheduler-layout-flex {
+        .k-scheduler-head,
+        .k-sticky-cell {
+            background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+        }
+    }
+
+
+    // Events
+    .k-event {
+        @include fill(
+            var( --kendo-scheduler-event-text, #{$kendo-scheduler-event-text} ),
+            var( --kendo-scheduler-event-bg, #{$kendo-scheduler-event-bg} ),
+            var( --kendo-scheduler-event-border, #{$kendo-scheduler-event-border} ),
+            var( --kendo-scheduler-event-gradient, #{$kendo-scheduler-event-gradient} )
+        );
+        @include box-shadow( var( --kendo-scheduler-event-shadow, #{$kendo-scheduler-event-shadow} ) );
+
+        &.k-hover {
+            @include fill(
+                var( --kendo-scheduler-event-hover-text, #{$kendo-scheduler-event-hover-text} ),
+                var( --kendo-scheduler-event-hover-bg, #{$kendo-scheduler-event-hover-bg} ),
+                var( --kendo-scheduler-event-hover-border, #{$kendo-scheduler-event-hover-border} ),
+                var( --kendo-scheduler-event-hover-gradient, #{$kendo-scheduler-event-hover-gradient} )
+            );
+            @include box-shadow( var( --kendo-scheduler-event-hover-shadow, #{$kendo-scheduler-event-hover-shadow} ) );
+        }
+
+        &.k-selected {
+            @include fill(
+                var( --kendo-scheduler-event-selected-text, #{$kendo-scheduler-event-selected-text} ),
+                var( --kendo-scheduler-event-selected-bg, #{$kendo-scheduler-event-selected-bg} ),
+                var( --kendo-scheduler-event-selected-border, #{$kendo-scheduler-event-selected-border} ),
+                var( --kendo-scheduler-event-selected-gradient, #{$kendo-scheduler-event-selected-gradient} )
+            );
+            @include box-shadow( var( --kendo-scheduler-event-selected-shadow, #{$kendo-scheduler-event-selected-shadow} ) );
+        }
+    }
+
+   // .k-event-inverse {
+   //     color: contrast-wcag( $kendo-scheduler-event-text );
+   // }
+
+    .k-event-ongoing {
+        @include box-shadow( var( --kendo-scheduler-event-ongoing-shadow, #{$kendo-scheduler-event-ongoing-shadow} ) );
+    }
+
+
+    // Drag hint
+    .k-event-drag-hint {}
+
+
+    // Resizing
+    .k-scheduler-marquee {}
+    .k-scheduler-marquee::before,
+    .k-scheduler-marquee::after {
+        border-color: var( --kendo-scheduler-marquee-color, #{$kendo-scheduler-marquee-color} );
+    }
+
+    // Edit dialog
+    .k-scheduler-edit-dialog {
+        .k-dialog-buttongroup {
+            border-color: var( --kendo-scheduler-border, #{$kendo-scheduler-border} );
+        }
+    }
+
+    // Day view
+    .k-scheduler-dayview {}
+
+
+    // Workweek view
+    // sass-lint:disable class-name-format
+    .k-scheduler-workWeekview {}
+    // sass-lint:enable class-name-format
+
+
+    // Week view
+    .k-scheduler-weekview {}
+
+
+    // Month view
+    .k-scheduler-monthview {}
+
+
+    // Agenda view
+    .k-scheduler-agendaview {
+
+        // Hover
+        .k-scheduler-content tr:hover,
+        .k-scheduler-content tr.k-hover,
+        .k-scheduler-content .k-scheduler-row:hover,
+        .k-scheduler-content .k-scheduler-row.k-hover {
+            @include fill(
+                var( --kendo-hover-text, #{$kendo-hover-text} ),
+                var( --kendo-hover-bg, #{$kendo-hover-bg} ),
+                var( --kendo-hover-border, #{$kendo-hover-border} )
+            );
+        }
+
+        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
+            @include fill(
+                var( --kendo-scheduler-text, #{$kendo-scheduler-text} ),
+                var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} ),
+                var( --kendo-scheduler-border, #{$kendo-scheduler-border} )
+            );
+        }
+
+        // Selected
+        .k-scheduler-content tr.k-selected {
+            background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+        }
+
+        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
+            background-color: var( --kendo-scheduler-bg, #{$kendo-scheduler-bg} );
+        }
+    }
+
+
+    // Timeline view
+    .k-scheduler-timelineview {}
+
+
+    // Year view
+    .k-scheduler-yearview {
+
+        .k-day-indicator {
+            @include fill( $bg: var( --kendo-scheduler-yearview-indicator-bg, #{$kendo-scheduler-yearview-indicator-bg} ) );
+        }
+
+        .k-selected .k-day-indicator {
+            @include fill( $bg: var( --kendo-scheduler-yearview-indicator-selected-bg, #{$kendo-scheduler-yearview-indicator-selected-bg} ) );
+        }
+    }
+
+    .k-tooltip.k-scheduler-tooltip {
+        @include fill(
+            var( --kendo-scheduler-tooltip-text, #{$kendo-scheduler-tooltip-text} ),
+            var( --kendo-scheduler-tooltip-bg, #{$kendo-scheduler-tooltip-bg} ),
+            var( --kendo-scheduler-tooltip-border, #{$kendo-scheduler-tooltip-border} )
+        );
+        @include box-shadow( var( --kendo-scheduler-tooltip-shadow, #{$kendo-scheduler-tooltip-shadow} ) );
+
+        .k-callout {
+            @include fill( $color: var( --kendo-scheduler-tooltip-callout-color, #{$kendo-scheduler-tooltip-callout-color} ) );
+        }
+
+        .k-tooltip-title .k-day {
+            color: get-theme-color-var( primary-190 );
+        }
+    }
+}
diff --git a/packages/fluent/scss/scheduler/_variables.scss b/packages/fluent/scss/scheduler/_variables.scss
new file mode 100644
index 00000000000..2e3e08ff1a3
--- /dev/null
+++ b/packages/fluent/scss/scheduler/_variables.scss
@@ -0,0 +1,260 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../calendar/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
+/// Width of the border around the scheduler.
+/// @group scheduler
+$kendo-scheduler-border-width: 1px !default;
+/// Font family of the scheduler.
+/// @group scheduler
+$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the scheduler.
+/// @group scheduler
+$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the scheduler.
+/// @group scheduler
+$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the scheduler.
+/// @group scheduler
+$kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
+
+/// Background color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+/// Text color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+/// Border color of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+/// Gradient of the scheduler toolbar.
+/// @group scheduler
+$kendo-scheduler-toolbar-gradient: null !default; // $kendo-toolbar-gradient
+
+/// Background color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;
+/// Text color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-text: var( --kendo-toolbar-text, $kendo-toolbar-text ) !default;
+/// Border color of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-border: var( --kendo-toolbar-border, $kendo-toolbar-border ) !default;
+/// Gradient of the scheduler footer.
+/// @group scheduler
+$kendo-scheduler-footer-gradient: null !default; // $kendo-toolbar-gradient
+
+/// Border radius of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Line height of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-line-height: $kendo-scheduler-line-height !default;
+/// Horizontal padding of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-padding-y: map-get( $kendo-spacing, thin ) !default;
+/// Minumum height of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-min-height: calc( $kendo-scheduler-line-height + 2 * $kendo-scheduler-event-padding-y ) !default;
+
+/// Background color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-bg: get-theme-color-var( primary-130 ) !default;
+/// Text color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-text: $white !default;
+/// Border color of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
+/// Gradient of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-gradient: null !default;
+/// Shadow of the scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-shadow: null !default;
+
+/// Background color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Text color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-text: var( --kendo-hover-text, inherit ) !default;
+/// Boeswe color of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-border: var( --kendo-hover-border, inherit ) !default;
+/// Gradient of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-gradient: null !default;
+/// Shadow of the hovered scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-hover-shadow: null !default;
+
+/// Background color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-bg: $kendo-scheduler-event-bg !default;
+/// Text color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-text: $kendo-scheduler-event-text !default;
+/// Border color of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-border: $kendo-scheduler-event-bg !default;
+/// Gradient of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-gradient: null !default;
+/// Shadow of the selected scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12 ) !default;
+
+/// Shadow of the ongoing scheduler event.
+/// @group scheduler
+$kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
+/// Horizontal padding of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Height of the scheduler cell.
+/// @group scheduler
+$kendo-scheduler-cell-height: $kendo-line-height-em !default;
+/// Width of the scheduler date column.
+/// @group scheduler
+$kendo-scheduler-datecolumn-width: 12em !default;
+/// Width of the scheduler time column.
+/// @group scheduler
+$kendo-scheduler-timecolumn-width: 11em !default;
+
+/// Color of the current time marker in the scheduler.
+/// @group scheduler
+$kendo-scheduler-current-time-color: #ff0000 !default;
+
+/// Background color of the non-working hours in the scheduler.
+/// @group scheduler
+$kendo-scheduler-nonwork-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the non-working hours in the scheduler.
+/// @group scheduler
+$kendo-scheduler-nonwork-text: null !default;
+
+/// Background color of the weekends in the scheduler.
+/// @group scheduler
+$kendo-scheduler-weekend-bg: null !default;
+/// Text color of the weekends in the scheduler.
+/// @group scheduler
+$kendo-scheduler-weekend-text: null !default;
+
+/// Background color of the other months in the scheduler.
+/// @group scheduler
+$kendo-scheduler-othermonth-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the other months in the scheduler.
+/// @group scheduler
+$kendo-scheduler-othermonth-text: null !default;
+
+/// Horizontal padding of the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
+
+/// Spacing between the calendars in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-calendar-gap: map-get( $kendo-spacing, 3 ) !default;
+
+/// Days with events indicator size in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-size: 3px !default;
+/// Top position of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) !default;
+/// Left position of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) !default;
+/// Border radius of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// Background color of the days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-bg: get-theme-color-var( primary-130 ) !default;
+/// Background color of the selected days with events indicator in the scheduler year view.
+/// @group scheduler
+$kendo-scheduler-yearview-indicator-selected-bg: $white !default;
+
+/// Horizontal padding of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
+/// Width of the border of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-border-width: 0 !default;
+/// Background color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-bg: $white !default;
+/// Text color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-text: get-theme-color-var( neutral-130 ) !default;
+/// Border color of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-border: null !default;
+/// Shadow of the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2 ) !default;
+
+/// Vertical spacing of the scheduler tooltip title.
+/// @group scheduler
+$kendo-scheduler-tooltip-title-margin-y: map-get( $kendo-spacing, 3 ) !default;
+/// Font size of the month inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Font size of the day inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-font-size * 2 ) !default;
+
+/// Max height of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-events-max-height: 250px !default;
+/// Spacing between the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-events-gap: map-get( $kendo-spacing, 2 ) !default;
+
+/// Horizontal padding of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-event-padding-x !default;
+/// Vertical padding of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-event-padding-y !default;
+/// Border radius of the events inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-event-border-radius !default;
+/// Spacing between the events items inside the scheduler tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-event-gap:  map-get( $kendo-spacing, thin ) !default;
+
+/// Color of the scheduler tooltip callout.
+/// @group scheduler
+$kendo-scheduler-tooltip-callout-color: $kendo-scheduler-tooltip-bg !default;
+
+/// Width of the scheduler resize handle.
+/// @group scheduler
+$kendo-scheduler-resize-handle-width: 2em !default;
+
+/// Height of the scheduler more events button.
+/// @group scheduler
+$kendo-scheduler-more-btn-height: 13px !default;
+
+/// Color of the scheduler marquee.
+/// @group scheduler
+$kendo-scheduler-marquee-color: get-theme-color-var( primary-130 );
diff --git a/packages/fluent/scss/scheduler/index.scss b/packages/fluent/scss/scheduler/index.scss
new file mode 100644
index 00000000000..c82a3b7fd33
--- /dev/null
+++ b/packages/fluent/scss/scheduler/index.scss
@@ -0,0 +1,34 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "scheduler",
+    dependencies: (
+        "icon",
+        "forms",
+        "adaptive",
+        "button",
+        "datetimepicker",
+        "dropdownlist",
+        "dialog",
+        "tooltip",
+        "calendar",
+        "toolbar"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "scheduler" ) {
+        @include kendo-scheduler--layout();
+        @include kendo-scheduler--theme();
+    }
+}