mirror of
https://github.com/urosran/cally.git
synced 2025-07-09 22:57:16 +00:00
Month fixes
This commit is contained in:
@ -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,
|
||||
},
|
||||
});
|
Reference in New Issue
Block a user