upd: calendar

Deskripsi:
- update indicator pada kalender
- fix style pada kalender

No Issues

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -1,19 +1,29 @@
 import ButtonBackHeader from "@/components/buttonBackHeader"
 import HeaderRightCalendarList from "@/components/calendar/headerCalendarList"
+import ItemDateCalendar from "@/components/calendar/itemDateCalendar"
 import EventItem from "@/components/eventItem"
 import Styles from "@/constants/Styles"
 import { router, Stack } from "expo-router"
+import moment from 'moment'
 import { useState } from "react"
 import { SafeAreaView, ScrollView, Text, View } from "react-native"
 import DateTimePicker, { CalendarComponents, CalendarDay, DateType, getDefaultStyles } from "react-native-ui-datepicker"
 
 export default function CalendarDivision() {
    const defaultStyles = getDefaultStyles()
-   const [selected, setSelected] = useState<DateType>()
+   const [selected, setSelected] = useState<DateType>(new Date());
+   const listDate = ['2025-03-19', '2025-03-22']
+
    const components: CalendarComponents = {
-      Day: (day: CalendarDay) => <Text>amalia</Text>,
+      Day: (day: CalendarDay) => {
-      // Month: (month: CalendarMonth) => <YourCustomMonth month={month} />
+         const now = String(day.date)
-      // etc
+         const today = moment(now).format('YYYY-MM-DD');
+         const sign = listDate.includes(today)
+
+         return (
+            <ItemDateCalendar text={day.text} isSelected={day.isSelected} isSign={sign} />
+         )
+      },
    };
 
    return (
@@ -30,18 +40,20 @@ export default function CalendarDivision() {
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapPaper, Styles.p10]}>
                   <DateTimePicker
-                     // components={components}
+                     components={components}
                      mode="single"
                      date={selected}
                      onChange={({ date }) => setSelected(date)}
-                     styles={defaultStyles}
+                     styles={{
+                        selected: Styles.selectedDate,
+                     }}
                   />
                </View>
                <View style={[Styles.mb15, Styles.mt15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
                   <View style={[Styles.wrapPaper]}>
-                     <EventItem category="purple" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
+                     <EventItem category="purple" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={() => { router.push('./calendar/321') }} />
-                     <EventItem category="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
+                     <EventItem category="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={() => { router.push('./calendar/321') }} />
                   </View>
                </View>
             </View>

components/calendar/itemDateCalendar.tsx

@@ -0,0 +1,20 @@
+import Styles from "@/constants/Styles";
+import { Text, View } from "react-native";
+
+type Props = {
+   text: string;
+   isSelected: boolean;
+   isSign: boolean;
+}
+
+
+export default function ItemDateCalendar({ text, isSelected, isSign }: Props) {
+   return (
+      <>
+         <View style={{ alignItems: 'center' }}>
+            <Text style={[isSelected ? Styles.cWhite : Styles.cBlack]}>{text}</Text>
+            <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View>
+         </View>
+      </>
+   )
+}

constants/Styles.ts

@@ -419,6 +419,16 @@ const Styles = StyleSheet.create({
       justifyContent: 'space-between',
       borderColor: '#d6d8f6',
       borderBottomWidth: 1
+   },
+   signDate: {
+      width: 20,
+      height: 2,
+      borderRadius: 3,
+      marginTop: 3
+   },
+   selectedDate: {
+      backgroundColor: '#238be6',
+      borderRadius: 5
    }
 })
 

package.json

@@ -35,6 +35,7 @@
     "expo-symbols": "~0.2.2",
     "expo-system-ui": "~4.0.8",
     "expo-web-browser": "~14.0.2",
+    "moment": "^2.30.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.7",