connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix week view time grid display and late night event rendering

Browse Source 
- Remove unnecessary boundary slot from week view time grid
- Adjust container heights to display full 11 PM - midnight time slot
- Fix timezone issue preventing events at 8 PM or later from rendering
- Update date matching logic to handle UTC-4 timezone offset correctly

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-02 10:36:26 -04:00
parent 73567c185c
commit e2e5813b54
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/week_view.rs
View File

@@ -585,11 +585,6 @@ pub fn week_view(props: &WeekViewProps) -> Html {
}
}).collect::<Html>()
}
// Final boundary slot to complete the 24-hour visual grid - make it interactive like other slots
<div class="time-slot boundary-slot">
<div class="time-slot-half"></div>
<div class="time-slot-half"></div>
</div>
// Events positioned absolutely based on their actual times
<div class="events-container">
@@ -1029,8 +1024,13 @@ fn calculate_event_position(event: &VEvent, date: NaiveDate) -> (f32, f32, bool)
let local_start = event.dtstart.with_timezone(&Local);
let event_date = local_start.date_naive();
// Only position events that are on this specific date
if event_date != date {
// Position events based on when they appear in local time, not their original date
// For timezone issues: an event created at 10 PM Sunday might be stored as Monday UTC
// but should still display on Sunday's column since that's when the user sees it
let should_display_here = event_date == date ||
(event_date == date - chrono::Duration::days(1) && local_start.hour() >= 20);
if !should_display_here {
return (0.0, 0.0, false); // Event not on this date
}

7
frontend/styles.css
View File

@@ -685,12 +685,13 @@ body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0; /* Allow flex item to shrink below content size */
}
.time-grid {
display: grid;
grid-template-columns: 80px 1fr;
min-height: 100%;
min-height: 1530px;
}
/* Time Labels */
@@ -700,6 +701,7 @@ body {
position: sticky;
left: 0;
z-index: 5;
min-height: 1440px; /* Match the time slots height */
}
.time-label {
@@ -725,12 +727,13 @@ body {
.week-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
min-height: 1440px; /* Ensure grid is tall enough for 24 time slots */
}
.week-day-column {
position: relative;
border-right: 1px solid var(--time-label-border, #e9ecef);
min-height: 1500px; /* 25 time labels × 60px = 1500px total */
min-height: 1440px; /* 24 time slots × 60px = 1440px total */
}
.week-day-column:last-child {