Implement time-based week view with scrollable 24-hour layout
- Add comprehensive time grid structure with hourly and half-hourly divisions - Implement scrollable week view with sticky header and time labels - Create 25 time labels (12 AM through 11 PM plus boundary) with proper formatting - Add 25 matching time slot backgrounds for visual alignment - Style time labels with appropriate sizing and boundary indicators - Position events absolutely over time grid (basic positioning for now) - Set proper container heights and scrollable content area Note: Time slot alignment still needs refinement for complete 24-hour coverage 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
@@ -40,84 +40,145 @@ pub fn week_view(props: &WeekViewProps) -> Html {
|
|||||||
"#3B82F6".to_string()
|
"#3B82F6".to_string()
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Generate time labels - 24 hours plus the final midnight boundary
|
||||||
|
let mut time_labels: Vec<String> = (0..24).map(|hour| {
|
||||||
|
if hour == 0 {
|
||||||
|
"12 AM".to_string()
|
||||||
|
} else if hour < 12 {
|
||||||
|
format!("{} AM", hour)
|
||||||
|
} else if hour == 12 {
|
||||||
|
"12 PM".to_string()
|
||||||
|
} else {
|
||||||
|
format!("{} PM", hour - 12)
|
||||||
|
}
|
||||||
|
}).collect();
|
||||||
|
|
||||||
|
// Add the final midnight boundary to show where the day ends
|
||||||
|
time_labels.push("12 AM".to_string());
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="week-grid">
|
<div class="week-view-container">
|
||||||
// Weekday headers
|
// Header with weekday names and dates
|
||||||
<div class="weekday-header">{"Sun"}</div>
|
<div class="week-header">
|
||||||
<div class="weekday-header">{"Mon"}</div>
|
<div class="time-gutter"></div>
|
||||||
<div class="weekday-header">{"Tue"}</div>
|
{
|
||||||
<div class="weekday-header">{"Wed"}</div>
|
week_days.iter().map(|date| {
|
||||||
<div class="weekday-header">{"Thu"}</div>
|
let is_today = *date == props.today;
|
||||||
<div class="weekday-header">{"Fri"}</div>
|
let weekday_name = get_weekday_name(date.weekday());
|
||||||
<div class="weekday-header">{"Sat"}</div>
|
|
||||||
|
html! {
|
||||||
|
<div class={classes!("week-day-header", if is_today { Some("today") } else { None })}>
|
||||||
|
<div class="weekday-name">{weekday_name}</div>
|
||||||
|
<div class="day-number">{date.day()}</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}).collect::<Html>()
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
// Week days
|
// Scrollable content area with time grid
|
||||||
{
|
<div class="week-content">
|
||||||
week_days.iter().map(|date| {
|
<div class="time-grid">
|
||||||
let is_today = *date == props.today;
|
// Time labels
|
||||||
let day_events = props.events.get(date).cloned().unwrap_or_default();
|
<div class="time-labels">
|
||||||
|
{
|
||||||
html! {
|
time_labels.iter().enumerate().map(|(index, time)| {
|
||||||
<div
|
let is_final = index == time_labels.len() - 1;
|
||||||
class={classes!("calendar-day", if is_today { Some("today") } else { None })}
|
html! {
|
||||||
oncontextmenu={
|
<div class={classes!("time-label", if is_final { Some("final-boundary") } else { None })}>
|
||||||
if let Some(callback) = &props.on_calendar_context_menu {
|
{time}
|
||||||
let callback = callback.clone();
|
</div>
|
||||||
let date = *date;
|
|
||||||
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
|
||||||
e.prevent_default();
|
|
||||||
callback.emit((e, date));
|
|
||||||
}))
|
|
||||||
} else {
|
|
||||||
None
|
|
||||||
}
|
}
|
||||||
}
|
}).collect::<Html>()
|
||||||
>
|
}
|
||||||
<div class="day-number">{date.day()}</div>
|
</div>
|
||||||
<div class="day-events">
|
|
||||||
{
|
// Day columns
|
||||||
day_events.iter().map(|event| {
|
<div class="week-days-grid">
|
||||||
let event_color = get_event_color(event);
|
{
|
||||||
let is_refreshing = props.refreshing_event_uid.as_ref() == Some(&event.uid);
|
week_days.iter().map(|date| {
|
||||||
|
let is_today = *date == props.today;
|
||||||
let onclick = {
|
let day_events = props.events.get(date).cloned().unwrap_or_default();
|
||||||
let on_event_click = props.on_event_click.clone();
|
|
||||||
let event = event.clone();
|
html! {
|
||||||
Callback::from(move |_: MouseEvent| {
|
<div
|
||||||
on_event_click.emit(event.clone());
|
class={classes!("week-day-column", if is_today { Some("today") } else { None })}
|
||||||
})
|
oncontextmenu={
|
||||||
};
|
if let Some(callback) = &props.on_calendar_context_menu {
|
||||||
|
|
||||||
let oncontextmenu = {
|
|
||||||
if let Some(callback) = &props.on_event_context_menu {
|
|
||||||
let callback = callback.clone();
|
let callback = callback.clone();
|
||||||
let event = event.clone();
|
let date = *date;
|
||||||
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
||||||
e.prevent_default();
|
e.prevent_default();
|
||||||
callback.emit((e, event.clone()));
|
callback.emit((e, date));
|
||||||
}))
|
}))
|
||||||
} else {
|
} else {
|
||||||
None
|
None
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
html! {
|
|
||||||
<div
|
|
||||||
class={classes!("event-box", if is_refreshing { Some("refreshing") } else { None })}
|
|
||||||
style={format!("background-color: {}", event_color)}
|
|
||||||
{onclick}
|
|
||||||
{oncontextmenu}
|
|
||||||
>
|
|
||||||
{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
}).collect::<Html>()
|
>
|
||||||
|
// Time slot backgrounds - 24 full hour slots + 1 boundary slot
|
||||||
|
{
|
||||||
|
(0..24).map(|_hour| {
|
||||||
|
html! {
|
||||||
|
<div class="time-slot">
|
||||||
|
<div class="time-slot-half"></div>
|
||||||
|
<div class="time-slot-half"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}).collect::<Html>()
|
||||||
|
}
|
||||||
|
// Final boundary slot to match the final time label
|
||||||
|
<div class="time-slot boundary-slot"></div>
|
||||||
|
|
||||||
|
// Events positioned absolutely
|
||||||
|
<div class="events-container">
|
||||||
|
{
|
||||||
|
day_events.iter().map(|event| {
|
||||||
|
let event_color = get_event_color(event);
|
||||||
|
let is_refreshing = props.refreshing_event_uid.as_ref() == Some(&event.uid);
|
||||||
|
|
||||||
|
let onclick = {
|
||||||
|
let on_event_click = props.on_event_click.clone();
|
||||||
|
let event = event.clone();
|
||||||
|
Callback::from(move |_: MouseEvent| {
|
||||||
|
on_event_click.emit(event.clone());
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
let oncontextmenu = {
|
||||||
|
if let Some(callback) = &props.on_event_context_menu {
|
||||||
|
let callback = callback.clone();
|
||||||
|
let event = event.clone();
|
||||||
|
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
||||||
|
e.prevent_default();
|
||||||
|
callback.emit((e, event.clone()));
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// For now, position events at top of day (we'll improve this later with actual time positioning)
|
||||||
|
html! {
|
||||||
|
<div
|
||||||
|
class={classes!("week-event", if is_refreshing { Some("refreshing") } else { None })}
|
||||||
|
style={format!("background-color: {}; top: {}px;", event_color, 60)} // Placeholder positioning
|
||||||
|
{onclick}
|
||||||
|
{oncontextmenu}
|
||||||
|
>
|
||||||
|
{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}).collect::<Html>()
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
}).collect::<Html>()
|
||||||
</div>
|
}
|
||||||
}
|
</div>
|
||||||
}).collect::<Html>()
|
</div>
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -134,4 +195,16 @@ fn get_start_of_week(date: NaiveDate) -> NaiveDate {
|
|||||||
Weekday::Sat => 6,
|
Weekday::Sat => 6,
|
||||||
};
|
};
|
||||||
date - Duration::days(days_from_sunday)
|
date - Duration::days(days_from_sunday)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn get_weekday_name(weekday: Weekday) -> &'static str {
|
||||||
|
match weekday {
|
||||||
|
Weekday::Sun => "Sun",
|
||||||
|
Weekday::Mon => "Mon",
|
||||||
|
Weekday::Tue => "Tue",
|
||||||
|
Weekday::Wed => "Wed",
|
||||||
|
Weekday::Thu => "Thu",
|
||||||
|
Weekday::Fri => "Fri",
|
||||||
|
Weekday::Sat => "Sat",
|
||||||
|
}
|
||||||
}
|
}
|
||||||
184
styles.css
184
styles.css
@@ -462,7 +462,189 @@ body {
|
|||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Week Grid */
|
/* Week View Container */
|
||||||
|
.week-view-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Week Header */
|
||||||
|
.week-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px repeat(7, 1fr);
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-bottom: 2px solid #e9ecef;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-gutter {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-right: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-header {
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px solid #e9ecef;
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-header.today {
|
||||||
|
background: #e3f2fd;
|
||||||
|
color: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weekday-name {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-header .day-number {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-header.today .weekday-name {
|
||||||
|
color: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Week Content */
|
||||||
|
.week-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 1fr;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Time Labels */
|
||||||
|
.time-labels {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-right: 1px solid #e9ecef;
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-label {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #666;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-label.final-boundary {
|
||||||
|
height: 60px; /* Keep same height but this marks the end boundary */
|
||||||
|
border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */
|
||||||
|
color: #999; /* Lighter color to indicate it's the boundary */
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Week Days Grid */
|
||||||
|
.week-days-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-column {
|
||||||
|
position: relative;
|
||||||
|
border-right: 1px solid #e9ecef;
|
||||||
|
min-height: 1500px; /* 25 time labels × 60px = 1500px total */
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-column:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day-column.today {
|
||||||
|
background: #fafffe;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Time Slots */
|
||||||
|
.time-slot {
|
||||||
|
height: 60px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-slot-half {
|
||||||
|
height: 30px;
|
||||||
|
border-bottom: 1px dotted #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-slot-half:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-slot.boundary-slot {
|
||||||
|
height: 60px; /* Match the final time label height */
|
||||||
|
border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */
|
||||||
|
background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Events Container */
|
||||||
|
.events-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Week Events */
|
||||||
|
.week-event {
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
right: 4px;
|
||||||
|
min-height: 20px;
|
||||||
|
background: #3B82F6;
|
||||||
|
color: white;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
z-index: 3;
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
|
||||||
|
font-weight: 500;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-event:hover {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
z-index: 4;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-event.refreshing {
|
||||||
|
animation: pulse 1.5s ease-in-out infinite alternate;
|
||||||
|
border-color: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legacy Week Grid (for backward compatibility) */
|
||||||
.week-grid {
|
.week-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(7, 1fr);
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
|||||||
Reference in New Issue
Block a user