replace CalendarView with CalendarMonthly and improve chore date formatting

src/views/Landing/DemoCalendar.jsx

@@ -1,6 +1,6 @@
 import { Card, Grid, Typography } from '@mui/joy'
 import moment from 'moment'
-import CalendarView from '../components/CalendarView'
+import CalendarMonthly from '../components/CalendarMonthly'
 
 const DemoCalendar = () => {
   // Generate sample chore data across different dates
@@ -13,7 +13,12 @@ const DemoCalendar = () => {
       id: 1,
       name: '🧹 Deep Clean Living Room',
       priority: 1,
-      nextDueDate: today.clone().add(2, 'days').hour(10).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(2, 'days')
+        .hour(10)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -21,7 +26,12 @@ const DemoCalendar = () => {
       id: 2,
       name: '🚗 Car Maintenance Check',
       priority: 1,
-      nextDueDate: today.clone().add(5, 'days').hour(14).minute(30).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(5, 'days')
+        .hour(14)
+        .minute(30)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -38,7 +48,12 @@ const DemoCalendar = () => {
       id: 4,
       name: '🛒 Weekly Grocery Shopping',
       priority: 2,
-      nextDueDate: today.clone().add(3, 'days').hour(16).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(3, 'days')
+        .hour(16)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -46,7 +61,12 @@ const DemoCalendar = () => {
       id: 5,
       name: '📧 Organize Email Inbox',
       priority: 2,
-      nextDueDate: today.clone().add(7, 'days').hour(11).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(7, 'days')
+        .hour(11)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -55,7 +75,12 @@ const DemoCalendar = () => {
       id: 6,
       name: '📚 Organize Bookshelf',
       priority: 3,
-      nextDueDate: today.clone().add(4, 'days').hour(15).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(4, 'days')
+        .hour(15)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -63,7 +88,12 @@ const DemoCalendar = () => {
       id: 7,
       name: '🎨 Paint Bedroom Wall',
       priority: 3,
-      nextDueDate: today.clone().add(10, 'days').hour(9).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(10, 'days')
+        .hour(9)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -89,7 +119,12 @@ const DemoCalendar = () => {
       id: 10,
       name: '🎵 Practice Guitar',
       priority: null,
-      nextDueDate: today.clone().add(6, 'days').hour(18).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(6, 'days')
+        .hour(18)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -98,7 +133,12 @@ const DemoCalendar = () => {
       id: 11,
       name: '🧺 Do Laundry',
       priority: 2,
-      nextDueDate: today.clone().add(2, 'days').hour(12).minute(0).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(2, 'days')
+        .hour(12)
+        .minute(0)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -106,7 +146,12 @@ const DemoCalendar = () => {
       id: 12,
       name: '🏃 Morning Jog',
       priority: 3,
-      nextDueDate: today.clone().add(2, 'days').hour(6).minute(30).toISOString(),
+      nextDueDate: today
+        .clone()
+        .add(2, 'days')
+        .hour(6)
+        .minute(30)
+        .toISOString(),
       assignedTo: 1,
     })
 
@@ -118,13 +163,19 @@ const DemoCalendar = () => {
   return (
     <>
       <Grid item xs={12} sm={7} data-aos-calendar-demo-section>
-        <div
+        <Card
+          sx={{
+            p: 5,
+            height: 'fit-content',
+            overflow: 'hidden',
+            boxShadow: 'lg',
+          }}
           data-aos-delay={100}
           data-aos-anchor='[data-aos-calendar-demo-section]'
           data-aos='fade-up'
         >
-          <CalendarView chores={sampleChores} />
-        </div>
+          <CalendarMonthly chores={sampleChores} />
+        </Card>
       </Grid>
       <Grid item xs={12} sm={5} data-aos-calendar-description>
         <Card
@@ -141,10 +192,11 @@ const DemoCalendar = () => {
             Visual Task Calendar
           </Typography>
           <Typography level='body-lg' textAlign='center' sx={{ mb: 4 }}>
-            Get a bird's-eye view of all your tasks with the interactive calendar. 
-            See priority-coded dots for each day, click to view detailed task lists, 
-            and easily track your upcoming responsibilities. The color-coded priority 
-            system helps you focus on what matters most.
+            Get a bird's-eye view of all your tasks with the interactive
+            calendar. See priority-coded dots for each day, click to view
+            detailed task lists, and easily track your upcoming
+            responsibilities. The color-coded priority system helps you focus on
+            what matters most.
           </Typography>
         </Card>
       </Grid>