Update

Update year view to look nicer and highlight today in year view like the other calendar views.

samples/react-calendar/src/webparts/calendar/components/Year.module.scss

@@ -4,19 +4,17 @@
   display: flex;
   flex-wrap: wrap;
   overflow-y: auto;
-}
 
-.month {
+  .month {
     margin: 5px 10px 15px 10px;
-}
 
-.monthName {
-  color: $ms-color-themeDark;
+    .monthName {
+      color: $ms-color-themePrimary;
       font-weight: bold;
       margin-bottom: 10px;
-}
+    }
 
-.day {
+    .day {
       display: inline-block;
       width: 30px;
       height: 30px;
@@ -25,29 +23,33 @@
       border: dotted 1px;
       border-radius: 50%;
       transform: scale(0.9, 0.9);
-}
+    }
 
-.date {
+    .date {
       width: 30px;
       height: 30px;
-  background: white;
       border-radius: 50px;
       border: none;
       outline: none;
-}
 
-.date.inMonth:hover {
+      &.inMonth {
+        &:hover {
           cursor: pointer;
-  background: $ms-color-themeDark;
+          background: $ms-color-themePrimary;
           color: white;
           font-weight: bold;
-}
+        }
+      }
 
-.today {
-  background: $ms-color-themeDark;
-}
+      &.today {
+        background: $ms-color-themePrimary;
+        color: white;
+      }
 
-.date.prevMonth,
-.date.nextMonth {
+      .date.prevMonth,
+      .date.nextMonth {
         color: grey;
+      }
+    }
+  }
 }