added start day of week settings

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.23
+
+### Added
+
+- settings to adjust week start day for calendar (#45)
+
 ## Version 0.1.22
 
 ### Added

app/settings/page.tsx

@@ -6,7 +6,7 @@ import { Label } from '@/components/ui/label'
 import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR'
 import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
-import { Settings } from '@/lib/types'
+import { Settings, WeekDay } from '@/lib/types'
 import { saveSettings, uploadAvatar } from '../actions/data'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
@@ -94,7 +94,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, timezone: e.target.value }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
                 >
                   {Intl.supportedValuesOf('timeZone').map((tz) => (
                     <option key={tz} value={tz}>
@@ -105,6 +105,41 @@ export default function SettingsPage() {
                 <DynamicTimeNoSSR />
               </div>
             </div>
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="timezone">Week Start Day</Label>
+                <div className="text-sm text-muted-foreground">
+                  Select your preferred first day of the week
+                </div>
+              </div>
+              <div className="flex flex-col items-end gap-2">
+                <select
+                  id="weekStartDay"
+                  value={settings.system.weekStartDay}
+                  onChange={(e) =>
+                    updateSettings({
+                      ...settings,
+                      system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
+                    })
+                  }
+                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                >
+                  {([
+                    ['sunday', 0],
+                    ['monday', 1],
+                    ['tuesday', 2],
+                    ['wednesday', 3],
+                    ['thursday', 4],
+                    ['friday', 5],
+                    ['saturday', 6]
+                  ] as Array<[string, WeekDay]>).map(([dayName, dayNumber]) => (
+                    <option key={dayNumber} value={dayNumber}>
+                      {dayName.charAt(0).toUpperCase() + dayName.slice(1)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
           </CardContent>
         </Card>
         <Card className="mb-6">
@@ -161,7 +196,7 @@ export default function SettingsPage() {
             </div>
           </CardContent>
         </Card>
-      </div>
+      </div >
     </>
   )
 }

components/HabitCalendar.tsx

@@ -51,6 +51,7 @@ export default function HabitCalendar() {
               mode="single"
               selected={selectedDate.toJSDate()}
               onSelect={(e) => e && setSelectedDate(DateTime.fromJSDate(e))}
+              weekStartsOn={settings.system.weekStartDay}
               className="rounded-md border"
               modifiers={{
                 completed: (date) => completedDates.has(

lib/types.ts

@@ -64,7 +64,8 @@ export const getDefaultSettings = (): Settings => ({
     useGrouping: true,
   },
   system: {
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    weekStartDay: 1 // Monday
   },
   profile: {}
 });
@@ -85,8 +86,11 @@ export interface UISettings {
   useGrouping: boolean;
 }
 
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0 = Sunday, 6 = Saturday
+
 export interface SystemSettings {
   timezone: string;
+  weekStartDay: WeekDay;
 }
 
 export interface ProfileSettings {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",