replace CalendarView with CalendarMonthly and improve chore date formatting

src/views/Landing/DemoCalendar.jsx

@@ -1,30 +1,40 @@
 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
   const generateSampleChores = () => {
     const today = moment()
     const chores = []
-    
+
     // High priority tasks
     chores.push({
       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,
     })
-    
+
     chores.push({
       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,
     })
-    
+
     // Medium priority tasks
     chores.push({
       id: 3,
@@ -33,40 +43,60 @@ const DemoCalendar = () => {
       nextDueDate: today.clone().add(1, 'days').hour(8).minute(0).toISOString(),
       assignedTo: 1,
     })
-    
+
     chores.push({
       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,
     })
-    
+
     chores.push({
       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,
     })
-    
+
     // Low priority tasks
     chores.push({
       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,
     })
-    
+
     chores.push({
       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,
     })
-    
+
     // Tasks for today
     chores.push({
       id: 8,
@@ -75,7 +105,7 @@ const DemoCalendar = () => {
       nextDueDate: today.clone().hour(19).minute(0).toISOString(),
       assignedTo: 1,
     })
-    
+
     chores.push({
       id: 9,
       name: '🗑️ Take Out Trash',
@@ -83,33 +113,48 @@ const DemoCalendar = () => {
       nextDueDate: today.clone().hour(7).minute(30).toISOString(),
       assignedTo: 1,
     })
-    
+
     // Tasks with no priority
     chores.push({
       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,
     })
-    
+
     // Multiple tasks on same day
     chores.push({
       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,
     })
-    
+
     chores.push({
       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,
     })
-    
+
     return chores
   }
 
@@ -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>
@@ -152,4 +204,4 @@ const DemoCalendar = () => {
   )
 }
 
-export default DemoCalendar
+export default DemoCalendar