Merge pull request #11064 from randi2kewl/todo-calendar-highlight-today

Added a highlight on today's date in To-Dos cal

website/client/assets/scss/datepicker.scss

@@ -0,0 +1,26 @@
+.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 {
+        color: $white;
+        background: $purple-300;
+    }
+
+    .cell.highlighted {
+        background: rgba($purple-400, 0.24);
+        color: $purple-200;
+    }
+
+    .cell.highlighted,
+    .cell.selected {
+        border-radius: 2px;
+        font-weight: bold;
+    }
+
+}

website/client/assets/scss/index.scss

@@ -37,3 +37,4 @@
 @import './iconalert';
 @import './tiers';
 @import './payments';
+@import './datepicker.scss';

website/client/components/tasks/taskModal.vue

@@ -88,7 +88,8 @@
               :clearButtonText='$t("clear")',
               :todayButton='!challengeAccessRequired',
               :todayButtonText='$t("today")',
-              :disabled-picker='challengeAccessRequired'
+              :disabled-picker='challengeAccessRequired',
+              :highlighted='calendarHighlights'
             )
         .option(v-if="task.type === 'daily'")
           .form-group
@@ -99,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
@@ -721,6 +723,7 @@ export default {
         con: 'constitution',
         per: 'perception',
       },
+      calendarHighlights: { dates: [new Date()]},
     };
   },
   mounted () {