diff --git a/themes/hugo-theme-flat/static/css/style.css b/themes/hugo-theme-flat/static/css/style.css
index 814248d..2d170ad 100644
--- a/themes/hugo-theme-flat/static/css/style.css
+++ b/themes/hugo-theme-flat/static/css/style.css
@@ -228,6 +228,10 @@ a.external:after {
   cursor: pointer; 
 }
 
+#calendar .today{
+  color: var(--color-dark-fg-font-hyper-hover);
+}
+
 /********** set up break point **********/
 
 .main-wrapper,
diff --git a/themes/hugo-theme-flat/static/js/calendar.js b/themes/hugo-theme-flat/static/js/calendar.js
index 3edc9e8..74eac7e 100644
--- a/themes/hugo-theme-flat/static/js/calendar.js
+++ b/themes/hugo-theme-flat/static/js/calendar.js
@@ -24,7 +24,16 @@ const calRefresh=function () {
         let li = $("<li/>");
         //li.text(item.summary)
         let startDate = new Date(item.start * 1000);
-        let date = $("<span class='date row'/>");
+
+        //check if the date is within today, not tomorrow, not yesterday
+        let today = new Date();
+        let todayString = today.getFullYear() + "-" + zeropad(today.getMonth() + 1) + "-" + zeropad(today.getDate());
+        let startDateString = startDate.getFullYear() + "-" + zeropad(startDate.getMonth() + 1) + "-" + zeropad(startDate.getDate());
+        let todayClass=""
+        if (todayString === startDateString) todayClass=" today";
+
+
+        let date = $("<span class='date row"+todayClass+"'/>");
         date.text(
             zeropad(startDate.getDate()) +
             "." +