Add style support for working weekend calendar event

* Add border-radius style when the date is a non-working-day and selected * Adding style support for working weekend calendar event
orangehrm · Oct 11, 2023 · c0b4026 · c0b4026
1 parent 1e622c9
commit c0b4026
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+2023-10-11 - a06c8f9059ceb16ba00c4bf8bf0528ea2c9cee22 - Adding style support for working weekend calendar event
+
 2023-09-04 - d72a759e6904d11d222b62a792aa8c5f622238cf - Update ListTable.vue component to show partial loading status.
 
 2023-07-18 - c9c95369854606181469c76d7d621008af6946b3 - Update CardTable/Cell/ProfilePicture.vue ProfilePic.vue to support skeleton loading images.

diff --git a/components/src/core/components/Calendar/_variables.scss b/components/src/core/components/Calendar/_variables.scss
@@ -47,6 +47,10 @@ $oxd-calendar-date-highlight-half-background-color: #c9ffeb !default;
 $oxd-calendar-date-highlight-half-font-color: #23b478 !default;
 $oxd-calendar-date-highlight-half-font-weight: 600 !default;
 
+$oxd-calendar-date-working-weekend-background-color: #dfe7ff !default;
+$oxd-calendar-date-working-weekend-font-color: #1b6ea8 !default;
+$oxd-calendar-date-working-weekend-font-weight: 600 !default;
+
 $oxd-calendar-date-weekend-background-color: $oxd-background-light-gray-color !default;
 $oxd-calendar-date-weekend-font-color: $oxd-interface-gray-color !default;
 $oxd-calendar-date-weekend-font-weight: 600 !default;

diff --git a/components/src/core/components/Calendar/calendar.scss b/components/src/core/components/Calendar/calendar.scss
@@ -72,18 +72,6 @@
       font-weight: $oxd-calendar-date-today-font-weight;
     }
 
-    &.--working-day-half {
-      background-color: $oxd-calendar-date-half-background-color;
-      color: $oxd-calendar-date-half-font-color;
-      font-weight: $oxd-calendar-date-half-font-weight;
-      border-radius: 0;
-    }
-    &.--non-working-day {
-      background-color: $oxd-calendar-date-weekend-background-color;
-      color: $oxd-calendar-date-weekend-font-color;
-      font-weight: $oxd-calendar-date-weekend-font-weight;
-      border-radius: 0;
-    }
     &.--holiday-half {
       background-color: $oxd-calendar-date-holiday-half-background-color;
       color: $oxd-calendar-date-holiday-half-font-color;
@@ -104,6 +92,11 @@
       color: $oxd-calendar-date-highlight-full-font-color;
       font-weight: $oxd-calendar-date-highlight-full-font-weight;
     }
+    &.--working-weekend {
+      background-color: $oxd-calendar-date-working-weekend-background-color;
+      color: $oxd-calendar-date-working-weekend-font-color;
+      font-weight: $oxd-calendar-date-working-weekend-font-weight;
+    }
     &:hover,
     &:focus-visible {
       background-color: $oxd-calendar-date-hover-background-color;

diff --git a/storybook/stories/core/components/Calendar/Calendar.stories.js b/storybook/stories/core/components/Calendar/Calendar.stories.js
@@ -67,7 +67,13 @@ Default.args = {
     },
   ],
   events: datesOfMonth().map(date => {
-    if (date.getDate() % 2 === 0) {
+    if (date.getDay() % 6 === 0) {
+      return {
+        date,
+        type: 'weekend',
+        class: Math.random() > 0.5 ? '--working-weekend' : '',
+      };
+    } else if (date.getDate() % 2 === 0) {
       return {
         date,
         type: 'holiday',