Improvements to the calendar widget

js/calendar-widget.js

@@ -77,6 +77,34 @@
     });
   }
 
+  function pad2(num) {
+    return num < 10 ? '0' + num : String(num);
+  }
+
+  function syncCalendarToday(calendar) {
+    if (!calendar) return;
+
+    var todayCells = calendar.querySelectorAll('td.luxtools-calendar-day-today');
+    for (var i = 0; i < todayCells.length; i++) {
+      todayCells[i].classList.remove('luxtools-calendar-day-today');
+    }
+
+    var now = new Date();
+    var year = parseInt(calendar.getAttribute('data-current-year') || '', 10);
+    var month = parseInt(calendar.getAttribute('data-current-month') || '', 10);
+    if (!year || !month) return;
+
+    var currentYear = now.getFullYear();
+    var currentMonth = now.getMonth() + 1;
+    if (year !== currentYear || month !== currentMonth) return;
+
+    var dateIso = String(currentYear) + '-' + pad2(currentMonth) + '-' + pad2(now.getDate());
+    var todayCell = calendar.querySelector('td.luxtools-calendar-day[data-luxtools-date="' + dateIso + '"]');
+    if (todayCell) {
+      todayCell.classList.add('luxtools-calendar-day-today');
+    }
+  }
+
   function navigateCalendarMonth(calendar, direction) {
     var year = parseInt(calendar.getAttribute('data-current-year') || '', 10);
     var month = parseInt(calendar.getAttribute('data-current-month') || '', 10);
@@ -92,6 +120,7 @@
           throw new Error('Calendar markup missing in response');
         }
 
+        syncCalendarToday(replacement);
         calendar.replaceWith(replacement);
       })
       .catch(function () {
@@ -120,6 +149,11 @@
   }
 
   function initCalendarWidgets() {
+    var calendars = document.querySelectorAll('div.luxtools-calendar[data-luxtools-calendar="1"]');
+    for (var i = 0; i < calendars.length; i++) {
+      syncCalendarToday(calendars[i]);
+    }
+
     document.addEventListener('click', onCalendarClick, false);
   }
 

src/ChronologicalCalendarWidget.php

@@ -45,10 +45,6 @@ class ChronologicalCalendarWidget
         $leadingEmpty = $firstWeekday - 1;
         $totalCells = (int)ceil(($leadingEmpty + $daysInMonth) / 7) * 7;
 
-        $todayY = (int)date('Y');
-        $todayM = (int)date('m');
-        $todayD = (int)date('d');
-
         $dayUrlTemplate = function_exists('wl') ? (string)wl('__LUXTOOLS_ID_RAW__') : '';
         $monthUrlTemplate = $dayUrlTemplate;
         $yearUrlTemplate = $dayUrlTemplate;
@@ -109,11 +105,8 @@ class ChronologicalCalendarWidget
                 $dayId = ChronoID::dateToDayId($date, $baseNs);
 
                 $classes = 'luxtools-calendar-day';
-                if ($year === $todayY && $month === $todayM && $dayNumber === $todayD) {
-                    $classes .= ' luxtools-calendar-day-today';
-                }
 
-                $html .= '<td class="' . hsc($classes) . '">';
+                $html .= '<td class="' . hsc($classes) . '" data-luxtools-date="' . hsc($date) . '">';
                 if ($dayId !== null && function_exists('html_wikilink')) {
                     $html .= (string)html_wikilink($dayId, (string)$dayNumber);
                 } else {

style.css

@@ -619,6 +619,17 @@ div.luxtools-calendar td.luxtools-calendar-day a:visited {
     box-shadow: none;
 }
 
+div.luxtools-calendar td.luxtools-calendar-day span.curid > a,
+div.luxtools-calendar td.luxtools-calendar-day span.curid > a:visited,
+div.luxtools-calendar td.luxtools-calendar-day span.curid > a:hover,
+div.luxtools-calendar td.luxtools-calendar-day span.curid > a:focus,
+div.luxtools-calendar td.luxtools-calendar-day span.curid > a:active {
+    font-weight: bold;
+    text-decoration: underline;
+    border-bottom: 0;
+    box-shadow: none;
+}
+
 div.luxtools-calendar td.luxtools-calendar-day:hover {
     background-color: @ini_background_alt;
 }