TODO: Đã chỉnh sửa xong filter tháng

App.js

@@ -7,7 +7,7 @@
  */
 
 import React, {useEffect} from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, DeviceEventEmitter} from 'react-native';
 import {Provider} from 'react-redux';
 import {createStore, applyMiddleware} from 'redux';
 import rootReducer from './src/reducers/index';
@@ -16,6 +16,15 @@ import createSagaMiddleware from 'redux-saga';
 import rootSaga from './src/saga/rootSaga';
 // import FirebaseNotification from "./src/helper/FirebaseNotification";
 import SplashScreen from 'react-native-splash-screen';
+if (!DeviceEventEmitter.removeListener) {
+  DeviceEventEmitter.removeListener = function(eventType, listener) {
+    // Use the new API
+    const subscription = this.addListener(eventType, () => {});
+    if (subscription && subscription.remove) {
+      subscription.remove();
+    }
+  };
+}
 const sagaMiddleware = createSagaMiddleware();
 
 let store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

src/assets/images.js

@@ -43,6 +43,8 @@ const images = {
   icProfileUn:require('./icon/profile_navigation_unsel.png'),
   igProfileDemo:require('./images/image.png'),
   icImageDownload:require('./images/icImageDownload.png'),
+  icLeft:require('./icon/arrow_left.png'),
+  icRight:require('./icon/arrow_right.png'),
   ic3Date:Date3Drawer,
   icDateDrawer:DateDrawer,
   icMenu:Menu,

src/config/Functions.js

-import React from 'react';
+import React, { useRef, useEffect }  from 'react';
 import {
   Dimensions,
   Platform,
@@ -234,6 +234,9 @@ export const removeItemFromArr2 = (items, index) => {
   return fill;
 };
 
+export const isValidEmail = email =>
+  email.length > 0 && /(.+)@(.+){2,}\.(.+){2,}/gim.test(email);
+
 export const removeItemFromArr = (items, index) => {
   items.splice(index, 1);
   return items;
@@ -601,3 +604,138 @@ export const getMimeType = fileExt => {
       return '*/*';
   }
 };
+
+//Calendar
+export const parseMinutes = timeStr => {
+  if (!timeStr || typeof timeStr !== 'string') return 0;
+  const parts = timeStr.split(':');
+  if (parts.length !== 2) return 0;
+  const [h, m] = parts.map(Number);
+  if (isNaN(h) || isNaN(m)) return 0;
+  return h * 60 + m;
+};
+
+export const formatDateToString = date => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+};
+
+export const isSameDay = (a, b) =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate();
+
+/**
+ * Trả về mảng events đã có toạ độ:
+ * { topPosition, height, leftOffset, rightOffset, zIndex, columnIndex, numColumns }
+ */
+export const layoutDayEvents = (events, hourHeight = 80) => {
+  if (!events || events.length === 0) return [];
+
+  // Chuẩn hoá + sort theo start
+  const mapped = events
+    .filter(e => e?.time && e?.endTime)
+    .map((e, i) => ({
+      ...e,
+      start: parseMinutes(e.time),
+      end: parseMinutes(e.endTime),
+      _idx: i,
+    }))
+    .filter(e => e.end > e.start)
+    .sort((a, b) => a.start - b.start);
+
+  // Gom nhóm overlap tuyến tính
+  const groups = [];
+  let cur = null;
+  for (const ev of mapped) {
+    if (!cur || ev.start >= cur.maxEnd) {
+      cur = {id: groups.length, items: [ev], maxEnd: ev.end};
+      groups.push(cur);
+    } else {
+      cur.items.push(ev);
+      if (ev.end > cur.maxEnd) cur.maxEnd = ev.end;
+    }
+  }
+
+  const out = [];
+
+  // Gán cột theo greedy interval partitioning
+  for (const g of groups) {
+    const colEnds = []; // end time cuối mỗi cột
+    const colOf = {}; // event.id -> columnIndex
+    const items = [...g.items].sort((a, b) => a.start - b.start);
+
+    for (const ev of items) {
+      let placed = false;
+      for (let c = 0; c < colEnds.length; c++) {
+        if (ev.start >= colEnds[c]) {
+          colEnds[c] = ev.end;
+          colOf[ev.id] = c;
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) {
+        colOf[ev.id] = colEnds.length;
+        colEnds.push(ev.end);
+      }
+    }
+
+    const numCols = Math.max(colEnds.length, 1);
+
+    for (const ev of items) {
+      const columnIndex = colOf[ev.id] ?? 0;
+      const topPosition = (ev.start / 60) * hourHeight;
+      const height = ((ev.end - ev.start) / 60) * hourHeight;
+      const widthPct = 100 / numCols;
+      const leftPct = columnIndex * widthPct;
+
+      out.push({
+        ...ev,
+        topPosition,
+        height,
+        leftOffset: `${Math.round(leftPct * 100) / 100}%`,
+        rightOffset: `${Math.round((100 - (leftPct + widthPct)) * 100) / 100}%`,
+        widthPct,
+        columnIndex,
+        numColumns: numCols,
+        zIndex: 10 + columnIndex,
+      });
+    }
+  }
+
+  // Trả về theo thứ tự ban đầu để render ổn định
+  return out.sort((a, b) => a._idx - b._idx);
+
+  /**
+   * Hook đếm số lần render của một component
+   */
+};
+export const useRenderCount = (name = 'Component') => {
+  const renderCount = useRef(0);
+
+  renderCount.current += 1;
+
+  useEffect(() => {
+    console.log(`${name} đã render ${renderCount.current} lần`);
+  });
+
+  return renderCount.current;
+};
+
+export const monthNames = [
+  'Tháng 1',
+  'Tháng 2',
+  'Tháng 3',
+  'Tháng 4',
+  'Tháng 5',
+  'Tháng 6',
+  'Tháng 7',
+  'Tháng 8',
+  'Tháng 9',
+  'Tháng 10',
+  'Tháng 11',
+  'Tháng 12',
+]
\ No newline at end of file

src/routers/TabNavigation.js

@@ -124,8 +124,8 @@ export default connect(mapStateToProps, {})(TabNavigator);
 
 const styles = StyleSheet.create({
     tabBarIcon: {
-      width: Platform.OS === 'ios' ? 20: '50%',
-      height: Platform.OS === 'ios' ? 20 : '50%',
+      width: Platform.OS === 'ios' ? 20: 25,
+      height: Platform.OS === 'ios' ? 20 : 25,
         resizeMode: 'contain'
     }
 });
\ No newline at end of file

src/screens/class_schedule/index.js

-import React, {useState, useMemo, useRef} from 'react';
-import {Animated, PanResponder, Dimensions} from 'react-native';
+import React, {useState, useMemo, useRef, useEffect} from 'react';
+import {Animated, PanResponder, Dimensions, DeviceEventEmitter} from 'react-native';
+import {useFocusEffect} from '@react-navigation/native';
 import ClassScheduleView from './view';
 
+// ==================== HẰNG SỐ ====================
 const {height: screenHeight} = Dimensions.get('window');
 const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
 
 const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
-  const [currentDate, setCurrentDate] = useState(new Date(2025, 7, 1));
+  // ==================== QUẢN LÝ STATE ====================
+  // B1: State ngày tháng và lịch
+  const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState(null);
+
+  // ==================== EFFECTS ====================
+  // Reset về ngày hiện tại khi chuyển màn hình
+  useFocusEffect(
+    React.useCallback(() => {
+      const today = new Date();
+      setCurrentDate(today);
+      setSelectedDate(null);
+      DeviceEventEmitter.emit('onDateChange', today);
+      // Cập nhật header drawer với tháng hiện tại
+      DeviceEventEmitter.emit('updateHeaderMonth', today.getMonth());
+    }, [])
+  );
+
+  // B2: State bottom sheet
   const [showBottomSheet, setShowBottomSheet] = useState(false);
-  
-  const bottomSheetTranslateY = useRef(new Animated.Value(BOTTOM_SHEET_HEIGHT)).current;
 
-  const formatDateToString = (date) => {
+  // B3: Tham chiếu animation
+  const bottomSheetTranslateY = useRef(
+    new Animated.Value(BOTTOM_SHEET_HEIGHT),
+  ).current;
+
+  // ==================== HÀM TIỆN ÍCH ====================
+  // T1: Định dạng ngày thành chuỗi
+  const formatDateToString = date => {
     const year = date.getFullYear();
     const month = (date.getMonth() + 1).toString().padStart(2, '0');
     const day = date.getDate().toString().padStart(2, '0');
     return `${year}-${month}-${day}`;
   };
 
+  // T2: Định dạng ngày để hiển thị
+  const formatDateToDisplay = date => {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    return `Lịch ngày ${day}/${month}/${year}`;
+  };
+
+  // T3: Chuyển đổi chuỗi thành ngày
+  const parseLocalDate = dateString => {
+    const [year, month, day] = dateString.split('-').map(Number);
+    return new Date(year, month - 1, day);
+  };
+
+  // ==================== QUẢN LÝ DỮ LIỆU ====================
+  // D1: Tạo dữ liệu sự kiện mẫu
   const createMockEvents = () => {
     const today = new Date();
     const todayStr = formatDateToString(today);
@@ -147,32 +187,25 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     ];
   };
 
+  // D2: Xử lý dữ liệu sự kiện
   const mockEvents = createMockEvents();
   const allEvents = [...events, ...mockEvents];
 
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (evt, gestureState) => {
-        return Math.abs(gestureState.dy) > 10;
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dy > 0) {
-          bottomSheetTranslateY.setValue(gestureState.dy);
-        }
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        if (gestureState.dy > 100) {
-          hideBottomSheetModal();
-        } else {
-          Animated.spring(bottomSheetTranslateY, {
-            toValue: 0,
-            useNativeDriver: true,
-          }).start();
-        }
-      },
-    })
-  ).current;
+  // D3: Hàm truy vấn sự kiện
+  const getEventsForDate = date => {
+    const dateStr = formatDateToString(date);
+    return allEvents.filter(event => event.date === dateStr);
+  };
 
+  const getSelectedEvents = () => {
+    if (!selectedDate) return [];
+    return allEvents
+      .filter(event => event.date === selectedDate)
+      .sort((a, b) => a.time.localeCompare(b.time));
+  };
+
+  // ==================== LOGIC LỊCH ====================
+  // L1: Tạo dữ liệu tháng
   const getMonthData = useMemo(() => {
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
@@ -198,28 +231,12 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     };
   }, [currentDate]);
 
-  const getEventsForDate = (date) => {
-    const dateStr = formatDateToString(date);
-    return allEvents.filter(event => event.date === dateStr);
-  };
-
-  const parseLocalDate = (dateString) => {
-    const [year, month, day] = dateString.split('-').map(Number);
-    return new Date(year, month - 1, day);
-  };
-
-  const formatDateToDisplay = (date) => {
-    const day = date.getDate().toString().padStart(2, '0');
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const year = date.getFullYear();
-    return `Lịch ngày ${day}/${month}/${year}`;
-  };
-
-  const isCurrentMonth = (date) => {
+  // L2: Hàm kiểm tra ngày tháng
+  const isCurrentMonth = date => {
     return date.getMonth() === currentDate.getMonth();
   };
 
-  const isToday = (date) => {
+  const isToday = date => {
     const today = new Date();
     return (
       date.getDate() === today.getDate() &&
@@ -228,20 +245,32 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     );
   };
 
-  const navigateMonth = (direction) => {
-    const newDate = new Date(currentDate);
-    if (direction === 'prev') {
-      newDate.setMonth(newDate.getMonth() - 1);
-    } else {
-      newDate.setMonth(newDate.getMonth() + 1);
-    }
-    setCurrentDate(newDate);
-    setSelectedDate(null);
-    if (showBottomSheet) {
-      hideBottomSheetModal();
-    }
-  };
+  // ==================== HỆ THỐNG ANIMATION ====================
+  // A1: Thiết lập PanResponder
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        return Math.abs(gestureState.dy) > 10;
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (gestureState.dy > 0) {
+          bottomSheetTranslateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dy > 100) {
+          hideBottomSheetModal();
+        } else {
+          Animated.spring(bottomSheetTranslateY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    }),
+  ).current;
 
+  // A2: Hàm animation Bottom Sheet
   const showBottomSheetModal = () => {
     setShowBottomSheet(true);
     Animated.spring(bottomSheetTranslateY, {
@@ -262,10 +291,33 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     });
   };
 
-  const handleDatePress = (date) => {
+  // ==================== XỬ LÝ SỰ KIỆN ====================
+  // X1: Xử lý điều hướng
+  const navigateMonth = direction => {
+    const newDate = new Date(currentDate);
+    if (direction === 'prev') {
+      newDate.setMonth(newDate.getMonth() - 1);
+    } else {
+      newDate.setMonth(newDate.getMonth() + 1);
+    }
+    setCurrentDate(newDate);
+    setSelectedDate(null);
+    
+    // Phát sự kiện để cập nhật header title
+    DeviceEventEmitter.emit('onDateChange', newDate.toISOString());
+    // Cập nhật header drawer với tháng mới
+    DeviceEventEmitter.emit('updateHeaderMonth', newDate.getMonth());
+    
+    if (showBottomSheet) {
+      hideBottomSheetModal();
+    }
+  };
+
+  // X2: Xử lý chọn ngày
+  const handleDatePress = date => {
     const dateStr = formatDateToString(date);
     const dayEvents = getEventsForDate(date);
-    
+
     setSelectedDate(dateStr);
     onDateSelect?.(dateStr);
 
@@ -274,7 +326,8 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     }
   };
 
-  const handleEventPress = (event) => {
+  // X3: Xử lý tương tác sự kiện
+  const handleEventPress = event => {
     onEventPress?.(event);
   };
 
@@ -282,13 +335,6 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
     hideBottomSheetModal();
   };
 
-  const getSelectedEvents = () => {
-    if (!selectedDate) return [];
-    return allEvents
-      .filter(event => event.date === selectedDate)
-      .sort((a, b) => a.time.localeCompare(b.time));
-  };
-
   return (
     <ClassScheduleView
       currentDate={currentDate}
@@ -300,6 +346,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
       getEventsForDate={getEventsForDate}
       parseLocalDate={parseLocalDate}
       formatDateToDisplay={formatDateToDisplay}
+      formatDateToString={formatDateToString}
       isCurrentMonth={isCurrentMonth}
       isToday={isToday}
       navigateMonth={navigateMonth}
@@ -311,4 +358,4 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
   );
 };
 
-export default ClassSchedule;
+export default ClassSchedule;
\ No newline at end of file

src/screens/class_schedule/style.js

@@ -3,225 +3,263 @@ import R from '../../assets/R';
 
 const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
 const CELL_WIDTH = (screenWidth - 30) / 7;
-const CELL_HEIGHT = (screenHeight - 140) / 6;
+const CELL_HEIGHT = (screenHeight - 160) / 6;
 const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
 
 const styles = StyleSheet.create({
+  // Container chính của màn hình
   container: {
     flex: 1,
     backgroundColor: R.colors.white,
     alignItems: 'center',
   },
+
+  // Header tháng/năm với nút điều hướng
   header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingVertical: 15,
-    },
-    header_title: {
-      fontSize: R.fontsize.fontsSize16,
-      fontFamily: R.fonts.InterMedium,
-      color: R.colors.black,
-      fontWeight: '600',
-    },
-    navButton: {
-      width: 30,
-      height: 30,
-      borderRadius: 20,
-      backgroundColor: R.colors.blue500,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    navButtonText: {
-      color: R.colors.white,
-      fontSize: R.fontsize.fontsSize16,
-      fontFamily: R.fonts.InterMedium,
-    },
-    weekDaysContainer: {
-      flexDirection: 'row',
-      paddingBottom: 5,
-      marginBottom: 5,
-    },
-    weekDayCell: {
-      width: CELL_WIDTH,
-      alignItems: 'center',
-    },
-    weekDayText: {
-      fontFamily: R.fonts.InterRegular,
-      fontSize: R.fontsize.fontsSize10,
-      fontWeight: '400',
-      color: R.colors.black,
-    },
-    calendarGrid: {
-    },
-    weekRow: {
-      flexDirection: 'row',
-    },
-    dayCell: {
-      width: CELL_WIDTH,
-      minHeight: CELL_HEIGHT,
-      borderWidth: 1,
-      borderColor: R.colors.grey_200,
-      padding: 4,
-      alignItems: 'center',
-    },
-    selectedDayCell: {
-      borderColor: R.colors.blue500,
-      borderWidth: 1,
-    },
-    dayText: {
-      fontSize: R.fontsize.fontsSize12,
-      fontWeight: '500',
-      fontFamily:R.fonts.InterMedium,
-      color: R.colors.black,
-      marginBottom: 2,
-    },
-    dayTextInactive: {
-      color: R.colors.grey_100,
-      opacity: 1,
-    },
-    selectedDayText: {
-      color: R.colors.black,
-      fontWeight: 'bold',
-      fontFamily: R.fonts.InterSemiBold,
-    },
-    todayText: {
-      color: R.colors.white,
-      fontWeight: 'bold',
-      fontFamily: R.fonts.InterSemiBold,
-      backgroundColor: R.colors.blue500,
-      borderRadius: 10,
-      paddingHorizontal: 5,
-    },
-  
-    eventsContainer: {
-      width: '100%',
-      flex: 1,
-    },
-    eventBar: {
-      paddingVertical: 2,
-      paddingHorizontal: 5,
-      borderRadius: 5,
-      marginBottom: 2,
-    },
-    eventBarText: {
-      fontSize: R.fontsize.fontsSize10,
-      color: R.colors.white,
-      fontWeight: '500',
-      fontFamily: R.fonts.InterRegular
-    },
-    moreEventsText: {
-      fontSize: R.fontsize.fontsSize10,
-      color: R.colors.grey_100,
-      textAlign: 'center',
-    },
-  
-    modalBackdrop: {
-      flex: 1,
-      backgroundColor: R.colors.grey_200,
-      justifyContent: 'flex-end',
-    },
-    bottomSheet: {
-      height: BOTTOM_SHEET_HEIGHT,
-      backgroundColor: R.colors.white,
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-     
-    },
-    bottomSheetContent: {
-      paddingHorizontal: 15,
-    },
-    dragHandle: {
-      width: 40,
-      height: 4,
-      backgroundColor: R.colors.grey_200,
-      borderRadius: 2,
-      alignSelf: 'center',
-      marginTop: 10,
-      marginBottom: 15,
-    },
-    bottomSheetHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginBottom: 20,
-    },
-    bottomSheetTitle: {
-      fontSize: R.fontsize.fontSizeHeader1,
-      fontFamily: R.fonts.InterMedium,
-      color: R.colors.black,
-      flex: 1,
-    },
-    closeButton: {
-      width: 30,
-      height: 30,
-      borderRadius: 15,
-      backgroundColor: R.colors.grey_200,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    closeButtonText: {
-      fontSize: R.fontsize.fontsSize12,
-      color: R.colors.grey_800,
-      fontFamily: R.fonts.InterRegular,
-    },
-  
-    noEventsContainer: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 40,
-    },
-    noEventsText: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterRegular,
-      color: R.colors.grey_800,
-      fontWeight: '400'
-    },
-    eventCard: {
-      flexDirection: 'row',
-      backgroundColor: R.colors.white,
-      borderRadius: 12,
-      padding: 15,
-      marginBottom: 12,
-      borderLeftWidth: 4,
-      borderLeftColor: R.colors.blue500,
-      shadowColor: R.colors.black,
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 1,
-      shadowRadius: 1,
-      elevation: 2,
-    },
-    eventTimeContainer: {
-      minWidth: 80,
-      alignItems: 'flex-start',
-      justifyContent: 'flex-start',
-      marginRight: 15,
-    },
-    eventTime: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterMedium,
-      color: R.colors.blue500,
-      fontWeight: '600',
-    },
-    eventContent: {
-      flex: 1,
-    },
-    eventTitle: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterMedium,
-      color: R.colors.black,
-      fontWeight: '600',
-      marginBottom: 4,
-    },
-    eventDescription: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterRegular,
-      color: R.colors.grey_800,
-    },
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 15,
+  },
+  header_title: {
+    fontSize: R.fontsize.fontsSize14,
+    fontFamily: R.fonts.InterMedium,
+    color: R.colors.black,
+    fontWeight: '600',
+  },
+  // Nút điều hướng tháng trước/sau
+  navButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // Tiêu đề các ngày trong tuần
+  weekDaysContainer: {
+    flexDirection: 'row',
+    paddingBottom: 5,
+    marginBottom: 5,
+  },
+  weekDayCell: {
+    width: CELL_WIDTH,
+    alignItems: 'center',
+  },
+  weekDayText: {
+    fontFamily: R.fonts.InterMedium,
+    fontSize: R.fontsize.fontsSize12,
+    fontWeight: '600',
+    color: R.colors.black,
+  },
+
+  // Lưới lịch
+  calendarGrid: {},
+  weekRow: {
+    flexDirection: 'row',
+  },
+
+  // Ô ngày trong lịch
+  dayCell: {
+    width: CELL_WIDTH,
+    minHeight: CELL_HEIGHT,
+    borderWidth: 1,
+    borderColor: R.colors.gray150,
+    padding: 6,
+    alignItems: 'center',
+  },
+  // Ô ngày được chọn
+  selectedDayCell: {
+    borderColor: R.colors.main,
+    borderWidth: 1,
+  },
+  // Text số ngày
+  dayText: {
+    fontSize: R.fontsize.fontsSize12,
+    fontWeight: '400',
+    fontFamily: R.fonts.InterRegular,
+    color: R.colors.black,
+    marginBottom: 2,
+  },
+  // Text ngày không thuộc tháng hiện tại
+  dayTextInactive: {
+    color: R.colors.black,
+    opacity: 1,
+  },
+  // Text ngày được chọn
+  selectedDayText: {
+    color: R.colors.black,
+    fontWeight: '500',
+    fontFamily: R.fonts.InterSemiBold,
+  },
+  // Text ngày hôm nay
+  todayText: {
+    color: R.colors.white,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontSemiBold,
+    backgroundColor: R.colors.main,
+    borderRadius: 15,
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+  },
+
+  // Sự kiện trong ô ngày
+  eventsContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  // Thanh sự kiện nhỏ trong ô ngày
+  eventBar: {
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    borderRadius: 10,
+    marginBottom: 2,
+    backgroundColor: R.colors.main,
+  },
+  eventBarText: {
+    fontSize: R.fontsize.fontsSize12,
+    color: R.colors.white,
+    fontWeight: '400',
+    fontFamily: R.fonts.InterRegular,
+  },
+  // Text hiển thị số sự kiện còn lại
+  moreEventsText: {
+    fontSize: R.fontsize.fontsSize12,
+    color: R.colors.gray150,
+    fontWeight: '400',
+    fontFamily: R.fonts.InterRegular,
+    textAlign: 'center',
+  },
+
+  // Modal bottom sheet
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: R.colors.black250,
+    justifyContent: 'flex-end',
+  },
+  bottomSheet: {
+    height: BOTTOM_SHEET_HEIGHT,
+    backgroundColor: R.colors.white,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+
+  // Nội dung bottom sheet
+  bottomSheetContent: {
+    height: BOTTOM_SHEET_HEIGHT,
+  },
+  // Thanh kéo
+  dragHandle: {
+    width: 40,
+    height: 4,
+    backgroundColor: R.colors.gray150,
+    borderRadius: 5,
+    alignSelf: 'center',
+    marginTop: 10,
+    marginBottom: 15,
+  },
+  // Header của bottom sheet
+  bottomSheetHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 15,
+  },
+  bottomSheetTitle: {
+    fontSize: R.fontsize.fontsSize12,
+    fontFamily: R.fonts.InterMedium,
+    color: R.colors.black,
+    fontWeight: '600',
+    flex: 1,
+  },
+  // Nút đóng bottom sheet
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: R.colors.gray150,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonText: {
+    fontSize: R.fontsize.fontsSize12,
+    color: R.colors.black,
+    fontFamily: R.fonts.InterRegular,
+    fontWeight: '400',
+  },
+
+  // Danh sách sự kiện trong bottom sheet
+  // ScrollView chứa danh sách sự kiện
+  eventsScrollView: {
+    paddingTop: 10,
+  },
+  // Container cho từng sự kiện
+  containerBottomSheet: {
+    flex: 1,
+    marginBottom: 10,
+  },
+  // Trạng thái không có sự kiện
+  noEventsContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+  },
+  noEventsText: {
+    fontSize: R.fontsize.fontsSize12,
+    fontFamily: R.fonts.InterRegular,
+    color: R.colors.gray150,
+    fontWeight: '400',
+  },
+
+  // Card sự kiện chi tiết
+  eventCard: {
+    flexDirection: 'row',
+    backgroundColor: R.colors.white,
+    borderRadius: 12,
+    padding: 15,
+    marginBottom: 10,
+    marginHorizontal: 15,
+    borderLeftWidth: 4,
+    borderLeftColor: R.colors.main,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+  },
+  // Container thời gian sự kiện
+  eventTimeContainer: {
+    minWidth: 80,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    marginRight: 15,
+  },
+  eventTime: {
+    fontSize: R.fontsize.fontsSize12,
+    fontFamily: R.fonts.InterMedium,
+    color: R.colors.main,
+    fontWeight: '600',
+  },
+  // Container nội dung sự kiện
+  eventContent: {
+    flex: 1,
+  },
+  eventTitle: {
+    fontSize: R.fontsize.fontsSize12,
+    fontFamily: R.fonts.InterMedium,
+    color: R.colors.black,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  eventDescription: {
+    fontSize: R.fontsize.fontsSize12,
+    fontFamily: R.fonts.InterRegular,
+    color: R.colors.gray200,
+    fontWeight: '400',
+  },
 });
 
 export {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT};

src/screens/class_schedule/view.js

@@ -3,20 +3,23 @@ import {
   Text,
   View,
   TouchableOpacity,
-  StyleSheet,
   ScrollView,
-  Dimensions,
   Modal,
   Animated,
-  SafeAreaView,
+  LogBox,
+  PanResponder,
+  Image
 } from 'react-native';
 import R from '../../assets/R';
-import { styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT } from './style';
-import { useNavigation } from '@react-navigation/native';
+import {styles} from './style';
+import {useNavigation} from '@react-navigation/native';
 import * as SCREENNAME from '../../routers/ScreenNames';
-
+import { monthNames } from '../../config/Functions';
+LogBox.ignoreLogs([
+  '[Reanimated] Reduced motion setting is enabled', 
+  'Each child in a list should have a unique "key" prop'
+]);
 const ClassScheduleView = ({
-  currentDate,
   selectedDate,
   showBottomSheet,
   bottomSheetTranslateY,
@@ -25,6 +28,7 @@ const ClassScheduleView = ({
   getEventsForDate,
   parseLocalDate,
   formatDateToDisplay,
+  formatDateToString,
   isCurrentMonth,
   isToday,
   navigateMonth,
@@ -34,18 +38,38 @@ const ClassScheduleView = ({
   getSelectedEvents,
 }) => {
   const navigation = useNavigation();
-  const renderHeader = () => {
-    const monthNames = [
-      'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
-      'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12',
-    ];
 
+  // Tạo PanResponder cho swipe gesture điều hướng tháng
+  const swipePanResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: (evt, gestureState) => {
+      // Chỉ kích hoạt khi vuốt ngang với khoảng cách đủ lớn
+      return Math.abs(gestureState.dx) > Math.abs(gestureState.dy) && Math.abs(gestureState.dx) > 20;
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Có thể thêm animation preview ở đây nếu cần
+    },
+    onPanResponderRelease: (evt, gestureState) => {
+      const swipeThreshold = 50; // Ngưỡng tối thiểu để kích hoạt swipe
+      
+      if (gestureState.dx > swipeThreshold) {
+        // Vuốt phải -> tháng trước
+        navigateMonth('prev');
+      } else if (gestureState.dx < -swipeThreshold) {
+        // Vuốt trái -> tháng sau
+        navigateMonth('next');
+      }
+    },
+  });
+  const renderHeader = () => {
     return (
       <View style={styles.header}>
         <TouchableOpacity
           style={styles.navButton}
           onPress={() => navigateMonth('prev')}>
-          <Text style={styles.navButtonText}>‹</Text>
+            <Image 
+              source={R.images.icLeft} 
+              style={styles.icBack}
+              />
         </TouchableOpacity>
 
         <Text style={styles.header_title}>
@@ -55,7 +79,10 @@ const ClassScheduleView = ({
         <TouchableOpacity
           style={styles.navButton}
           onPress={() => navigateMonth('next')}>
-          <Text style={styles.navButtonText}>›</Text>
+               <Image 
+              source={R.images.icRight} 
+              style={styles.icBack}
+              />
         </TouchableOpacity>
       </View>
     );
@@ -75,7 +102,7 @@ const ClassScheduleView = ({
     );
   };
 
-  const renderDayCell = (date, index) => {
+  const renderDayCell = (date, index, formatDateToString) => {
     const dayEvents = getEventsForDate(date);
     const isSelected = selectedDate === formatDateToString(date);
     const isTodayDate = isToday(date);
@@ -88,10 +115,11 @@ const ClassScheduleView = ({
           styles.dayCell,
           isSelected && styles.selectedDayCell,
           isTodayDate && styles.todayCell,
+          !isInCurrentMonth && {backgroundColor: R.colors.gray220},
         ]}
         onPress={() => handleDatePress(date)}
-        activeOpacity={0.7}>
-
+        activeOpacity={0.7}
+        >
         <Text
           style={[
             styles.dayText,
@@ -107,10 +135,7 @@ const ClassScheduleView = ({
             {dayEvents.slice(0, 2).map((event, eventIndex) => (
               <TouchableOpacity
                 key={event.id}
-                style={[
-                  styles.eventBar,
-                  { backgroundColor: R.colors.main },
-                ]}
+                style={[styles.eventBar]}
                 onPress={() => handleEventPress(event)}>
                 <Text style={styles.eventBarText} numberOfLines={1}>
                   {event.title}
@@ -126,14 +151,6 @@ const ClassScheduleView = ({
     );
   };
 
-  const formatDateToString = (date) => {
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
-
-
   const renderCalendarGrid = () => {
     const weeks = [];
     for (let i = 0; i < 6; i++) {
@@ -141,7 +158,7 @@ const ClassScheduleView = ({
       weeks.push(
         <View key={i} style={styles.weekRow}>
           {week.map((date, dayIndex) =>
-            renderDayCell(date, i * 7 + dayIndex),
+            renderDayCell(date, i * 7 + dayIndex, formatDateToString),
           )}
         </View>,
       );
@@ -157,7 +174,7 @@ const ClassScheduleView = ({
 
     return (
       <View style={styles.bottomSheetContent}>
-        <View style={styles.dragHandle} />
+        <View style={styles.dragHandle}></View>
 
         <View style={styles.bottomSheetHeader}>
           <Text style={styles.bottomSheetTitle}>
@@ -169,7 +186,6 @@ const ClassScheduleView = ({
             <Text style={styles.closeButtonText}>✕</Text>
           </TouchableOpacity>
         </View>
-
         <ScrollView
           style={styles.eventsScrollView}
           showsVerticalScrollIndicator={false}>
@@ -179,30 +195,33 @@ const ClassScheduleView = ({
             </View>
           ) : (
             selectedEvents.map((event, index) => (
-              <TouchableOpacity
-                key={event.id}
-                style={styles.eventCard}
-                onPress={() => navigation.navigate(SCREENNAME.DETAILCLASSSCHEDULE, { event })}
-                activeOpacity={0.7}>
-
-                <View style={styles.eventTimeContainer}>
-                  <Text style={styles.eventTime}>
-                    {event.time}
-                    {event.endTime && ` - ${event.endTime}`}
-                  </Text>
-                </View>
+              <View style={styles.containerBottomSheet}>
+                <TouchableOpacity
+                  key={event.id}
+                  style={styles.eventCard}
+                  onPress={() =>
+                    navigation.navigate(SCREENNAME.DETAILSCHEDULE, {event})
+                  }
+                  activeOpacity={0.7}>
+                  <View style={styles.eventTimeContainer}>
+                    <Text style={styles.eventTime}>
+                      {event.time}
+                      {event.endTime && ` - ${event.endTime}`}
+                    </Text>
+                  </View>
 
-                <View style={styles.eventContent}>
-                  <Text style={styles.eventTitle} numberOfLines={2}>
-                    {event.title}
-                  </Text>
-                  {event.description && (
-                    <Text style={styles.eventDescription} numberOfLines={3}>
-                      {event.description}
+                  <View style={styles.eventContent}>
+                    <Text style={styles.eventTitle} numberOfLines={2}>
+                      {event.title}
                     </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
+                    {event.description && (
+                      <Text style={styles.eventDescription} numberOfLines={3}>
+                        {event.description}
+                      </Text>
+                    )}
+                  </View>
+                </TouchableOpacity>
+              </View>
             ))
           )}
         </ScrollView>
@@ -210,6 +229,8 @@ const ClassScheduleView = ({
     );
   };
 
+  // ===== RENDER BOTTOM SHEET - Modal bottom sheet =====
+  // Sử dụng styles: modalBackdrop, bottomSheet
   const renderBottomSheet = () => {
     return (
       <Modal
@@ -217,17 +238,15 @@ const ClassScheduleView = ({
         transparent={true}
         animationType="none"
         onRequestClose={handleCloseBottomSheet}>
-
         <TouchableOpacity
           style={styles.modalBackdrop}
           activeOpacity={1}
           onPress={handleCloseBottomSheet}>
-
           <Animated.View
             style={[
               styles.bottomSheet,
               {
-                transform: [{ translateY: bottomSheetTranslateY }],
+                transform: [{translateY: bottomSheetTranslateY}],
               },
             ]}
             {...panResponder.panHandlers}>
@@ -240,19 +259,20 @@ const ClassScheduleView = ({
     );
   };
 
+  // ===== MAIN RENDER - Render chính của component =====
+  // Sử dụng styles: container
   return (
-    
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ScrollView showsVerticalScrollIndicator={false}>
-        {renderHeader()}
-        {renderWeekDays()}
-        {renderCalendarGrid()}
+        <View style={styles.body} {...swipePanResponder.panHandlers}>
+          {renderHeader()}
+          {renderWeekDays()}
+          {renderCalendarGrid()}
+        </View>
       </ScrollView>
       {renderBottomSheet()}
-    </SafeAreaView>
+    </View>
   );
 };
 
-
-
-export default ClassScheduleView;
+export default ClassScheduleView;
\ No newline at end of file

src/screens/home/style.js

@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     backgroundColor: R.colors.blue500,
   },
   avatar_text: {
-    fontSize: R.fontsize.fontsSize16,
+    fontSize: R.fontsize.fontsSize14,
     fontWeight: '600',
     color: R.colors.white,
     fontFamily: R.fonts.InterSemiBold,
@@ -100,9 +100,9 @@ const styles = StyleSheet.create({
   },
   text_card_info: {
     fontSize: R.fontsize.fontsSize12,
-    fontWeight: '600',
+    fontWeight: '400',
     color: R.colors.black,
-    fontFamily: R.fonts.InterMedium,
+    fontFamily: R.fonts.InterRegular,
     numberOfLines: 1,
     ellipsizeMode: 'tail',
   },
@@ -110,15 +110,14 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     paddingHorizontal: 10,
     backgroundColor: R.colors.gray220,
-    minHeight: 21,
-    maxWidth: 108,
+    height:30,
     borderRadius: 15,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   btn_text: {
-    fontSize: R.fontsize.fontsSize10,
+    fontSize: R.fontsize.fontsSize12,
     fontWeight: '400',
     color: R.colors.black,
     fontFamily: R.fonts.InterRegular,