63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
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>(new Date());
|
|
const listDate = ['2025-03-19', '2025-03-22']
|
|
|
|
const components: CalendarComponents = {
|
|
Day: (day: CalendarDay) => {
|
|
const now = String(day.date)
|
|
const today = moment(now).format('YYYY-MM-DD');
|
|
const sign = listDate.includes(today)
|
|
|
|
return (
|
|
<ItemDateCalendar text={day.text} isSelected={day.isSelected} isSign={sign} />
|
|
)
|
|
},
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView>
|
|
<Stack.Screen
|
|
options={{
|
|
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
|
headerTitle: 'Kalender',
|
|
headerTitleAlign: 'center',
|
|
headerRight: () => <HeaderRightCalendarList />
|
|
}}
|
|
/>
|
|
<ScrollView>
|
|
<View style={[Styles.p15]}>
|
|
<View style={[Styles.wrapPaper, Styles.p10]}>
|
|
<DateTimePicker
|
|
components={components}
|
|
mode="single"
|
|
date={selected}
|
|
onChange={({ date }) => setSelected(date)}
|
|
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="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={() => { router.push('./calendar/321') }} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
)
|
|
} |