Add print preview modal with hour range selection

Implements comprehensive print functionality for calendar views:
- Print preview modal with live preview and zoom controls
- Hour range selection for week view (start/end hours)
- Print-specific CSS to hide UI elements and optimize layout
- Event repositioning to align with visible time labels
- Support for both 30-minute and 15-minute time increments
- Mouse wheel zoom functionality in preview

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-08 14:55:18 -04:00
parent 927cd7d2bb
commit 4cbc495c48
9 changed files with 1778 additions and 6 deletions

View File

@@ -438,13 +438,13 @@ pub fn week_view(props: &WeekViewProps) -> Html {
// Time labels
<div class={classes!("time-labels", if props.time_increment == 15 { Some("quarter-mode") } else { None })}>
{
time_labels.iter().map(|time| {
time_labels.iter().enumerate().map(|(hour, time)| {
let is_quarter_mode = props.time_increment == 15;
html! {
<div class={classes!(
"time-label",
if is_quarter_mode { Some("quarter-mode") } else { None }
)}>
)} data-hour={hour.to_string()}>
{time}
</div>
}
@@ -701,10 +701,10 @@ pub fn week_view(props: &WeekViewProps) -> Html {
>
// Time slot backgrounds - 24 hour slots to represent full day
{
(0..24).map(|_hour| {
(0..24).map(|hour| {
let slots_per_hour = 60 / props.time_increment;
html! {
<div class={classes!("time-slot", if props.time_increment == 15 { Some("quarter-mode") } else { None })}>
<div class={classes!("time-slot", if props.time_increment == 15 { Some("quarter-mode") } else { None })} data-hour={hour.to_string()}>
{
(0..slots_per_hour).map(|_slot| {
let slot_class = if props.time_increment == 15 {