Month fixes

components/pages/calendar/MonthCalendar.tsx

@@ -43,12 +43,6 @@ const MAX_VISIBLE_EVENTS = 3;
 const CENTER_MONTH_INDEX = 24;
 
 
-const DayHeader = React.memo(({day, width}: { day: string; width: string }) => (
-    <View style={[styles.weekDay, {width}]}>
-        <Text style={styles.weekDayText}>{day}</Text>
-    </View>
-));
-
 const Event = React.memo(({event, onPress}: { event: CalendarEvent; onPress: () => void }) => (
     <TouchableOpacity
         style={[styles.event, {backgroundColor: event.color || '#6200ee'}]}
@@ -85,17 +79,17 @@ const MultiDayEvent = React.memo(({
         position: 'absolute' as const,
         height: 14,
         backgroundColor: event.color || '#6200ee',
-        borderRadius: isStart || isEnd ? 4 : 0,
+        padding: 2,
+        zIndex: 1,
+        left: isStart ? 4 : -0.5, // Extend slightly into the border
+        right: isEnd ? 4 : -0.5,  // Extend slightly into the border
+        top: event.weekPosition ? event.weekPosition * 24 : 0,
+        borderRadius: 4,
         borderTopLeftRadius: isStart ? 4 : 0,
         borderBottomLeftRadius: isStart ? 4 : 0,
         borderTopRightRadius: isEnd ? 4 : 0,
         borderBottomRightRadius: isEnd ? 4 : 0,
-        padding: 1,
+        justifyContent: 'center',
-        zIndex: 1,
-        left: isStart ? 2 : 0,
-        right: isEnd ? 2 : 0,
-        top: event.weekPosition ? event.weekPosition * 20 : 0,
-        marginRight: !isEnd ? -1 : 0,
     };
 
     return (
@@ -336,6 +330,7 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
             dayWidth={dayWidth}
             onPress={onDayPress}
             screenWidth={screenWidth}
+            sortedDaysOfWeek={sortedDaysOfWeek}
         />
     ), [getEventsForDay, getMultiDayEventsForDay, dayWidth, onDayPress, screenWidth, weekStartsOn]);
 
@@ -364,11 +359,6 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
 
     return (
         <View style={styles.container}>
-            <View style={styles.header}>
-                {sortedDaysOfWeek.map((day, index) => (
-                    <DayHeader key={index} day={day} width={`${100 / 7}%`}/>
-                ))}
-            </View>
             <FlashList
                 ref={scrollViewRef}
                 data={monthsToRender}
@@ -406,7 +396,8 @@ const Month = React.memo(({
                               getMultiDayEventsForDay,
                               dayWidth,
                               onPress,
-                              screenWidth
+                              screenWidth,
+                              sortedDaysOfWeek
                           }: {
     date: Date;
     days: Date[];
@@ -416,6 +407,7 @@ const Month = React.memo(({
     dayWidth: number;
     onPress: (date: Date) => void;
     screenWidth: number;
+    sortedDaysOfWeek: string[];
 }) => {
     const weeks = useMemo(() => {
         const result = [];
@@ -468,6 +460,14 @@ const Month = React.memo(({
 
     return (
         <View style={[styles.scrollView, {width: screenWidth}]}>
+            <View style={styles.monthHeader}>
+                <Text style={styles.monthText}>{format(date, 'MMMM yyyy')}</Text>
+                <View style={styles.weekDayRow}>
+                    {sortedDaysOfWeek.map((day, index) => (
+                        <Text key={index} style={styles.weekDayText}>{day}</Text>
+                    ))}
+                </View>
+            </View>
             <View style={styles.daysGrid}>
                 {weeks.map((week, weekIndex) => (
                     <React.Fragment key={weekIndex}>
@@ -501,13 +501,15 @@ const HEADER_HEIGHT = 40;
 const styles = StyleSheet.create({
     multiDayContainer: {
         position: 'absolute',
-        top: 24,
+        top: 29,
         left: 0,
         right: 0,
+        bottom: 0,
         zIndex: 1,
     },
     dayContent: {
         flex: 1,
+        padding: 4, // Move padding here instead
     },
     eventsContainer: {
         flex: 1,
@@ -527,10 +529,11 @@ const styles = StyleSheet.create({
     },
     day: {
         height: '14%',
-        padding: 4,
+        padding: 0, // Remove padding
         borderWidth: 0.5,
         borderColor: '#eee',
         position: 'relative',
+        overflow: 'visible', // Allow events to overflow
     },
     container: {
         flex: 1,
@@ -593,4 +596,19 @@ const styles = StyleSheet.create({
         color: '#666',
         textAlign: 'center',
     },
+    monthHeader: {
+        paddingVertical: 12,
+    },
+    monthText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    weekDayRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        paddingHorizontal: 16,
+    },
 });