Month fixes

This commit is contained in:
Milan Paunovic
2025-01-26 17:15:13 +01:00
parent dc7d59eecc
commit 0998dc29d0

View File

@ -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,
zIndex: 1,
left: isStart ? 2 : 0,
right: isEnd ? 2 : 0,
top: event.weekPosition ? event.weekPosition * 20 : 0,
marginRight: !isEnd ? -1 : 0,
justifyContent: 'center',
};
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,
},
});