@syncfusion/ej2-schedule 33.2.3 → 34.1.29

package/styles/schedule/material3.scss

@@ -1,18 +1,4 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@use 'ej2-navigations/styles/toolbar/material3-definition' as *;
-@use 'ej2-navigations/styles/treeview/material3-definition' as *;
-@use 'ej2-inputs/styles/input/material3-definition' as *;
-@use 'ej2-inputs/styles/numerictextbox/material3-definition' as *;
-@use 'ej2-calendars/styles/calendar/material3-definition' as *;
-@use 'ej2-calendars/styles/datepicker/material3-definition' as *;
-@use 'ej2-calendars/styles/datetimepicker/material3-definition' as *;
-@use 'ej2-dropdowns/styles/drop-down-list/material3-definition' as *;
-@use 'ej2-dropdowns/styles/multi-select/material3-definition' as *;
-@use 'ej2-buttons/styles/button/material3-definition' as *;
-@use 'ej2-buttons/styles/check-box/material3-definition' as *;
-@use '../recurrence-editor/material3-definition' as *;
-@use 'ej2-navigations/styles/sidebar/material3-definition' as *;
 @use 'material3-definition' as *;
 @use 'icons/material3' as *;
-@use 'all.material3' as *;
-@use 'bigger.material3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/schedule/tailwind-dark.css

@@ -1,104 +1,3 @@
-/*! TreeView's tailwind theme wise override definitions and variables */
-/* stylelint-disable */
-/* stylelint-disable property-no-vendor-prefix */
-/*! calendar tailwind theme variables */
-.e-ddl.e-control-wrapper .e-ddl-icon::before {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  color: #fff;
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
-.e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-input-group:not(.e-disabled) .e-back-icon:hover,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
-  background: transparent;
-}
-
-.e-input-group .e-ddl-icon:not(:active)::after {
-  -webkit-animation: none;
-          animation: none;
-}
-
-.e-ddl.e-popup {
-  border: 0;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  margin-top: 4px;
-}
-
-.e-small .e-ddl.e-popup,
-.e-small.e-ddl.e-popup {
-  border-radius: 2px;
-  margin-top: 2px;
-}
-
-.e-popup.e-ddl .e-dropdownbase {
-  min-height: 26px;
-  padding: 4px 0;
-}
-
-.e-input-group.e-ddl,
-.e-input-group.e-ddl .e-input,
-.e-input-group.e-ddl .e-ddl-icon {
-  background: #1f2937;
-}
-
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
-  border-bottom-width: 0;
-}
-
-.e-ddl.e-popup.e-outline .e-filter-parent {
-  padding: 4px 8px;
-}
-
-.e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
-  line-height: 30px;
-  top: 0;
-}
-
-.e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
-  border-left-width: 0;
-  border-radius: 4px 0 0 4px;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  height: 32px;
-  width: 32px;
-}
-
-.e-multi-select-wrapper .e-searcher input[type=text],
-.e-multi-select-wrapper .e-multi-searcher input[type=text] {
-  color: #fff;
-  height: 100%;
-}
-
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e765";
 }
@@ -1107,6 +1006,49 @@
 .e-schedule .e-vertical-view .e-day-wrapper .e-appointment:not(.e-schedule-event-clone) {
   cursor: default;
 }
+.e-schedule .e-vertical-view .e-day-wrapper .e-event-indicator-badge {
+  height: 18px;
+  width: 20%;
+  position: absolute;
+  border-radius: 3px;
+  top: 0;
+  background: rgb(228, 230, 232);
+  color: rgb(31, 29, 29);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border: 1px solid rgb(202, 197, 197);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  white-space: normal;
+  word-break: break-all;
+  text-align: center;
+}
+.e-schedule .e-vertical-view .e-day-wrapper .e-event-indicator-badge.e-hidden {
+  display: none;
+}
+.e-schedule .e-vertical-view .e-event-indicator-badge:focus {
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-schedule .e-vertical-view .e-event-indicator-badge:hover {
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-schedule .e-vertical-view {
+  /* Responsive styles for event indicator badge */
+}
+@media screen and (max-width: 400px) {
+  .e-schedule .e-vertical-view .e-event-indicator-badge {
+    width: 25%;
+  }
+}
 .e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
   background: #22d3ee;
   border: 1px solid #4b5563;

package/styles/schedule/tailwind-dark.scss

@@ -1,18 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@use 'ej2-navigations/styles/toolbar/tailwind-dark-definition' as *;
-@use 'ej2-navigations/styles/treeview/tailwind-dark-definition' as *;
-@use 'ej2-inputs/styles/input/tailwind-dark-definition' as *;
-@use 'ej2-inputs/styles/numerictextbox/tailwind-dark-definition' as *;
-@use 'ej2-calendars/styles/calendar/tailwind-dark-definition' as *;
-@use 'ej2-calendars/styles/datepicker/tailwind-dark-definition' as *;
-@use 'ej2-calendars/styles/datetimepicker/tailwind-dark-definition' as *;
-@use 'ej2-dropdowns/styles/drop-down-list/tailwind-dark-definition' as *;
-@use 'ej2-dropdowns/styles/multi-select/tailwind-dark-definition' as *;
-@use 'ej2-buttons/styles/button/tailwind-dark-definition' as *;
-@use 'ej2-buttons/styles/check-box/tailwind-dark-definition' as *;
-@use '../recurrence-editor/tailwind-dark-definition' as *;
-@use 'ej2-navigations/styles/sidebar/tailwind-dark-definition' as *;
 @use 'tailwind-dark-definition' as *;
 @use 'icons/tailwind-dark' as *;
-@use 'all.tailwind-dark' as *;
-@use 'bigger.tailwind-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/schedule/tailwind.css

@@ -1,104 +1,3 @@
-/*! TreeView's tailwind theme wise override definitions and variables */
-/* stylelint-disable */
-/* stylelint-disable property-no-vendor-prefix */
-/*! calendar tailwind theme variables */
-.e-ddl.e-control-wrapper .e-ddl-icon::before {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  color: #111827;
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
-.e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-input-group:not(.e-disabled) .e-back-icon:hover,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
-  background: transparent;
-}
-
-.e-input-group .e-ddl-icon:not(:active)::after {
-  -webkit-animation: none;
-          animation: none;
-}
-
-.e-ddl.e-popup {
-  border: 0;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  margin-top: 4px;
-}
-
-.e-small .e-ddl.e-popup,
-.e-small.e-ddl.e-popup {
-  border-radius: 2px;
-  margin-top: 2px;
-}
-
-.e-popup.e-ddl .e-dropdownbase {
-  min-height: 26px;
-  padding: 4px 0;
-}
-
-.e-input-group.e-ddl,
-.e-input-group.e-ddl .e-input,
-.e-input-group.e-ddl .e-ddl-icon {
-  background: #fff;
-}
-
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
-  border-bottom-width: 0;
-}
-
-.e-ddl.e-popup.e-outline .e-filter-parent {
-  padding: 4px 8px;
-}
-
-.e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
-  line-height: 30px;
-  top: 0;
-}
-
-.e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
-  border-left-width: 0;
-  border-radius: 4px 0 0 4px;
-  border-right-width: 0;
-}
-
-.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  height: 32px;
-  width: 32px;
-}
-
-.e-multi-select-wrapper .e-searcher input[type=text],
-.e-multi-select-wrapper .e-multi-searcher input[type=text] {
-  color: #111827;
-  height: 100%;
-}
-
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e765";
 }
@@ -1107,6 +1006,49 @@
 .e-schedule .e-vertical-view .e-day-wrapper .e-appointment:not(.e-schedule-event-clone) {
   cursor: default;
 }
+.e-schedule .e-vertical-view .e-day-wrapper .e-event-indicator-badge {
+  height: 18px;
+  width: 20%;
+  position: absolute;
+  border-radius: 3px;
+  top: 0;
+  background: rgb(228, 230, 232);
+  color: rgb(31, 29, 29);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border: 1px solid rgb(202, 197, 197);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  white-space: normal;
+  word-break: break-all;
+  text-align: center;
+}
+.e-schedule .e-vertical-view .e-day-wrapper .e-event-indicator-badge.e-hidden {
+  display: none;
+}
+.e-schedule .e-vertical-view .e-event-indicator-badge:focus {
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-schedule .e-vertical-view .e-event-indicator-badge:hover {
+  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-schedule .e-vertical-view {
+  /* Responsive styles for event indicator badge */
+}
+@media screen and (max-width: 400px) {
+  .e-schedule .e-vertical-view .e-event-indicator-badge {
+    width: 25%;
+  }
+}
 .e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
   background: #4f46e5;
   border: 1px solid #e5e7eb;

package/styles/schedule/tailwind.scss

@@ -1,18 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@use 'ej2-navigations/styles/toolbar/tailwind-definition' as *;
-@use 'ej2-navigations/styles/treeview/tailwind-definition' as *;
-@use 'ej2-inputs/styles/input/tailwind-definition' as *;
-@use 'ej2-inputs/styles/numerictextbox/tailwind-definition' as *;
-@use 'ej2-calendars/styles/calendar/tailwind-definition' as *;
-@use 'ej2-calendars/styles/datepicker/tailwind-definition' as *;
-@use 'ej2-calendars/styles/datetimepicker/tailwind-definition' as *;
-@use 'ej2-dropdowns/styles/drop-down-list/tailwind-definition' as *;
-@use 'ej2-dropdowns/styles/multi-select/tailwind-definition' as *;
-@use 'ej2-buttons/styles/button/tailwind-definition' as *;
-@use 'ej2-buttons/styles/check-box/tailwind-definition' as *;
-@use '../recurrence-editor/tailwind-definition' as *;
-@use 'ej2-navigations/styles/sidebar/tailwind-definition' as *;
 @use 'tailwind-definition' as *;
 @use 'icons/tailwind' as *;
-@use 'all.tailwind' as *;
-@use 'bigger.tailwind' as *;
+@use 'all' as *;
+@use 'bigger' as *;