feat(calendar): add configurable first day of week for calendar widget

EndyKaufman · EndyKaufman · commit 67cfff1fc306 · 2025-12-15T15:57:10.000+05:00
- Introduce CALENDAR_WIDGET_WEEKDAY_ABBREVIATIONS constant for weekday labels
- Implement generateWeekdayHeaders() to create dynamic weekday headers
- Update calendar modal template to render weekday headers based on configured first day
- Fix showCalendarModal call to pass correct first day of week index
- Enhance renderCalendarDays function to calculate day offset by first day setting
- Modify calendar grid alignment to reflect user-selected week start day
- Highlight weekend days in red regardless of the first day configuration
- Test with multiple first day settings (Sunday, Monday, Saturday) confirming correct display
- Prepare calendar widget for internationalization and future localization support
diff --git a/CALENDAR_WEEKDAY_IMPLEMENTATION.md b/CALENDAR_WEEKDAY_IMPLEMENTATION.md
@@ -0,0 +1,59 @@
+# Calendar Widget First Day of Week Implementation Summary
+
+## Overview
+This document summarizes the implementation of configurable first day of the week for the calendar widget. Users can now configure the calendar to start the week on any day (Sunday, Monday, Tuesday, etc.) and the calendar will properly display weekday headers and align the days accordingly.
+
+## Changes Made
+
+### 1. Calendar Widget (`calendar-widget.ts`)
+
+#### New Constants:
+- `CALENDAR_WIDGET_WEEKDAY_ABBREVIATIONS`: Maps weekday names to their abbreviations (Su, Mo, Tu, etc.)
+
+#### New Function:
+- `generateWeekdayHeaders(firstDayOfWeek: string)`: Generates HTML for weekday headers based on the selected first day of the week
+
+#### Modified Logic:
+- Updated the calendar modal template to dynamically generate weekday headers using the new function
+- Fixed the `showCalendarModal` call to use the correct first day of week index
+
+### 2. Calendar Widget Utilities (`calendar-widget.utils.ts`)
+
+#### Improved Logic:
+- Fixed the `renderCalendarDays` function to properly calculate the starting day offset based on the first day of week setting
+- The calculation now correctly handles cases where the first day of the week is different from Sunday
+
+## How It Works
+
+### Weekday Headers Generation:
+1. The system determines the first day of the week from widget options
+2. It creates an ordered array of weekdays starting from the selected first day
+3. It generates HTML div elements for each weekday abbreviation
+4. Weekend days (Saturday and Sunday) are styled with red text
+
+### Calendar Grid Alignment:
+1. The system calculates the offset for the first day of the month based on the selected first day of the week
+2. It adds empty cells to properly align the calendar grid
+3. The days are then filled in sequence
+
+## Test Results
+
+The implementation was tested with three configurations:
+1. **Sunday as first day**: Su Mo Tu We Th Fr Sa
+2. **Monday as first day**: Mo Tu We Th Fr Sa Su
+3. **Saturday as first day**: Sa Su Mo Tu We Th Fr
+
+All configurations correctly display the weekday headers and align the calendar grid properly.
+
+## Benefits
+
+1. **User Configurability**: Users can choose their preferred starting day of the week
+2. **Proper Visualization**: Weekend days are highlighted in red regardless of the starting day
+3. **Correct Alignment**: Calendar grid correctly aligns with the selected starting day
+4. **Internationalization Ready**: The implementation can easily support different weekday preferences from various cultures
+
+## Future Improvements
+
+1. Add localization support for weekday abbreviations
+2. Implement additional styling options for different weekend days in various cultures
+3. Add validation for the first day of week setting
diff --git a/web/src/server/widgets/calendar-widget.ts b/web/src/server/widgets/calendar-widget.ts
@@ -40,6 +40,17 @@ export const CALENDAR_WIDGET_WEEKDAY_INDEXES: Record<string, number> = {
   [CalendarWidgetWeekday.saturday]: 6,
 };
 
+// Weekday abbreviations for display in calendar header
+export const CALENDAR_WIDGET_WEEKDAY_ABBREVIATIONS: Record<string, string> = {
+  [CalendarWidgetWeekday.sunday]: 'Su',
+  [CalendarWidgetWeekday.monday]: 'Mo',
+  [CalendarWidgetWeekday.tuesday]: 'Tu',
+  [CalendarWidgetWeekday.wednesday]: 'We',
+  [CalendarWidgetWeekday.thursday]: 'Th',
+  [CalendarWidgetWeekday.friday]: 'Fr',
+  [CalendarWidgetWeekday.saturday]: 'Sa',
+};
+
 export const CalendarWidgetWeekdayKeys = Object.keys(
   CALENDAR_WIDGET_WEEKDAY_TITLE
 );
@@ -72,13 +83,13 @@ export const CALENDAR_FORMLY_FIELDS: FormlyFieldConfig[] = [
         label: CALENDAR_WIDGET_WEEKDAY_TITLE[key],
       })),
       placeholder: 'Select first day of week',
-      attributes: { 
+      attributes: {
         'aria-label': 'Select first day of week',
         class: 'flat-input',
       },
     },
   },
-];// Helper function to get monthly progress
+]; // Helper function to get monthly progress
 function getMonthlyProgress() {
   const today = new Date();
   const currentDay = today.getDate();
@@ -91,6 +102,34 @@ function getMonthlyProgress() {
   return { currentDay, lastDay, progress: progress.toFixed(1) };
 }
 
+// Function to generate weekday headers based on firstDayOfWeek
+function generateWeekdayHeaders(firstDayOfWeek: string): string {
+  const weekdays = Object.keys(CALENDAR_WIDGET_WEEKDAY_TITLE);
+  const abbreviations = CALENDAR_WIDGET_WEEKDAY_ABBREVIATIONS;
+
+  // Find the starting index based on firstDayOfWeek
+  const startIndex = CALENDAR_WIDGET_WEEKDAY_INDEXES[firstDayOfWeek];
+
+  // Create an array of weekday abbreviations starting from firstDayOfWeek
+  const orderedWeekdays = [];
+  for (let i = 0; i < 7; i++) {
+    const index = (startIndex + i) % 7;
+    orderedWeekdays.push(weekdays[index]);
+  }
+
+  // Generate the HTML for weekday headers
+  let html = '';
+  orderedWeekdays.forEach((day, index) => {
+    const isWeekend =
+      day === CalendarWidgetWeekday.saturday ||
+      day === CalendarWidgetWeekday.sunday;
+    const textColorClass = isWeekend ? 'text-red-500' : '';
+    html += `<div class="${textColorClass}">${abbreviations[day]}</div>`;
+  });
+
+  return html;
+}
+
 export class CalendarWidgetRender implements WidgetRender<CalendarWidgetType> {
   private inited = false;
   init(
@@ -127,6 +166,13 @@ export class CalendarWidgetRender implements WidgetRender<CalendarWidgetType> {
       // Generate unique IDs for this widget instance
       const modalId = `calendar-modal-${widget.id}`;
 
+      // Get the first day of week setting or default to sunday
+      const firstDayOfWeek =
+        widget.options?.firstDayOfWeek || CalendarWidgetWeekday.sunday;
+
+      // Generate weekday headers based on firstDayOfWeek
+      const weekdayHeaders = generateWeekdayHeaders(firstDayOfWeek);
+
       return `
       <div class="bg-white p-6 rounded-2xl long-shadow transition-all duration-300 relative overflow-hidden h-40 flex flex-col justify-between border-l-4 border-pastel-blue">
         <div class="flex justify-between items-start">
@@ -135,8 +181,8 @@ export class CalendarWidgetRender implements WidgetRender<CalendarWidgetType> {
             <p class="text-2xl font-extrabold text-gray-800">${dateElement}</p>
           </div>
           <button class="text-pastel-blue hover:text-pastel-blue/80 p-2 rounded-full transition-colors" style="background-color: rgba(138, 137, 240, 0.1);" 
-                  onclick="showCalendarModal('${modalId}')">
-            <i ngSkipHydration="calendar" class="w-6 h-6"></i>
+                  onclick="showCalendarModal('${modalId}', ${CALENDAR_WIDGET_WEEKDAY_INDEXES[firstDayOfWeek]})">
+            <i data-lucide="calendar" class="w-6 h-6"></i>
           </button>
         </div>
 
@@ -159,13 +205,7 @@ export class CalendarWidgetRender implements WidgetRender<CalendarWidgetType> {
           </div>
           
           <div class="grid grid-cols-7 gap-1 text-sm font-bold uppercase text-gray-500 mb-2 text-center">
-            <div>Mo</div>
-            <div>Tu</div>
-            <div>We</div>
-            <div>Th</div>
-            <div>Fr</div>
-            <div class="text-red-500">Sa</div>
-            <div class="text-red-500">Su</div>
+            ${weekdayHeaders}
           </div>
 
           <div id="${modalId}-calendar-grid" class="grid grid-cols-7 gap-1">
diff --git a/web/src/server/widgets/calendar-widget.utils.ts b/web/src/server/widgets/calendar-widget.utils.ts
@@ -75,10 +75,12 @@ function updateDateWidget(scope: Document | HTMLElement = document): void {
 /**
  * Renders calendar days in the modal
  * @param modalId - ID of the modal element
+ * @param startDayNumberOfWeek - Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)
  * @param scope - Document or element scope for DOM operations
  */
 function renderCalendarDays(
   modalId: string,
+  startDayNumberOfWeek: number,
   scope: Document | HTMLElement = document
 ): void {
   const calendarContainer = getElementById(scope, `${modalId}-calendar-grid`);
@@ -98,11 +100,18 @@ function renderCalendarDays(
   setTextContent(monthTitle, monthName);
 
   const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
-  const startDayOfWeek = (firstDayOfMonth.getDay() + 6) % 7;
+  // Adjust the starting day calculation based on the first day of week setting
+  const firstDayOfWeek = firstDayOfMonth.getDay(); // 0 = Sunday, 1 = Monday, etc.
+  // Calculate how many days to shift based on the startDayNumberOfWeek
+  let startDayOffset = firstDayOfWeek - startDayNumberOfWeek;
+  if (startDayOffset < 0) {
+    startDayOffset += 7;
+  }
+  
   const lastDay = new Date(currentYear, currentMonth + 1, 0).getDate();
 
   // Add empty cells for days before the first day of the month
-  for (let i = 0; i < startDayOfWeek; i++) {
+  for (let i = 0; i < startDayOffset; i++) {
     const emptyCell = createElement(document, 'div');
     emptyCell.className = 'text-center p-2';
     appendChild(calendarContainer, emptyCell);
@@ -117,9 +126,7 @@ function renderCalendarDays(
     setTextContent(dayCell, day.toString());
 
     if (day < currentDay) {
-      dayCell.classList.add(
-        'text-gray-800'
-      );
+      dayCell.classList.add('text-gray-800');
       dayCell.style.backgroundColor = 'rgba(138, 137, 240, 0.2)';
     } else if (day === currentDay) {
       dayCell.classList.add(
@@ -140,10 +147,12 @@ function renderCalendarDays(
 /**
  * Shows the calendar modal for a specific widget
  * @param modalId - ID of the modal element
+ * @param startDayNumberOfWeek - Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)
  * @param scope - Document or element scope for DOM operations
  */
 export function showCalendarModal(
   modalId: string,
+  startDayNumberOfWeek: number,
   scope: Document | HTMLElement = document
 ): void {
   const modal = getElementById(scope, modalId);
@@ -158,15 +167,15 @@ export function showCalendarModal(
         hideCalendarModal(modalId, scope);
       }
     };
-    
+
     // Store the event listener so we can remove it later
     (modal as any).closeModalOnBackgroundClick = closeModalOnBackgroundClick;
     modal.addEventListener('click', closeModalOnBackgroundClick);
 
-    renderCalendarDays(modalId, scope);
-if (!isSSR) {
-    createIcons({ icons });
-}
+    renderCalendarDays(modalId, startDayNumberOfWeek, scope);
+    if (!isSSR) {
+      createIcons({ icons });
+    }
   }
 }
 
@@ -183,10 +192,13 @@ export function hideCalendarModal(
   if (modal) {
     // Remove the event listener
     if ((modal as any).closeModalOnBackgroundClick) {
-      modal.removeEventListener('click', (modal as any).closeModalOnBackgroundClick);
+      modal.removeEventListener(
+        'click',
+        (modal as any).closeModalOnBackgroundClick
+      );
       delete (modal as any).closeModalOnBackgroundClick;
     }
-    
+
     modal.classList.remove('opacity-100');
     modal.classList.add('opacity-0');
     setTimeout(() => modal.classList.add('hidden'), 300);
diff --git a/web/src/server/widgets/habits-widget.ts b/web/src/server/widgets/habits-widget.ts
@@ -286,7 +286,7 @@ export class HabitsWidgetRender
           <i data-lucide="pencil" class="w-5 h-5"></i>
         </button>
         <div class="flex items-center">
-          <i ngSkipHydration="activity" class="w-8 h-8 text-pastel-green mr-3"></i>
+          <i data-lucide="activity" class="w-8 h-8 text-pastel-green mr-3"></i>
           <p class="text-lg font-medium text-gray-600">Habits</p>
         </div>
         <div id="habits-widget-content">
@@ -344,7 +344,7 @@ export class HabitsWidgetRender
     // Helper function to render widget content
     function renderWidgetContent(widgetId: string): string {
       const items = getHabitItems(widgetId);
-      
+
       if (items?.length === 0) {
         return '<p class="text-gray-500 text-sm">No habits configured</p>';
       }
@@ -358,7 +358,9 @@ export class HabitsWidgetRender
         <div class="grid grid-cols-3 gap-2 mt-2">
           ${topItems
             .map(item => {
-              const percentage = calculateProgressPercentage(item as HabitsWidgetItemType & HabitsWidgetStateType);
+              const percentage = calculateProgressPercentage(
+                item as HabitsWidgetItemType & HabitsWidgetStateType
+              );
               const progressBarColor = getProgressBarColor(percentage);
 
               return `
