Changes color scheme for datepicker fixes #11064

website/client/assets/scss/datepicker.scss

@@ -0,0 +1,28 @@
+
+@import '~client/assets/scss/colors.scss';
+
+.vdp-datepicker .vdp-datepicker__calendar  {
+
+    .cell:not(.blank):not(.disabled).day:hover {
+        border-radius: 2px;
+        border: 1px solid $purple-400;
+    }
+    
+    .cell.selected, 
+    .cell.selected.highlighted, 
+    .cell.selected:hover {
+        border-radius: 2px;
+        color: $white;
+        background: $purple-400;
+    }
+
+    .cell.highlighted {
+        background: rgba($purple-400, 0.24);
+    }
+
+    .cell.highlighted,
+    .cell.selected {
+        font-weight: bold;
+    }
+
+}

website/client/components/tasks/taskModal.vue

@@ -100,7 +100,8 @@
               :clearButton="false",
               :todayButton="!challengeAccessRequired",
               :todayButtonText="$t('today')",
-              :disabled-picker="challengeAccessRequired"
+              :disabled-picker="challengeAccessRequired",
+              :highlighted='calendarHighlights'
             )
         .option(v-if="task.type === 'daily'")
           .form-group
@@ -250,6 +251,7 @@
 
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/datepicker.scss';
 
   #task-modal {
     .modal-dialog.modal-sm {