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()
|
||||
};
|
||||
|
||||
// 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! {
|
||||
<div class="week-grid">
|
||||
// Weekday headers
|
||||
<div class="weekday-header">{"Sun"}</div>
|
||||
<div class="weekday-header">{"Mon"}</div>
|
||||
<div class="weekday-header">{"Tue"}</div>
|
||||
<div class="weekday-header">{"Wed"}</div>
|
||||
<div class="weekday-header">{"Thu"}</div>
|
||||
<div class="weekday-header">{"Fri"}</div>
|
||||
<div class="weekday-header">{"Sat"}</div>
|
||||
<div class="week-view-container">
|
||||
// Header with weekday names and dates
|
||||
<div class="week-header">
|
||||
<div class="time-gutter"></div>
|
||||
{
|
||||
week_days.iter().map(|date| {
|
||||
let is_today = *date == props.today;
|
||||
let weekday_name = get_weekday_name(date.weekday());
|
||||
|
||||
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
|
||||
{
|
||||
week_days.iter().map(|date| {
|
||||
let is_today = *date == props.today;
|
||||
let day_events = props.events.get(date).cloned().unwrap_or_default();
|
||||
|
||||
html! {
|
||||
<div
|
||||
class={classes!("calendar-day", if is_today { Some("today") } else { None })}
|
||||
oncontextmenu={
|
||||
if let Some(callback) = &props.on_calendar_context_menu {
|
||||
let callback = callback.clone();
|
||||
let date = *date;
|
||||
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
||||
e.prevent_default();
|
||||
callback.emit((e, date));
|
||||
}))
|
||||
} else {
|
||||
None
|
||||
// Scrollable content area with time grid
|
||||
<div class="week-content">
|
||||
<div class="time-grid">
|
||||
// Time labels
|
||||
<div class="time-labels">
|
||||
{
|
||||
time_labels.iter().enumerate().map(|(index, time)| {
|
||||
let is_final = index == time_labels.len() - 1;
|
||||
html! {
|
||||
<div class={classes!("time-label", if is_final { Some("final-boundary") } else { None })}>
|
||||
{time}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
>
|
||||
<div class="day-number">{date.day()}</div>
|
||||
<div class="day-events">
|
||||
{
|
||||
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 {
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
|
||||
// Day columns
|
||||
<div class="week-days-grid">
|
||||
{
|
||||
week_days.iter().map(|date| {
|
||||
let is_today = *date == props.today;
|
||||
let day_events = props.events.get(date).cloned().unwrap_or_default();
|
||||
|
||||
html! {
|
||||
<div
|
||||
class={classes!("week-day-column", if is_today { Some("today") } else { None })}
|
||||
oncontextmenu={
|
||||
if let Some(callback) = &props.on_calendar_context_menu {
|
||||
let callback = callback.clone();
|
||||
let event = event.clone();
|
||||
let date = *date;
|
||||
Some(Callback::from(move |e: web_sys::MouseEvent| {
|
||||
e.prevent_default();
|
||||
callback.emit((e, event.clone()));
|
||||
callback.emit((e, date));
|
||||
}))
|
||||
} else {
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -134,4 +195,16 @@ fn get_start_of_week(date: NaiveDate) -> NaiveDate {
|
||||
Weekday::Sat => 6,
|
||||
};
|
||||
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",
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user