feat: v4.0 - multi-day horizontal canvas, duration input, overnight blocks, PDF horizontal layout

app/api/scenario.py

@@ -33,8 +33,9 @@ async def validate_scenario(doc: ScenarioDocument):
     for i, block in enumerate(doc.blocks):
         if block.type_id not in type_ids:
             errors.append(f"Block {i+1}: unknown type '{block.type_id}'")
-        if block.start >= block.end:
-            errors.append(f"Block {i+1}: start time must be before end time")
+        if block.start == block.end:
+            errors.append(f"Block {i+1}: start time must differ from end time")
+        # Note: end < start is allowed for overnight blocks (block crosses midnight)
 
     return ValidationResponse(valid=len(errors) == 0, errors=errors)
 

app/config.py

@@ -1,5 +1,5 @@
 """Application configuration."""
 
-VERSION = "3.0.0"
+VERSION = "4.0.0"
 MAX_FILE_SIZE_MB = 10
 DEFAULT_COLOR = "#ffffff"

app/core/pdf_generator.py

@@ -1,6 +1,7 @@
 """
-PDF generation for Scenar Creator v3 using ReportLab Canvas API.
-Generates A4 landscape timetable — always exactly one page.
+PDF generation for Scenar Creator v4 using ReportLab Canvas API.
+Layout: rows = days, columns = time slots (15 min).
+Always exactly one page, A4 landscape.
 """
 
 from io import BytesIO
@@ -18,25 +19,25 @@ logger = logging.getLogger(__name__)
 PAGE_W, PAGE_H = landscape(A4)
 MARGIN = 10 * mm
 
-# Color palette for UI
+# Colors
 HEADER_BG = (0.118, 0.161, 0.231)   # dark navy
-GRID_LINE = (0.85, 0.85, 0.85)
 HEADER_TEXT = (1.0, 1.0, 1.0)
-BODY_ALT = (0.97, 0.97, 0.97)
+AXIS_BG = (0.96, 0.96, 0.97)
+AXIS_TEXT = (0.45, 0.45, 0.45)
+GRID_HOUR = (0.78, 0.78, 0.82)
+GRID_15MIN = (0.90, 0.90, 0.93)
+ALT_ROW = (0.975, 0.975, 0.98)
 FOOTER_TEXT = (0.6, 0.6, 0.6)
-LABEL_TEXT = (0.35, 0.35, 0.35)
+BORDER = (0.82, 0.82, 0.86)
 
 
 def hex_to_rgb(hex_color: str) -> tuple:
-    h = hex_color.lstrip('#')
+    h = (hex_color or '#888888').lstrip('#')
     if len(h) == 8:
         h = h[2:]
     if len(h) != 6:
-        return (0.8, 0.8, 0.8)
-    r = int(h[0:2], 16) / 255.0
-    g = int(h[2:4], 16) / 255.0
-    b = int(h[4:6], 16) / 255.0
-    return (r, g, b)
+        return (0.7, 0.7, 0.7)
+    return (int(h[0:2], 16) / 255.0, int(h[2:4], 16) / 255.0, int(h[4:6], 16) / 255.0)
 
 
 def is_light(hex_color: str) -> bool:
@@ -44,13 +45,14 @@ def is_light(hex_color: str) -> bool:
     return (0.299 * r + 0.587 * g + 0.114 * b) > 0.6
 
 
-def time_to_minutes(s: str) -> int:
-    h, m = s.split(":")
-    return int(h) * 60 + int(m)
+def time_to_min(s: str) -> int:
+    parts = s.split(':')
+    return int(parts[0]) * 60 + int(parts[1])
 
 
 def fmt_time(total_minutes: int) -> str:
-    return f"{total_minutes // 60:02d}:{total_minutes % 60:02d}"
+    norm = total_minutes % 1440
+    return f"{norm // 60:02d}:{norm % 60:02d}"
 
 
 def set_fill(c, rgb):
@@ -61,33 +63,32 @@ def set_stroke(c, rgb):
     c.setStrokeColorRGB(*rgb)
 
 
-def draw_rect_filled(c, x, y, w, h, fill_rgb, stroke_rgb=None, stroke_width=0.5):
-    set_fill(c, fill_rgb)
-    if stroke_rgb:
-        set_stroke(c, stroke_rgb)
-        c.setLineWidth(stroke_width)
+def fill_rect(c, x, y, w, h, fill, stroke=None, sw=0.4):
+    set_fill(c, fill)
+    if stroke:
+        set_stroke(c, stroke)
+        c.setLineWidth(sw)
         c.rect(x, y, w, h, fill=1, stroke=1)
     else:
         c.rect(x, y, w, h, fill=1, stroke=0)
 
 
-def draw_text_clipped(c, text, x, y, w, h, font, size, rgb, align="center"):
-    """Draw text centered/left in a bounding box, clipped to width."""
+def draw_clipped_text(c, text, x, y, w, h, font, size, rgb, align='center'):
+    if not text:
+        return
     c.saveState()
-    c.rect(x, y, w, h, fill=0, stroke=0)
-    c.clipPath(c.beginPath(), stroke=0, fill=0)
-    # Use a proper clip path
     p = c.beginPath()
-    p.rect(x, y, w, h)
+    p.rect(x + 1, y, w - 2, h)
     c.clipPath(p, stroke=0, fill=0)
     set_fill(c, rgb)
     c.setFont(font, size)
-    if align == "center":
-        c.drawCentredString(x + w / 2, y + (h - size) / 2 + 1, text)
-    elif align == "right":
-        c.drawRightString(x + w - 2, y + (h - size) / 2 + 1, text)
+    ty = y + (h - size) / 2
+    if align == 'center':
+        c.drawCentredString(x + w / 2, ty, text)
+    elif align == 'right':
+        c.drawRightString(x + w - 2, ty, text)
     else:
-        c.drawString(x + 2, y + (h - size) / 2 + 1, text)
+        c.drawString(x + 2, ty, text)
     c.restoreState()
 
 
@@ -100,218 +101,251 @@ def generate_pdf(doc) -> bytes:
         if block.type_id not in type_map:
             raise ScenarsError(f"Missing type definition: '{block.type_id}'")
 
-    # Group by date
-    blocks_by_date = defaultdict(list)
-    for b in doc.blocks:
-        blocks_by_date[b.date].append(b)
-    sorted_dates = sorted(blocks_by_date.keys())
+    # Collect dates + time range
+    sorted_dates = doc.get_sorted_dates()
+    num_days = len(sorted_dates)
 
-    # Time range (round to 30-min boundaries)
-    all_starts = [time_to_minutes(b.start) for b in doc.blocks]
-    all_ends = [time_to_minutes(b.end) for b in doc.blocks]
-    t_start = (min(all_starts) // 30) * 30
-    t_end = ((max(all_ends) + 29) // 30) * 30
-    slot_minutes = 30
-    num_slots = (t_end - t_start) // slot_minutes
+    all_starts = [time_to_min(b.start) for b in doc.blocks]
+    all_ends_raw = []
+    for b in doc.blocks:
+        s = time_to_min(b.start)
+        e = time_to_min(b.end)
+        if e <= s:
+            e += 24 * 60   # overnight: extend past midnight
+        all_ends_raw.append(e)
+
+    t_start = (min(all_starts) // 60) * 60
+    t_end = ((max(all_ends_raw) + 14) // 15) * 15
+    # Guard: clamp to reasonable range
+    t_start = max(0, t_start)
+    t_end = min(t_start + 24 * 60, t_end)
+    total_min = t_end - t_start
 
     buf = BytesIO()
     c = rl_canvas.Canvas(buf, pagesize=landscape(A4))
 
-    # ── Layout constants ──────────────────────────────────────────────
+    # ── Layout ────────────────────────────────────────────────────────
     x0 = MARGIN
     y_top = PAGE_H - MARGIN
 
-    # Header block
-    title_size = 16
-    subtitle_size = 10
-    info_size = 8
-    header_h = title_size + 4
+    # Header block (title + subtitle + info)
+    TITLE_SIZE = 16
+    SUB_SIZE = 10
+    INFO_SIZE = 8
 
-    has_subtitle = bool(doc.event.subtitle)
-    has_info = bool(doc.event.date or doc.event.location)
-    if has_subtitle:
-        header_h += subtitle_size + 2
+    header_h = TITLE_SIZE + 5
+    if doc.event.subtitle:
+        header_h += SUB_SIZE + 3
+    has_info = bool(doc.event.date or doc.event.date_from or doc.event.location)
     if has_info:
-        header_h += info_size + 2
-    header_h += 4  # bottom padding
+        header_h += INFO_SIZE + 3
+    header_h += 4
 
-    # Legend block (one row per type)
-    legend_item_h = 12
-    legend_h = len(doc.program_types) * legend_item_h + 6
+    # Legend: one row per type, multi-column
+    LEGEND_ITEM_H = 12
+    LEGEND_BOX_W = 10 * mm
+    LEGEND_TEXT_W = 48 * mm
+    LEGEND_STRIDE = LEGEND_BOX_W + LEGEND_TEXT_W + 3 * mm
+    available_w_for_legend = PAGE_W - 2 * MARGIN
+    legend_cols = max(1, int(available_w_for_legend / LEGEND_STRIDE))
+    legend_rows = (len(doc.program_types) + legend_cols - 1) // legend_cols
+    LEGEND_H = legend_rows * LEGEND_ITEM_H + LEGEND_ITEM_H + 4  # +label row
 
-    # Footer
-    footer_h = 10
+    FOOTER_H = 10
+    TIME_AXIS_H = 18
+    DATE_COL_W = 18 * mm
 
-    # Available height for timetable
-    avail_h = PAGE_H - 2 * MARGIN - header_h - legend_h - footer_h - 6
-    row_h = max(8, avail_h / max(num_slots, 1))
+    # Available area for the timetable grid
+    avail_h = PAGE_H - 2 * MARGIN - header_h - LEGEND_H - FOOTER_H - TIME_AXIS_H - 6
+    row_h = max(10, avail_h / max(num_days, 1))
 
-    # Time axis width
-    time_col_w = 14 * mm
-    # Column widths for dates
-    avail_w = PAGE_W - 2 * MARGIN - time_col_w
-    day_col_w = avail_w / max(len(sorted_dates), 1)
+    avail_w = PAGE_W - 2 * MARGIN - DATE_COL_W
+    # 15-min slot width
+    num_15min_slots = total_min // 15
+    slot_w = avail_w / max(num_15min_slots, 1)
 
-    # Font sizes scale with row height
-    cell_font_size = max(5.5, min(8.0, row_h * 0.45))
-    time_font_size = max(5.0, min(7.0, row_h * 0.42))
-    header_col_size = max(6.0, min(9.0, day_col_w * 0.08))
+    # font sizes scale with row/col
+    date_font = max(5.5, min(8.5, row_h * 0.38))
+    block_title_font = max(5.0, min(8.0, min(row_h, slot_w * 4) * 0.38))
+    block_time_font = max(4.0, min(6.0, block_title_font - 1.0))
+    time_axis_font = max(5.5, min(8.0, slot_w * 3))
 
     # ── Draw header ───────────────────────────────────────────────────
     y = y_top
-    c.setFont("Helvetica-Bold", title_size)
+    c.setFont('Helvetica-Bold', TITLE_SIZE)
     set_fill(c, HEADER_BG)
-    c.drawString(x0, y - title_size, doc.event.title)
-    y -= title_size + 4
+    c.drawString(x0, y - TITLE_SIZE, doc.event.title)
+    y -= TITLE_SIZE + 5
 
-    if has_subtitle:
-        c.setFont("Helvetica", subtitle_size)
+    if doc.event.subtitle:
+        c.setFont('Helvetica', SUB_SIZE)
         set_fill(c, (0.4, 0.4, 0.4))
-        c.drawString(x0, y - subtitle_size, doc.event.subtitle)
-        y -= subtitle_size + 2
+        c.drawString(x0, y - SUB_SIZE, doc.event.subtitle)
+        y -= SUB_SIZE + 3
 
     if has_info:
         parts = []
-        if doc.event.date:
-            parts.append(f"Datum: {doc.event.date}")
+        date_display = doc.event.date_from or doc.event.date
+        date_to_display = doc.event.date_to
+        if date_display:
+            if date_to_display and date_to_display != date_display:
+                parts.append(f'Datum: {date_display} – {date_to_display}')
+            else:
+                parts.append(f'Datum: {date_display}')
         if doc.event.location:
-            parts.append(f"Místo: {doc.event.location}")
-        c.setFont("Helvetica", info_size)
+            parts.append(f'Místo: {doc.event.location}')
+        c.setFont('Helvetica', INFO_SIZE)
         set_fill(c, (0.5, 0.5, 0.5))
-        c.drawString(x0, y - info_size, " | ".join(parts))
-        y -= info_size + 2
+        c.drawString(x0, y - INFO_SIZE, ' | '.join(parts))
+        y -= INFO_SIZE + 3
+    y -= 4  # padding
 
-    y -= 6  # padding before table
+    # ── Time axis header ──────────────────────────────────────────────
+    table_top = y - TIME_AXIS_H
+
+    # Date column header (empty corner)
+    fill_rect(c, x0, table_top, DATE_COL_W, TIME_AXIS_H, AXIS_BG, BORDER, 0.4)
+
+    # Time labels (only whole hours)
+    for m in range(t_start, t_end + 1, 60):
+        slot_idx = (m - t_start) // 15
+        tx = x0 + DATE_COL_W + slot_idx * slot_w
+        # tick line
+        set_stroke(c, GRID_HOUR)
+        c.setLineWidth(0.5)
+        c.line(tx, table_top, tx, table_top + TIME_AXIS_H)
+        # label
+        label = fmt_time(m)
+        c.setFont('Helvetica', time_axis_font)
+        set_fill(c, AXIS_TEXT)
+        c.drawCentredString(tx, table_top + (TIME_AXIS_H - time_axis_font) / 2, label)
+
+    # Right border of time axis
+    fill_rect(c, x0, table_top, DATE_COL_W + avail_w, TIME_AXIS_H, AXIS_BG, BORDER, 0.3)
+    # Re-draw to not cover tick lines: draw border rectangle only
+    set_stroke(c, BORDER)
+    c.setLineWidth(0.4)
+    c.rect(x0, table_top, DATE_COL_W + avail_w, TIME_AXIS_H, fill=0, stroke=1)
+    # Re-draw time labels on top of border rect
+    for m in range(t_start, t_end + 1, 60):
+        slot_idx = (m - t_start) // 15
+        tx = x0 + DATE_COL_W + slot_idx * slot_w
+        c.setFont('Helvetica', time_axis_font)
+        set_fill(c, AXIS_TEXT)
+        c.drawCentredString(tx, table_top + (TIME_AXIS_H - time_axis_font) / 2, fmt_time(m))
+
+    # ── Draw day rows ─────────────────────────────────────────────────
+    blocks_by_date = defaultdict(list)
+    for b in doc.blocks:
+        blocks_by_date[b.date].append(b)
 
-    # ── Draw column headers ───────────────────────────────────────────
-    col_header_h = 16
-    # Time axis header cell
-    draw_rect_filled(c, x0, y - col_header_h, time_col_w, col_header_h, HEADER_BG)
-    # Date header cells
     for di, date_key in enumerate(sorted_dates):
-        cx = x0 + time_col_w + di * day_col_w
-        draw_rect_filled(c, cx, y - col_header_h, day_col_w, col_header_h, HEADER_BG, GRID_LINE)
-        c.saveState()
-        p = c.beginPath()
-        p.rect(cx + 1, y - col_header_h + 1, day_col_w - 2, col_header_h - 2)
-        c.clipPath(p, stroke=0, fill=0)
-        set_fill(c, HEADER_TEXT)
-        c.setFont("Helvetica-Bold", header_col_size)
-        c.drawCentredString(cx + day_col_w / 2, y - col_header_h + (col_header_h - header_col_size) / 2, date_key)
-        c.restoreState()
+        row_y = table_top - (di + 1) * row_h
 
-    y -= col_header_h
+        # Alternating row background
+        row_bg = (1.0, 1.0, 1.0) if di % 2 == 0 else ALT_ROW
+        fill_rect(c, x0 + DATE_COL_W, row_y, avail_w, row_h, row_bg, BORDER, 0.3)
 
-    # ── Draw time grid ────────────────────────────────────────────────
-    table_top = y
-    table_bottom = y - num_slots * row_h
+        # Date label cell
+        fill_rect(c, x0, row_y, DATE_COL_W, row_h, AXIS_BG, BORDER, 0.4)
+        draw_clipped_text(c, date_key, x0, row_y, DATE_COL_W, row_h,
+                          'Helvetica-Bold', date_font, AXIS_TEXT, 'center')
 
-    for slot_i in range(num_slots):
-        slot_min = t_start + slot_i * slot_minutes
-        slot_label = fmt_time(slot_min)
-        row_y = y - slot_i * row_h
+        # Vertical grid lines (15-min slots, hour lines darker)
+        for slot_i in range(num_15min_slots + 1):
+            min_at_slot = t_start + slot_i * 15
+            tx = x0 + DATE_COL_W + slot_i * slot_w
+            is_hour = (min_at_slot % 60 == 0)
+            line_col = GRID_HOUR if is_hour else GRID_15MIN
+            set_stroke(c, line_col)
+            c.setLineWidth(0.5 if is_hour else 0.25)
+            c.line(tx, row_y, tx, row_y + row_h)
 
-        # Alternating row bg for day columns
-        alt_bg = BODY_ALT if slot_i % 2 == 1 else (1.0, 1.0, 1.0)
-        for di in range(len(sorted_dates)):
-            cx = x0 + time_col_w + di * day_col_w
-            draw_rect_filled(c, cx, row_y - row_h, day_col_w, row_h, alt_bg, GRID_LINE, 0.3)
-
-        # Time axis cell
-        draw_rect_filled(c, x0, row_y - row_h, time_col_w, row_h, (0.96, 0.96, 0.96), GRID_LINE, 0.3)
-        set_fill(c, LABEL_TEXT)
-        c.setFont("Helvetica", time_font_size)
-        c.drawRightString(x0 + time_col_w - 2, row_y - row_h + (row_h - time_font_size) / 2, slot_label)
-
-    # ── Draw program blocks ───────────────────────────────────────────
-    for di, date_key in enumerate(sorted_dates):
-        cx = x0 + time_col_w + di * day_col_w
+        # Draw program blocks
         for block in blocks_by_date[date_key]:
-            b_start = time_to_minutes(block.start)
-            b_end = time_to_minutes(block.end)
-            if b_start < t_start or b_end > t_end:
+            s = time_to_min(block.start)
+            e = time_to_min(block.end)
+            overnight = e <= s
+            if overnight:
+                e_draw = min(t_end, s + (e + 1440 - s))  # cap at t_end
+            else:
+                e_draw = e
+
+            cs = max(s, t_start)
+            ce = min(e_draw, t_end)
+            if ce <= cs:
                 continue
-            offset_slots_start = (b_start - t_start) / slot_minutes
-            offset_slots_end = (b_end - t_start) / slot_minutes
-            block_top = table_top - offset_slots_start * row_h
-            block_bot = table_top - offset_slots_end * row_h
-            block_h = block_top - block_bot
+
+            bx = x0 + DATE_COL_W + (cs - t_start) / 15 * slot_w
+            bw = (ce - cs) / 15 * slot_w
 
             pt = type_map[block.type_id]
             fill_rgb = hex_to_rgb(pt.color)
-            text_rgb = (0.1, 0.1, 0.1) if is_light(pt.color) else (1.0, 1.0, 1.0)
-
-            # Block rectangle with slight inset
-            inset = 0.5
-            bx = cx + inset
-            by = block_bot + inset
-            bw = day_col_w - 2 * inset
-            bh = block_h - 2 * inset
+            text_rgb = (0.08, 0.08, 0.08) if is_light(pt.color) else (1.0, 1.0, 1.0)
 
+            inset = 1.0
             c.saveState()
-            draw_rect_filled(c, bx, by, bw, bh, fill_rgb, GRID_LINE, 0.5)
+            # Draw block rectangle
+            set_fill(c, fill_rgb)
+            set_stroke(c, (0.0, 0.0, 0.0) if False else fill_rgb)  # no border stroke
+            c.roundRect(bx + inset, row_y + inset, bw - 2 * inset, row_h - 2 * inset,
+                        2, fill=1, stroke=0)
 
-            # Clip text to block
+            # Draw text clipped to block
             p = c.beginPath()
-            p.rect(bx + 1, by + 1, bw - 2, bh - 2)
+            p.rect(bx + inset + 1, row_y + inset + 1, bw - 2 * inset - 2, row_h - 2 * inset - 2)
             c.clipPath(p, stroke=0, fill=0)
 
             set_fill(c, text_rgb)
-            lines = [block.title]
-            if block.responsible:
-                lines.append(block.responsible)
 
-            if len(lines) == 1 or bh < cell_font_size * 2.5:
-                c.setFont("Helvetica-Bold", cell_font_size)
-                c.drawCentredString(bx + bw / 2, by + (bh - cell_font_size) / 2, lines[0])
+            title_line = block.title + (' →' if overnight else '')
+            if row_h > block_title_font * 2.2 and block.responsible:
+                # Two lines: title + responsible
+                c.setFont('Helvetica-Bold', block_title_font)
+                c.drawCentredString(bx + bw / 2, row_y + row_h / 2 + 1, title_line)
+                c.setFont('Helvetica', block_time_font)
+                set_fill(c, (text_rgb[0] * 0.8, text_rgb[1] * 0.8, text_rgb[2] * 0.8)
+                         if is_light(pt.color) else (0.85, 0.85, 0.85))
+                c.drawCentredString(bx + bw / 2, row_y + row_h / 2 - block_title_font + 1,
+                                    block.responsible)
             else:
-                c.setFont("Helvetica-Bold", cell_font_size)
-                c.drawCentredString(bx + bw / 2, by + bh / 2 + 1, lines[0])
-                c.setFont("Helvetica", max(4.5, cell_font_size - 1.0))
-                set_fill(c, (text_rgb[0] * 0.85, text_rgb[1] * 0.85, text_rgb[2] * 0.85) if is_light(pt.color)
-                         else (0.9, 0.9, 0.9))
-                c.drawCentredString(bx + bw / 2, by + bh / 2 - cell_font_size + 1, lines[1])
+                c.setFont('Helvetica-Bold', block_title_font)
+                c.drawCentredString(bx + bw / 2, row_y + (row_h - block_title_font) / 2, title_line)
 
             c.restoreState()
 
     # ── Legend ────────────────────────────────────────────────────────
-    legend_y = table_bottom - 8
-    legend_x = x0
-    legend_label_h = legend_item_h
+    legend_y_top = table_top - num_days * row_h - 6
 
-    c.setFont("Helvetica-Bold", 7)
+    c.setFont('Helvetica-Bold', 7)
     set_fill(c, HEADER_BG)
-    c.drawString(legend_x, legend_y, "Legenda:")
-    legend_y -= 4
-
-    legend_box_w = 10 * mm
-    legend_text_w = 50 * mm
-    legend_col_stride = legend_box_w + legend_text_w + 4 * mm
-    cols = max(1, int((PAGE_W - 2 * MARGIN) / legend_col_stride))
+    c.drawString(x0, legend_y_top, 'Legenda:')
+    legend_y_top -= LEGEND_ITEM_H
 
     for i, pt in enumerate(doc.program_types):
-        col = i % cols
-        row_idx = i // cols
-        lx = legend_x + col * legend_col_stride
-        ly = legend_y - row_idx * legend_label_h
+        col = i % legend_cols
+        row_idx = i // legend_cols
+        lx = x0 + col * LEGEND_STRIDE
+        ly = legend_y_top - row_idx * LEGEND_ITEM_H
 
         fill_rgb = hex_to_rgb(pt.color)
-        text_rgb = (0.1, 0.1, 0.1) if is_light(pt.color) else (1.0, 1.0, 1.0)
 
-        draw_rect_filled(c, lx, ly - legend_label_h + 2, legend_box_w, legend_label_h - 2, fill_rgb, GRID_LINE, 0.3)
-        c.setFont("Helvetica-Bold", 6.5)
-        set_fill(c, text_rgb)
-        c.drawCentredString(lx + legend_box_w / 2, ly - legend_label_h + 2 + (legend_label_h - 2 - 6.5) / 2, pt.name[:10])
+        # Colored square (NO text inside, just the color)
+        fill_rect(c, lx, ly - LEGEND_ITEM_H + 2, LEGEND_BOX_W, LEGEND_ITEM_H - 2,
+                  fill_rgb, BORDER, 0.3)
 
-        c.setFont("Helvetica", 7)
-        set_fill(c, LABEL_TEXT)
-        c.drawString(lx + legend_box_w + 2, ly - legend_label_h + 2 + (legend_label_h - 2 - 7) / 2, pt.name)
+        # Type name NEXT TO the square
+        c.setFont('Helvetica', 7)
+        set_fill(c, (0.15, 0.15, 0.15))
+        c.drawString(lx + LEGEND_BOX_W + 3,
+                     ly - LEGEND_ITEM_H + 2 + (LEGEND_ITEM_H - 2 - 7) / 2,
+                     pt.name)
 
     # ── Footer ────────────────────────────────────────────────────────
-    gen_date = datetime.now().strftime("%d.%m.%Y %H:%M")
-    c.setFont("Helvetica-Oblique", 6.5)
+    gen_date = datetime.now().strftime('%d.%m.%Y %H:%M')
+    c.setFont('Helvetica-Oblique', 6.5)
     set_fill(c, FOOTER_TEXT)
-    c.drawCentredString(PAGE_W / 2, MARGIN - 2, f"Vygenerováno Scenár Creatorem | {gen_date}")
+    c.drawCentredString(PAGE_W / 2, MARGIN - 2, f'Vygenerováno Scenár Creatorem v4 | {gen_date}')
 
     c.save()
     return buf.getvalue()

app/models/event.py

@@ -1,6 +1,7 @@
-"""Pydantic v2 models for Scenar Creator v3."""
+"""Pydantic v2 models for Scenar Creator v4."""
 
 import uuid
+from datetime import date as date_type, timedelta
 from typing import List, Optional
 
 from pydantic import BaseModel, Field
@@ -8,9 +9,9 @@ from pydantic import BaseModel, Field
 
 class Block(BaseModel):
     id: str = Field(default_factory=lambda: str(uuid.uuid4()))
-    date: str  # "YYYY-MM-DD"
-    start: str  # "HH:MM"
-    end: str  # "HH:MM"
+    date: str          # "YYYY-MM-DD"
+    start: str         # "HH:MM"  (can be > 24:00 for overnight continuation)
+    end: str           # "HH:MM"  (if end < start → overnight block)
     title: str
     type_id: str
     responsible: Optional[str] = None
@@ -20,13 +21,16 @@ class Block(BaseModel):
 class ProgramType(BaseModel):
     id: str
     name: str
-    color: str  # "#RRGGBB"
+    color: str         # "#RRGGBB"
 
 
 class EventInfo(BaseModel):
     title: str
     subtitle: Optional[str] = None
-    date: Optional[str] = None
+    # Multi-day: date_from → date_to (inclusive). Backward compat: date = date_from.
+    date: Optional[str] = None       # legacy / backward compat
+    date_from: Optional[str] = None
+    date_to: Optional[str] = None
     location: Optional[str] = None
 
 
@@ -35,3 +39,8 @@ class ScenarioDocument(BaseModel):
     event: EventInfo
     program_types: List[ProgramType]
     blocks: List[Block]
+
+    def get_sorted_dates(self) -> List[str]:
+        """Return sorted list of unique block dates."""
+        dates = sorted(set(b.date for b in self.blocks))
+        return dates

app/static/css/app.css

@@ -709,3 +709,169 @@ body {
     background: var(--border);
     color: var(--text);
 }
+
+/* ============================================================
+   v4 — Horizontal Canvas (X=time, Y=days)
+   ============================================================ */
+
+.canvas-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--bg);
+}
+
+.canvas-scroll-area {
+    flex: 1;
+    overflow: auto;
+    padding: 12px 16px;
+}
+
+/* Time axis row */
+.time-axis-row {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 2px;
+}
+
+.time-corner {
+    background: transparent;
+    flex-shrink: 0;
+}
+
+.time-tick {
+    position: absolute;
+    top: 4px;
+    font-size: 10px;
+    color: var(--text-light);
+    transform: translateX(-50%);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+/* Day rows */
+.day-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.day-row {
+    display: flex;
+    align-items: stretch;
+    background: var(--white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.day-label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 10px 0 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-light);
+    background: #f8fafc;
+    border-right: 1px solid var(--border);
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.day-timeline {
+    flex: 1;
+    position: relative;
+    background: var(--white);
+    cursor: crosshair;
+    overflow: hidden;
+}
+
+/* Hour grid lines in timeline */
+.grid-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--border);
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Block element (horizontal) */
+.block-el {
+    position: absolute;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: grab;
+    z-index: 10;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
+    transition: box-shadow 0.12s;
+    user-select: none;
+    touch-action: none;
+    display: flex;
+    align-items: center;
+}
+
+.block-el:hover {
+    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
+    z-index: 20;
+}
+
+.block-el:active {
+    cursor: grabbing;
+}
+
+.block-el.overnight {
+    opacity: 0.85;
+    border-right: 3px dashed rgba(255,255,255,0.5);
+}
+
+.block-inner {
+    padding: 2px 6px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+    width: 100%;
+}
+
+.block-title {
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+}
+
+.block-time {
+    font-size: 9px;
+    opacity: 0.8;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+}
+
+/* Resize handle on right edge */
+.block-el::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 6px;
+    cursor: ew-resize;
+    background: rgba(255,255,255,0.2);
+    border-radius: 0 4px 4px 0;
+    opacity: 0;
+    transition: opacity 0.12s;
+}
+
+.block-el:hover::after {
+    opacity: 1;
+}

app/static/index.html

@@ -13,7 +13,7 @@
     <header class="header">
         <div class="header-left">
             <h1 class="header-title">Scenár Creator</h1>
-            <span class="header-version">v3.0</span>
+            <span class="header-version">v4.0</span>
         </div>
         <div class="header-actions">
             <label class="btn btn-secondary btn-sm" id="importJsonBtn">
@@ -44,9 +44,15 @@
                         <label>Podtitul</label>
                         <input type="text" id="eventSubtitle" placeholder="Podtitul">
                     </div>
-                    <div class="form-group">
-                        <label>Datum</label>
-                        <input type="date" id="eventDate">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Od</label>
+                            <input type="date" id="eventDateFrom">
+                        </div>
+                        <div class="form-group">
+                            <label>Do</label>
+                            <input type="date" id="eventDateTo">
+                        </div>
                     </div>
                     <div class="form-group">
                         <label>Místo</label>
@@ -66,69 +72,75 @@
             </aside>
 
             <main class="canvas-wrapper">
-                <div class="canvas-header" id="canvasHeader"></div>
-                <div class="canvas-scroll">
-                    <div class="canvas" id="canvas">
-                        <div class="time-axis" id="timeAxis"></div>
-                        <div class="day-columns" id="dayColumns"></div>
-                    </div>
+                <div id="canvasScrollArea" class="canvas-scroll-area">
+                    <div id="timeAxis" class="time-axis-row"></div>
+                    <div id="dayRows" class="day-rows"></div>
                 </div>
             </main>
         </div>
     </div>
 
+    <!-- Documentation tab -->
     <div class="tab-content hidden" id="tab-docs">
         <div class="docs-container">
-            <h2>Dokumentace — Scenár Creator v3</h2>
+            <h2>Dokumentace — Scenár Creator v4</h2>
 
             <h3>Jak začít</h3>
-            <p>Máte dvě možnosti:</p>
             <ol>
-                <li><strong>Nový scénář</strong> — klikněte na tlačítko "Nový scénář" v záhlaví. Vytvoří se prázdný scénář s jedním dnem.</li>
-                <li><strong>Import JSON</strong> — klikněte na "Import JSON" a vyberte dříve uložený .json soubor. Můžete také přetáhnout JSON soubor přímo na plochu editoru.</li>
+                <li><strong>Nový scénář</strong> — klikněte na "Nový scénář" v záhlaví.</li>
+                <li><strong>Import JSON</strong> — klikněte na "Import JSON" a vyberte uložený .json soubor.</li>
             </ol>
 
+            <h3>Nastavení akce</h3>
+            <p>V postranním panelu nastavte:</p>
+            <ul>
+                <li><strong>Od / Do</strong> — rozsah dat akce. Každý den se zobrazí jako jeden řádek v editoru.</li>
+                <li>Jedno datum = jednodnenní akce, více datumů = vícedenní kurz.</li>
+            </ul>
+
             <h3>Práce s bloky</h3>
             <ul>
-                <li><strong>Přidání bloku:</strong> Klikněte na "+ Přidat blok" v postranním panelu, nebo klikněte na prázdné místo na časové ose.</li>
-                <li><strong>Přesun bloku:</strong> Chytněte blok myší a přetáhněte ho na jiný čas. Bloky se přichytávají na 15minutovou mřížku.</li>
-                <li><strong>Změna délky:</strong> Chytněte dolní okraj bloku a tažením změňte dobu trvání.</li>
-                <li><strong>Úprava bloku:</strong> Klikněte na blok pro otevření editačního popup okna, kde můžete upravit název, typ, garanta a poznámku.</li>
-                <li><strong>Smazání bloku:</strong> V editačním popup okně klikněte na tlačítko "Smazat blok".</li>
+                <li><strong>Přidání bloku:</strong> Klikněte na "+ Přidat blok" nebo klikněte na prázdné místo v časové ose.</li>
+                <li><strong>Přesun bloku:</strong> Chytněte blok a táhněte doleva/doprava po časové ose. Snap na 15 min.</li>
+                <li><strong>Změna délky:</strong> Chytněte pravý okraj bloku a táhněte.</li>
+                <li><strong>Úprava bloku:</strong> Klikněte na blok.</li>
+                <li><strong>Smazání bloku:</strong> V editačním okně klikněte na "Smazat blok".</li>
+            </ul>
+
+            <h3>Čas bloku</h3>
+            <ul>
+                <li>Zadejte <strong>Začátek</strong> a <strong>Konec</strong> (HH:MM).</li>
+                <li>Nebo zadejte <strong>Začátek</strong> a <strong>Trvání</strong> (HH:MM) — konec se vypočítá automaticky.</li>
+                <li>Lze zadat i <strong>program přes půlnoc</strong> — konec může být menší než začátek (např. 23:00 → 01:30).</li>
             </ul>
 
             <h3>Typy programů a barvy</h3>
-            <p>V postranním panelu v sekci "Typy programů" můžete:</p>
             <ul>
-                <li>Přidat nový typ kliknutím na "+ Přidat typ"</li>
-                <li>Pojmenovat typ a vybrat barvu pomocí barevného výběru</li>
-                <li>Odebrat typ kliknutím na tlačítko ×</li>
+                <li>Přidejte typ kliknutím na "+ Přidat typ".</li>
+                <li>Nastavte název a barvu pomocí barevného výběru.</li>
             </ul>
 
-            <h3>Export JSON</h3>
-            <p>Kliknutím na "Export JSON" stáhnete aktuální stav scénáře jako .json soubor. Tento soubor můžete později znovu importovat a pokračovat v úpravách.</p>
-
-            <h3>Generování PDF</h3>
-            <p>Kliknutím na "Generovat PDF" se scénář odešle na server a vygeneruje se přehledný PDF dokument ve formátu A4 na šířku s barevnými bloky a legendou.</p>
+            <h3>Export</h3>
+            <ul>
+                <li><strong>Export JSON</strong> — uloží scénář jako .json soubor pro pozdější použití.</li>
+                <li><strong>Generovat PDF</strong> — vytvoří tisknutelný PDF timetable (A4, jedna stránka, barvy, legenda).</li>
+                <li><strong>Vzorový JSON</strong> — <a href="/api/sample">stáhnout sample.json</a></li>
+            </ul>
 
             <h3>Formát JSON</h3>
             <table class="docs-table">
-                <thead>
-                    <tr><th>Pole</th><th>Typ</th><th>Popis</th></tr>
-                </thead>
+                <thead><tr><th>Pole</th><th>Typ</th><th>Popis</th></tr></thead>
                 <tbody>
-                    <tr><td>version</td><td>string</td><td>Verze formátu (1.0)</td></tr>
                     <tr><td>event.title</td><td>string</td><td>Název akce</td></tr>
-                    <tr><td>event.subtitle</td><td>string?</td><td>Podtitul</td></tr>
-                    <tr><td>event.date</td><td>string?</td><td>Datum (YYYY-MM-DD)</td></tr>
-                    <tr><td>event.location</td><td>string?</td><td>Místo</td></tr>
+                    <tr><td>event.date_from</td><td>string</td><td>Začátek akce (YYYY-MM-DD)</td></tr>
+                    <tr><td>event.date_to</td><td>string</td><td>Konec akce (YYYY-MM-DD)</td></tr>
+                    <tr><td>event.location</td><td>string?</td><td>Místo konání</td></tr>
                     <tr><td>program_types[].id</td><td>string</td><td>Unikátní ID typu</td></tr>
                     <tr><td>program_types[].name</td><td>string</td><td>Název typu</td></tr>
                     <tr><td>program_types[].color</td><td>string</td><td>Barva (#RRGGBB)</td></tr>
-                    <tr><td>blocks[].id</td><td>string</td><td>Unikátní ID bloku</td></tr>
-                    <tr><td>blocks[].date</td><td>string</td><td>Datum (YYYY-MM-DD)</td></tr>
+                    <tr><td>blocks[].date</td><td>string</td><td>Datum bloku (YYYY-MM-DD)</td></tr>
                     <tr><td>blocks[].start</td><td>string</td><td>Začátek (HH:MM)</td></tr>
-                    <tr><td>blocks[].end</td><td>string</td><td>Konec (HH:MM)</td></tr>
+                    <tr><td>blocks[].end</td><td>string</td><td>Konec (HH:MM) — může být &lt; start pro přes-půlnoční blok</td></tr>
                     <tr><td>blocks[].title</td><td>string</td><td>Název bloku</td></tr>
                     <tr><td>blocks[].type_id</td><td>string</td><td>ID typu programu</td></tr>
                     <tr><td>blocks[].responsible</td><td>string?</td><td>Garant</td></tr>
@@ -136,12 +148,12 @@
                 </tbody>
             </table>
 
-            <h3>Vzorový JSON</h3>
-            <p><a href="/api/sample" class="btn btn-secondary btn-sm">Stáhnout sample.json</a></p>
+            <h3>API dokumentace</h3>
+            <p><a href="/docs" class="btn btn-secondary btn-sm" target="_blank">Swagger UI</a></p>
         </div>
     </div>
 
-    <!-- Block edit modal -->
+    <!-- Block edit/create modal -->
     <div class="modal-overlay hidden" id="blockModal">
         <div class="modal">
             <div class="modal-header">
@@ -154,6 +166,10 @@
                     <label>Název bloku</label>
                     <input type="text" id="modalBlockTitle" placeholder="Název">
                 </div>
+                <div class="form-group">
+                    <label>Den</label>
+                    <input type="date" id="modalBlockDate">
+                </div>
                 <div class="form-group">
                     <label>Typ programu</label>
                     <select id="modalBlockType"></select>
@@ -168,6 +184,10 @@
                         <input type="time" id="modalBlockEnd">
                     </div>
                 </div>
+                <div class="form-group">
+                    <label>Nebo trvání</label>
+                    <input type="text" id="modalBlockDuration" placeholder="HH:MM (např. 1:30)">
+                </div>
                 <div class="form-group">
                     <label>Garant</label>
                     <input type="text" id="modalBlockResponsible" placeholder="Garant">
@@ -192,5 +212,8 @@
     <script src="/static/js/canvas.js"></script>
     <script src="/static/js/export.js"></script>
     <script src="/static/js/app.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => App.init());
+    </script>
 </body>
 </html>

app/static/js/app.js

@@ -1,11 +1,11 @@
 /**
- * Main application logic for Scenar Creator v3.
- * State management, UI wiring, modal handling.
+ * Main application logic for Scenar Creator v4.
+ * Multi-day state, duration input, horizontal canvas.
  */
 
 const App = {
     state: {
-        event: { title: '', subtitle: '', date: '', location: '' },
+        event: { title: '', subtitle: '', date_from: '', date_to: '', location: '' },
         program_types: [],
         blocks: []
     },
@@ -15,20 +15,72 @@ const App = {
         this.newScenario();
     },
 
-    // --- State ---
+    // ─── Helpers ───────────────────────────────────────────────────────
+
+    uid() {
+        return 'b_' + Math.random().toString(36).slice(2, 10);
+    },
+
+    parseTimeToMin(str) {
+        if (!str) return 0;
+        const [h, m] = str.split(':').map(Number);
+        return (h || 0) * 60 + (m || 0);
+    },
+
+    minutesToTime(totalMin) {
+        const h = Math.floor(totalMin / 60);
+        const m = totalMin % 60;
+        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    },
+
+    // Return sorted list of all dates from date_from to date_to (inclusive)
+    getDates() {
+        const from = this.state.event.date_from || this.state.event.date;
+        const to = this.state.event.date_to || from;
+        if (!from) return [];
+
+        const dates = [];
+        const cur = new Date(from + 'T12:00:00');
+        const end = new Date((to || from) + 'T12:00:00');
+
+        // Safety: max 31 days
+        let safety = 0;
+        while (cur <= end && safety < 31) {
+            dates.push(cur.toISOString().slice(0, 10));
+            cur.setDate(cur.getDate() + 1);
+            safety++;
+        }
+        return dates;
+    },
+
+    // ─── State ────────────────────────────────────────────────────────
 
     getDocument() {
         this.syncEventFromUI();
         return {
             version: '1.0',
-            event: { ...this.state.event },
+            event: {
+                ...this.state.event,
+                date: this.state.event.date_from, // backward compat
+            },
             program_types: this.state.program_types.map(pt => ({ ...pt })),
             blocks: this.state.blocks.map(b => ({ ...b }))
         };
     },
 
     loadDocument(doc) {
-        this.state.event = { ...doc.event };
+        const ev = doc.event || {};
+        // Backward compat: if only date exists, use it as date_from = date_to
+        const date_from = ev.date_from || ev.date || '';
+        const date_to = ev.date_to || date_from;
+
+        this.state.event = {
+            title: ev.title || '',
+            subtitle: ev.subtitle || '',
+            date_from,
+            date_to,
+            location: ev.location || '',
+        };
         this.state.program_types = (doc.program_types || []).map(pt => ({ ...pt }));
         this.state.blocks = (doc.blocks || []).map(b => ({
             ...b,
@@ -40,9 +92,9 @@ const App = {
     },
 
     newScenario() {
-        const today = new Date().toISOString().split('T')[0];
+        const today = new Date().toISOString().slice(0, 10);
         this.state = {
-            event: { title: 'Nová akce', subtitle: '', date: today, location: '' },
+            event: { title: 'Nová akce', subtitle: '', date_from: today, date_to: today, location: '' },
             program_types: [
                 { id: 'main', name: 'Hlavní program', color: '#3B82F6' },
                 { id: 'rest', name: 'Odpočinek', color: '#22C55E' }
@@ -54,23 +106,25 @@ const App = {
         this.renderCanvas();
     },
 
-    // --- Sync sidebar <-> state ---
+    // ─── Sync sidebar <-> state ───────────────────────────────────────
 
     syncEventFromUI() {
         this.state.event.title = document.getElementById('eventTitle').value.trim() || 'Nová akce';
         this.state.event.subtitle = document.getElementById('eventSubtitle').value.trim() || null;
-        this.state.event.date = document.getElementById('eventDate').value || null;
+        this.state.event.date_from = document.getElementById('eventDateFrom').value || null;
+        this.state.event.date_to = document.getElementById('eventDateTo').value || this.state.event.date_from;
         this.state.event.location = document.getElementById('eventLocation').value.trim() || null;
     },
 
     syncEventToUI() {
         document.getElementById('eventTitle').value = this.state.event.title || '';
         document.getElementById('eventSubtitle').value = this.state.event.subtitle || '';
-        document.getElementById('eventDate').value = this.state.event.date || '';
+        document.getElementById('eventDateFrom').value = this.state.event.date_from || '';
+        document.getElementById('eventDateTo').value = this.state.event.date_to || this.state.event.date_from || '';
         document.getElementById('eventLocation').value = this.state.event.location || '';
     },
 
-    // --- Program types ---
+    // ─── Program types ────────────────────────────────────────────────
 
     renderTypes() {
         const container = document.getElementById('programTypesContainer');
@@ -83,16 +137,13 @@ const App = {
                 <input type="text" value="${pt.name}" placeholder="Název typu" data-idx="${i}">
                 <button class="type-remove" data-idx="${i}">&times;</button>
             `;
-            // Color change
             row.querySelector('input[type="color"]').addEventListener('change', (e) => {
                 this.state.program_types[i].color = e.target.value;
                 this.renderCanvas();
             });
-            // Name change
             row.querySelector('input[type="text"]').addEventListener('change', (e) => {
                 this.state.program_types[i].name = e.target.value.trim();
             });
-            // Remove
             row.querySelector('.type-remove').addEventListener('click', () => {
                 this.state.program_types.splice(i, 1);
                 this.renderTypes();
@@ -102,150 +153,222 @@ const App = {
         });
     },
 
-    addType() {
-        const id = 'type_' + this.uid().substring(0, 6);
-        this.state.program_types.push({
-            id,
-            name: 'Nový typ',
-            color: '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
-        });
-        this.renderTypes();
-    },
-
-    // --- Blocks ---
-
-    createBlock(date, start, end) {
-        const typeId = this.state.program_types.length > 0 ? this.state.program_types[0].id : 'main';
-        const block = {
-            id: this.uid(),
-            date: date || this.state.event.date || new Date().toISOString().split('T')[0],
-            start: start || '09:00',
-            end: end || '10:00',
-            title: 'Nový blok',
-            type_id: typeId,
-            responsible: null,
-            notes: null
-        };
-        this.state.blocks.push(block);
-        this.renderCanvas();
-        this.editBlock(block.id);
-    },
-
-    updateBlockTime(blockId, start, end) {
-        const block = this.state.blocks.find(b => b.id === blockId);
-        if (block) {
-            block.start = start;
-            block.end = end;
-            this.renderCanvas();
-        }
-    },
-
-    deleteBlock(blockId) {
-        this.state.blocks = this.state.blocks.filter(b => b.id !== blockId);
-        this.renderCanvas();
-    },
-
-    // --- Canvas rendering ---
+    // ─── Canvas ───────────────────────────────────────────────────────
 
     renderCanvas() {
-        const dates = this.getUniqueDates();
-        Canvas.renderTimeAxis();
-        Canvas.renderDayColumns(dates);
-        Canvas.renderBlocks(this.state.blocks, this.state.program_types);
+        Canvas.render(this.state);
     },
 
-    getUniqueDates() {
-        const dateSet = new Set();
-        this.state.blocks.forEach(b => dateSet.add(b.date));
-        if (this.state.event.date) dateSet.add(this.state.event.date);
-        const dates = Array.from(dateSet).sort();
-        return dates.length > 0 ? dates : [new Date().toISOString().split('T')[0]];
-    },
+    // ─── Block modal ──────────────────────────────────────────────────
 
-    // --- Modal ---
-
-    editBlock(blockId) {
+    // Open modal to edit existing block
+    openBlockModal(blockId) {
         const block = this.state.blocks.find(b => b.id === blockId);
         if (!block) return;
 
+        document.getElementById('modalTitle').textContent = 'Upravit blok';
         document.getElementById('modalBlockId').value = block.id;
-        document.getElementById('modalBlockTitle').value = block.title;
-        document.getElementById('modalBlockStart').value = block.start;
-        document.getElementById('modalBlockEnd').value = block.end;
+        document.getElementById('modalBlockTitle').value = block.title || '';
+        document.getElementById('modalBlockStart').value = block.start || '';
+        document.getElementById('modalBlockEnd').value = block.end || '';
         document.getElementById('modalBlockResponsible').value = block.responsible || '';
         document.getElementById('modalBlockNotes').value = block.notes || '';
+        this._updateDuration();
 
-        // Populate type select
-        const select = document.getElementById('modalBlockType');
-        select.innerHTML = '';
+        this._populateTypeSelect(block.type_id);
+        document.getElementById('modalBlockDate').value = block.date || '';
+        document.getElementById('modalDeleteBtn').style.display = 'inline-block';
+        document.getElementById('blockModal').classList.remove('hidden');
+    },
+
+    // Open modal to create new block
+    openNewBlockModal(date, start, end) {
+        document.getElementById('modalTitle').textContent = 'Nový blok';
+        document.getElementById('modalBlockId').value = '';
+        document.getElementById('modalBlockTitle').value = '';
+        document.getElementById('modalBlockStart').value = start || '09:00';
+        document.getElementById('modalBlockEnd').value = end || '10:00';
+        document.getElementById('modalBlockResponsible').value = '';
+        document.getElementById('modalBlockNotes').value = '';
+        document.getElementById('modalBlockDate').value = date || '';
+        this._updateDuration();
+
+        this._populateTypeSelect(null);
+        document.getElementById('modalDeleteBtn').style.display = 'none';
+        document.getElementById('blockModal').classList.remove('hidden');
+    },
+
+    _populateTypeSelect(selectedId) {
+        const sel = document.getElementById('modalBlockType');
+        sel.innerHTML = '';
         this.state.program_types.forEach(pt => {
             const opt = document.createElement('option');
             opt.value = pt.id;
             opt.textContent = pt.name;
-            if (pt.id === block.type_id) opt.selected = true;
-            select.appendChild(opt);
+            if (pt.id === selectedId) opt.selected = true;
+            sel.appendChild(opt);
         });
-
-        document.getElementById('blockModal').classList.remove('hidden');
     },
 
-    saveBlockFromModal() {
-        const blockId = document.getElementById('modalBlockId').value;
-        const block = this.state.blocks.find(b => b.id === blockId);
-        if (!block) return;
-
-        block.title = document.getElementById('modalBlockTitle').value.trim() || 'Blok';
-        block.type_id = document.getElementById('modalBlockType').value;
-        block.start = document.getElementById('modalBlockStart').value;
-        block.end = document.getElementById('modalBlockEnd').value;
-        block.responsible = document.getElementById('modalBlockResponsible').value.trim() || null;
-        block.notes = document.getElementById('modalBlockNotes').value.trim() || null;
-
-        this.closeModal();
-        this.renderCanvas();
-    },
-
-    closeModal() {
-        document.getElementById('blockModal').classList.add('hidden');
-    },
-
-    // --- Toast ---
-
-    toast(message, type) {
-        const el = document.getElementById('toast');
-        el.textContent = message;
-        el.className = 'toast ' + (type || 'info');
-        setTimeout(() => el.classList.add('hidden'), 3000);
-    },
-
-    // --- PDF ---
-
-    async generatePdf() {
-        try {
-            const doc = this.getDocument();
-            if (doc.blocks.length === 0) {
-                this.toast('Přidejte alespoň jeden blok', 'error');
-                return;
-            }
-            const blob = await API.postBlob('/api/generate-pdf', doc);
-            API.downloadBlob(blob, 'scenar_timetable.pdf');
-            this.toast('PDF vygenerován', 'success');
-        } catch (err) {
-            this.toast('Chyba: ' + err.message, 'error');
+    _updateDuration() {
+        const startVal = document.getElementById('modalBlockStart').value;
+        const endVal = document.getElementById('modalBlockEnd').value;
+        if (!startVal || !endVal) {
+            document.getElementById('modalBlockDuration').value = '';
+            return;
         }
+        const s = this.parseTimeToMin(startVal);
+        let e = this.parseTimeToMin(endVal);
+        if (e < s) e += 24 * 60; // overnight
+        const dur = e - s;
+        document.getElementById('modalBlockDuration').value = this.minutesToTime(dur);
     },
 
-    // --- Utility ---
+    _saveModal() {
+        const blockId = document.getElementById('modalBlockId').value;
+        const date = document.getElementById('modalBlockDate').value;
+        const title = document.getElementById('modalBlockTitle').value.trim();
+        const type_id = document.getElementById('modalBlockType').value;
+        const start = document.getElementById('modalBlockStart').value;
+        const end = document.getElementById('modalBlockEnd').value;
+        const responsible = document.getElementById('modalBlockResponsible').value.trim() || null;
+        const notes = document.getElementById('modalBlockNotes').value.trim() || null;
 
-    uid() {
-        return 'xxxx-xxxx-xxxx'.replace(/x/g, () =>
-            Math.floor(Math.random() * 16).toString(16)
-        );
+        if (!title) { this.toast('Zadejte název bloku', 'error'); return; }
+        if (!start || !end) { this.toast('Zadejte čas začátku a konce', 'error'); return; }
+
+        if (blockId) {
+            // Edit existing
+            const idx = this.state.blocks.findIndex(b => b.id === blockId);
+            if (idx !== -1) {
+                Object.assign(this.state.blocks[idx], { date, title, type_id, start, end, responsible, notes });
+            }
+        } else {
+            // New block
+            this.state.blocks.push({ id: this.uid(), date, title, type_id, start, end, responsible, notes });
+        }
+
+        document.getElementById('blockModal').classList.add('hidden');
+        this.renderCanvas();
+        this.toast('Blok uložen', 'success');
     },
 
-    // --- Event binding ---
+    _deleteBlock() {
+        const blockId = document.getElementById('modalBlockId').value;
+        if (!blockId) return;
+        this.state.blocks = this.state.blocks.filter(b => b.id !== blockId);
+        document.getElementById('blockModal').classList.add('hidden');
+        this.renderCanvas();
+        this.toast('Blok smazán', 'success');
+    },
+
+    // ─── Toast ────────────────────────────────────────────────────────
+
+    toast(message, type = 'success') {
+        const el = document.getElementById('toast');
+        if (!el) return;
+        el.textContent = message;
+        el.className = `toast ${type}`;
+        el.classList.remove('hidden');
+        clearTimeout(this._toastTimer);
+        this._toastTimer = setTimeout(() => el.classList.add('hidden'), 3000);
+    },
+
+    // ─── Events ───────────────────────────────────────────────────────
 
     bindEvents() {
+        // Import JSON
+        document.getElementById('importJsonInput').addEventListener('change', (e) => {
+            if (e.target.files[0]) importJson(e.target.files[0]);
+            e.target.value = '';
+        });
+
+        // Export JSON
+        document.getElementById('exportJsonBtn').addEventListener('click', () => exportJson());
+
+        // New scenario
+        document.getElementById('newScenarioBtn').addEventListener('click', () => {
+            if (!confirm('Vytvořit nový scénář? Neuložené změny budou ztraceny.')) return;
+            this.newScenario();
+        });
+
+        // Generate PDF
+        document.getElementById('generatePdfBtn').addEventListener('click', async () => {
+            this.syncEventFromUI();
+            const doc = this.getDocument();
+            if (!doc.blocks.length) {
+                this.toast('Žádné bloky k exportu', 'error');
+                return;
+            }
+            try {
+                this.toast('Generuji PDF…', 'success');
+                const blob = await API.postBlob('/api/generate-pdf', doc);
+                API.downloadBlob(blob, 'scenar.pdf');
+                this.toast('PDF staženo', 'success');
+            } catch (err) {
+                this.toast('Chyba PDF: ' + err.message, 'error');
+            }
+        });
+
+        // Add block button
+        document.getElementById('addBlockBtn').addEventListener('click', () => {
+            const dates = this.getDates();
+            const date = dates[0] || new Date().toISOString().slice(0, 10);
+            this.openNewBlockModal(date, '09:00', '10:00');
+        });
+
+        // Add type
+        document.getElementById('addTypeBtn').addEventListener('click', () => {
+            this.state.program_types.push({
+                id: 'type_' + Math.random().toString(36).slice(2, 6),
+                name: 'Nový typ',
+                color: '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')
+            });
+            this.renderTypes();
+        });
+
+        // Modal close
+        document.getElementById('modalClose').addEventListener('click', () => {
+            document.getElementById('blockModal').classList.add('hidden');
+        });
+        document.getElementById('modalSaveBtn').addEventListener('click', () => this._saveModal());
+        document.getElementById('modalDeleteBtn').addEventListener('click', () => this._deleteBlock());
+
+        // Duration ↔ end sync
+        document.getElementById('modalBlockDuration').addEventListener('input', (e) => {
+            const durStr = e.target.value.trim();
+            const startVal = document.getElementById('modalBlockStart').value;
+            if (!startVal || !durStr) return;
+            const durParts = durStr.split(':').map(Number);
+            if (durParts.length < 2 || isNaN(durParts[0]) || isNaN(durParts[1])) return;
+            const durMin = durParts[0] * 60 + durParts[1];
+            if (durMin <= 0) return;
+            const startMin = this.parseTimeToMin(startVal);
+            const endMin = startMin + durMin;
+            document.getElementById('modalBlockEnd').value = this.minutesToTime(endMin % 1440 || endMin);
+        });
+
+        document.getElementById('modalBlockEnd').addEventListener('input', () => {
+            this._updateDuration();
+        });
+        document.getElementById('modalBlockStart').addEventListener('input', () => {
+            this._updateDuration();
+        });
+
+        // Date range sync: if dateFrom changes and dateTo < dateFrom, set dateTo = dateFrom
+        document.getElementById('eventDateFrom').addEventListener('change', (e) => {
+            const toEl = document.getElementById('eventDateTo');
+            if (!toEl.value || toEl.value < e.target.value) {
+                toEl.value = e.target.value;
+            }
+            this.syncEventFromUI();
+            this.renderCanvas();
+        });
+        document.getElementById('eventDateTo').addEventListener('change', () => {
+            this.syncEventFromUI();
+            this.renderCanvas();
+        });
+
         // Tabs
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', () => {
@@ -256,49 +379,11 @@ const App = {
             });
         });
 
-        // Header buttons
-        document.getElementById('newScenarioBtn').addEventListener('click', () => this.newScenario());
-        document.getElementById('exportJsonBtn').addEventListener('click', () => exportJson());
-        document.getElementById('generatePdfBtn').addEventListener('click', () => this.generatePdf());
-
-        // Import JSON
-        document.getElementById('importJsonInput').addEventListener('change', (e) => {
-            if (e.target.files[0]) importJson(e.target.files[0]);
-            e.target.value = '';
-        });
-
-        // Sidebar
-        document.getElementById('addTypeBtn').addEventListener('click', () => this.addType());
-        document.getElementById('addBlockBtn').addEventListener('click', () => this.createBlock());
-
-        // Modal
-        document.getElementById('modalSaveBtn').addEventListener('click', () => this.saveBlockFromModal());
-        document.getElementById('modalClose').addEventListener('click', () => this.closeModal());
-        document.getElementById('modalDeleteBtn').addEventListener('click', () => {
-            const blockId = document.getElementById('modalBlockId').value;
-            this.closeModal();
-            this.deleteBlock(blockId);
-        });
-
         // Close modal on overlay click
         document.getElementById('blockModal').addEventListener('click', (e) => {
-            if (e.target.classList.contains('modal-overlay')) this.closeModal();
+            if (e.target === document.getElementById('blockModal')) {
+                document.getElementById('blockModal').classList.add('hidden');
+            }
         });
-
-        // Drag & drop JSON on canvas
-        const canvasWrapper = document.querySelector('.canvas-wrapper');
-        if (canvasWrapper) {
-            canvasWrapper.addEventListener('dragover', (e) => e.preventDefault());
-            canvasWrapper.addEventListener('drop', (e) => {
-                e.preventDefault();
-                const file = e.dataTransfer.files[0];
-                if (file && file.name.endsWith('.json')) {
-                    importJson(file);
-                }
-            });
-        }
-    }
+    },
 };
-
-// Boot
-document.addEventListener('DOMContentLoaded', () => App.init());

app/static/js/canvas.js

@@ -1,32 +1,34 @@
 /**
- * Canvas editor for Scenar Creator v3.
- * Renders schedule blocks on a time-grid canvas with drag & drop via interact.js.
+ * Canvas editor for Scenar Creator v4.
+ * Horizontal layout: X = time, Y = days.
+ * interact.js for drag (horizontal) and resize (right edge).
  */
 
 const Canvas = {
     GRID_MINUTES: 15,
-    PX_PER_SLOT: 30, // 30px per 15 min
-    START_HOUR: 7,
-    END_HOUR: 23,
+    ROW_H: 52,          // px height of one day row
+    TIME_LABEL_W: 80,   // px width of date label column
+    HEADER_H: 28,       // px height of time axis header
+    MIN_BLOCK_MIN: 15,  // minimum block duration in minutes
+
+    // Time range (auto-derived from blocks, with fallback)
+    _startMin: 7 * 60,
+    _endMin: 22 * 60,
 
     get pxPerMinute() {
-        return this.PX_PER_SLOT / this.GRID_MINUTES;
-    },
-
-    get totalSlots() {
-        return ((this.END_HOUR - this.START_HOUR) * 60) / this.GRID_MINUTES;
-    },
-
-    get totalHeight() {
-        return this.totalSlots * this.PX_PER_SLOT;
+        const slots = (this._endMin - this._startMin) / this.GRID_MINUTES;
+        const container = document.getElementById('canvasScrollArea');
+        if (!container) return 2;
+        const avail = container.clientWidth - this.TIME_LABEL_W - 4;
+        return avail / ((this._endMin - this._startMin));
     },
 
     minutesToPx(minutes) {
-        return (minutes - this.START_HOUR * 60) * this.pxPerMinute;
+        return (minutes - this._startMin) * this.pxPerMinute;
     },
 
     pxToMinutes(px) {
-        return Math.round(px / this.pxPerMinute + this.START_HOUR * 60);
+        return px / this.pxPerMinute + this._startMin;
     },
 
     snapMinutes(minutes) {
@@ -34,234 +36,295 @@ const Canvas = {
     },
 
     formatTime(totalMinutes) {
-        const h = Math.floor(totalMinutes / 60);
-        const m = totalMinutes % 60;
+        const norm = ((totalMinutes % 1440) + 1440) % 1440;
+        const h = Math.floor(norm / 60);
+        const m = norm % 60;
         return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
     },
 
     parseTime(str) {
+        if (!str) return 0;
         const [h, m] = str.split(':').map(Number);
-        return h * 60 + m;
+        return (h || 0) * 60 + (m || 0);
     },
 
     isLightColor(hex) {
-        const h = hex.replace('#', '');
-        const r = parseInt(h.substring(0, 2), 16);
-        const g = parseInt(h.substring(2, 4), 16);
-        const b = parseInt(h.substring(4, 6), 16);
+        const h = (hex || '#888888').replace('#', '');
+        const r = parseInt(h.substring(0, 2), 16) || 128;
+        const g = parseInt(h.substring(2, 4), 16) || 128;
+        const b = parseInt(h.substring(4, 6), 16) || 128;
         return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
     },
 
-    renderTimeAxis() {
-        const axis = document.getElementById('timeAxis');
-        axis.innerHTML = '';
-        axis.style.height = this.totalHeight + 'px';
-
-        for (let slot = 0; slot <= this.totalSlots; slot++) {
-            const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
-            const isHour = minutes % 60 === 0;
-            const isHalf = minutes % 30 === 0;
-
-            if (isHour || isHalf) {
-                const label = document.createElement('div');
-                label.className = 'time-label';
-                label.style.top = (slot * this.PX_PER_SLOT) + 'px';
-                label.textContent = this.formatTime(minutes);
-                if (!isHour) {
-                    label.style.fontSize = '9px';
-                    label.style.opacity = '0.6';
-                }
-                axis.appendChild(label);
-            }
+    // Derive time range from blocks (with default fallback)
+    _computeRange(blocks) {
+        if (!blocks || blocks.length === 0) {
+            this._startMin = 7 * 60;
+            this._endMin = 22 * 60;
+            return;
+        }
+        let minStart = 24 * 60;
+        let maxEnd = 0;
+        for (const b of blocks) {
+            const s = this.parseTime(b.start);
+            let e = this.parseTime(b.end);
+            if (e <= s) e += 24 * 60; // overnight
+            if (s < minStart) minStart = s;
+            if (e > maxEnd) maxEnd = e;
+        }
+        // Round to hour boundaries, add small padding
+        this._startMin = Math.max(0, Math.floor(minStart / 60) * 60);
+        this._endMin = Math.min(48 * 60, Math.ceil(maxEnd / 60) * 60);
+        // Ensure minimum range of 2h
+        if (this._endMin - this._startMin < 120) {
+            this._endMin = this._startMin + 120;
         }
     },
 
-    renderDayColumns(dates) {
-        const header = document.getElementById('canvasHeader');
-        const columns = document.getElementById('dayColumns');
-        header.innerHTML = '';
-        columns.innerHTML = '';
+    render(state) {
+        const dates = App.getDates();
+        this._computeRange(state.blocks);
 
-        if (dates.length === 0) dates = [new Date().toISOString().split('T')[0]];
+        const timeAxisEl = document.getElementById('timeAxis');
+        const dayRowsEl = document.getElementById('dayRows');
+        if (!timeAxisEl || !dayRowsEl) return;
 
-        dates.forEach(dateStr => {
-            // Header
-            const dh = document.createElement('div');
-            dh.className = 'day-header';
-            dh.textContent = dateStr;
-            header.appendChild(dh);
+        timeAxisEl.innerHTML = '';
+        dayRowsEl.innerHTML = '';
 
-            // Column
-            const col = document.createElement('div');
-            col.className = 'day-column';
-            col.dataset.date = dateStr;
-            col.style.height = this.totalHeight + 'px';
-
-            // Grid lines
-            for (let slot = 0; slot <= this.totalSlots; slot++) {
-                const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
-                const line = document.createElement('div');
-                line.className = 'grid-line ' + (minutes % 60 === 0 ? 'hour' : 'half');
-                line.style.top = (slot * this.PX_PER_SLOT) + 'px';
-                col.appendChild(line);
-            }
-
-            // Click area for creating blocks
-            const clickArea = document.createElement('div');
-            clickArea.className = 'day-column-click-area';
-            clickArea.addEventListener('click', (e) => {
-                if (e.target !== clickArea) return;
-                const rect = col.getBoundingClientRect();
-                const y = e.clientY - rect.top;
-                const minutes = this.snapMinutes(this.pxToMinutes(y));
-                const endMinutes = Math.min(minutes + 60, this.END_HOUR * 60);
-                App.createBlock(dateStr, this.formatTime(minutes), this.formatTime(endMinutes));
-            });
-            col.appendChild(clickArea);
-
-            columns.appendChild(col);
-        });
+        this._renderTimeAxis(timeAxisEl, dates);
+        this._renderDayRows(dayRowsEl, dates, state);
     },
 
-    renderBlocks(blocks, programTypes) {
-        // Remove existing blocks
-        document.querySelectorAll('.schedule-block').forEach(el => el.remove());
+    _renderTimeAxis(container, dates) {
+        container.style.display = 'flex';
+        container.style.alignItems = 'stretch';
+        container.style.height = this.HEADER_H + 'px';
+        container.style.minWidth = (this.TIME_LABEL_W + this._canvasWidth()) + 'px';
 
+        // Date label placeholder
+        const corner = document.createElement('div');
+        corner.className = 'time-corner';
+        corner.style.cssText = `width:${this.TIME_LABEL_W}px;min-width:${this.TIME_LABEL_W}px;`;
+        container.appendChild(corner);
+
+        // Time labels wrapper
+        const labelsWrap = document.createElement('div');
+        labelsWrap.style.cssText = `position:relative;flex:1;height:${this.HEADER_H}px;`;
+
+        const totalMin = this._endMin - this._startMin;
+        for (let m = this._startMin; m <= this._endMin; m += 60) {
+            const pct = (m - this._startMin) / totalMin * 100;
+            const label = document.createElement('div');
+            label.className = 'time-tick';
+            label.style.left = `calc(${pct}% - 1px)`;
+            label.textContent = this.formatTime(m);
+            labelsWrap.appendChild(label);
+        }
+        container.appendChild(labelsWrap);
+    },
+
+    _canvasWidth() {
+        const container = document.getElementById('canvasScrollArea');
+        if (!container) return 800;
+        return Math.max(600, container.clientWidth - this.TIME_LABEL_W - 20);
+    },
+
+    _renderDayRows(container, dates, state) {
         const typeMap = {};
-        programTypes.forEach(pt => { typeMap[pt.id] = pt; });
+        for (const pt of state.program_types) typeMap[pt.id] = pt;
 
-        blocks.forEach(block => {
-            const col = document.querySelector(`.day-column[data-date="${block.date}"]`);
-            if (!col) return;
+        for (const date of dates) {
+            const row = document.createElement('div');
+            row.className = 'day-row';
+            row.style.height = this.ROW_H + 'px';
+            row.dataset.date = date;
 
-            const pt = typeMap[block.type_id] || { color: '#94a3b8', name: '?' };
-            const startMin = this.parseTime(block.start);
-            const endMin = this.parseTime(block.end);
-            const top = this.minutesToPx(startMin);
-            const height = (endMin - startMin) * this.pxPerMinute;
-            const isLight = this.isLightColor(pt.color);
+            // Date label
+            const label = document.createElement('div');
+            label.className = 'day-label';
+            label.style.width = this.TIME_LABEL_W + 'px';
+            label.style.minWidth = this.TIME_LABEL_W + 'px';
+            label.textContent = this._formatDate(date);
+            row.appendChild(label);
 
-            const el = document.createElement('div');
-            el.className = 'schedule-block' + (isLight ? ' light-bg' : '');
-            el.dataset.blockId = block.id;
-            el.style.top = top + 'px';
-            el.style.height = Math.max(height, 20) + 'px';
-            el.style.backgroundColor = pt.color;
+            // Timeline area
+            const timeline = document.createElement('div');
+            timeline.className = 'day-timeline';
+            timeline.style.position = 'relative';
+            timeline.dataset.date = date;
 
-            el.innerHTML = `
-                <div class="block-color-bar" style="background:${this.darkenColor(pt.color)}"></div>
-                <div class="block-title">${this.escapeHtml(block.title)}</div>
-                <div class="block-time">${block.start} – ${block.end}</div>
-                ${block.responsible ? `<div class="block-responsible">${this.escapeHtml(block.responsible)}</div>` : ''}
-                <div class="resize-handle"></div>
-            `;
+            // Grid lines (every hour)
+            const totalMin = this._endMin - this._startMin;
+            for (let m = this._startMin; m < this._endMin; m += 60) {
+                const line = document.createElement('div');
+                line.className = 'grid-line';
+                line.style.left = ((m - this._startMin) / totalMin * 100) + '%';
+                timeline.appendChild(line);
+            }
 
-            // Click to edit
-            el.addEventListener('click', (e) => {
-                if (e.target.classList.contains('resize-handle')) return;
-                App.editBlock(block.id);
+            // Click on empty timeline to add block
+            timeline.addEventListener('click', (e) => {
+                if (e.target !== timeline) return;
+                const rect = timeline.getBoundingClientRect();
+                const relX = e.clientX - rect.left;
+                const totalW = rect.width;
+                const clickMin = this._startMin + (relX / totalW) * (this._endMin - this._startMin);
+                const snapStart = this.snapMinutes(clickMin);
+                const snapEnd = snapStart + 60; // default 1h
+                App.openNewBlockModal(date, this.formatTime(snapStart), this.formatTime(Math.min(snapEnd, this._endMin)));
             });
 
-            col.appendChild(el);
+            // Render blocks for this date
+            const dayBlocks = state.blocks.filter(b => b.date === date);
+            for (const block of dayBlocks) {
+                const el = this._createBlockEl(block, typeMap, totalMin);
+                if (el) timeline.appendChild(el);
+            }
+
+            row.appendChild(timeline);
+            container.appendChild(row);
+        }
+    },
+
+    _formatDate(dateStr) {
+        const d = new Date(dateStr + 'T12:00:00');
+        return d.toLocaleDateString('cs-CZ', { weekday: 'short', day: 'numeric', month: 'numeric' });
+    },
+
+    _createBlockEl(block, typeMap, totalMin) {
+        const pt = typeMap[block.type_id];
+        const color = pt ? pt.color : '#888888';
+        const light = this.isLightColor(color);
+
+        const s = this.parseTime(block.start);
+        let e = this.parseTime(block.end);
+        const isOvernight = e <= s;
+        if (isOvernight) e = this._endMin; // clip to end of day
+
+        // Clamp to time range
+        const cs = Math.max(s, this._startMin);
+        const ce = Math.min(e, this._endMin);
+        if (ce <= cs) return null;
+
+        const totalRange = this._endMin - this._startMin;
+        const leftPct = (cs - this._startMin) / totalRange * 100;
+        const widthPct = (ce - cs) / totalRange * 100;
+
+        const el = document.createElement('div');
+        el.className = 'block-el' + (isOvernight ? ' overnight' : '');
+        el.dataset.id = block.id;
+        el.style.cssText = `
+            left:${leftPct}%;
+            width:${widthPct}%;
+            background:${color};
+            color:${light ? '#1a1a1a' : '#ffffff'};
+            top:4px;
+            height:${this.ROW_H - 8}px;
+            position:absolute;
+        `;
+
+        // Block label
+        const inner = document.createElement('div');
+        inner.className = 'block-inner';
+        const timeLabel = `${block.start}–${block.end}`;
+        const nameEl = document.createElement('span');
+        nameEl.className = 'block-title';
+        nameEl.textContent = block.title;
+        const timeEl = document.createElement('span');
+        timeEl.className = 'block-time';
+        timeEl.textContent = timeLabel + (isOvernight ? ' →' : '');
+        inner.appendChild(nameEl);
+        inner.appendChild(timeEl);
+        el.appendChild(inner);
+
+        // Click to edit
+        el.addEventListener('click', (e) => {
+            e.stopPropagation();
+            App.openBlockModal(block.id);
         });
 
-        this.initInteract();
-    },
-
-    initInteract() {
-        if (typeof interact === 'undefined') return;
-
-        interact('.schedule-block').draggable({
-            inertia: false,
-            modifiers: [
-                interact.modifiers.snap({
-                    targets: [interact.snappers.grid({
-                        x: 1, y: this.PX_PER_SLOT
-                    })],
-                    range: Infinity,
-                    relativePoint: { x: 0, y: 0 }
-                }),
-                interact.modifiers.restrict({
-                    restriction: 'parent',
-                    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+        // interact.js drag (horizontal only)
+        if (window.interact) {
+            interact(el)
+                .draggable({
+                    axis: 'x',
+                    listeners: {
+                        move: (event) => this._onDragMove(event, block),
+                        end: (event) => this._onDragEnd(event, block),
+                    },
+                    modifiers: [
+                        interact.modifiers.snap({
+                            targets: [interact.snappers.grid({ x: this._minutesPx(this.GRID_MINUTES), y: 1000 })],
+                            range: Infinity,
+                            relativePoints: [{ x: 0, y: 0 }]
+                        }),
+                        interact.modifiers.restrict({ restriction: 'parent' })
+                    ],
+                    inertia: false,
                 })
-            ],
-            listeners: {
-                start: (event) => {
-                    event.target.style.zIndex = 50;
-                    event.target.style.opacity = '0.9';
-                },
-                move: (event) => {
-                    const target = event.target;
-                    const y = (parseFloat(target.dataset.dragY) || 0) + event.dy;
-                    target.dataset.dragY = y;
-                    const currentTop = parseFloat(target.style.top) || 0;
-                    const newTop = currentTop + event.dy;
-                    target.style.top = newTop + 'px';
-                },
-                end: (event) => {
-                    const target = event.target;
-                    target.style.zIndex = '';
-                    target.style.opacity = '';
-                    target.dataset.dragY = 0;
+                .resizable({
+                    edges: { right: true },
+                    listeners: {
+                        move: (event) => this._onResizeMove(event, block),
+                        end: (event) => this._onResizeEnd(event, block),
+                    },
+                    modifiers: [
+                        interact.modifiers.snapSize({
+                            targets: [interact.snappers.grid({ width: this._minutesPx(this.GRID_MINUTES) })]
+                        }),
+                        interact.modifiers.restrictSize({ minWidth: this._minutesPx(this.MIN_BLOCK_MIN) })
+                    ],
+                });
+        }
 
-                    const blockId = target.dataset.blockId;
-                    const newTop = parseFloat(target.style.top);
-                    const height = parseFloat(target.style.height);
-
-                    const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop));
-                    const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop + height));
-
-                    App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
-                }
-            }
-        }).resizable({
-            edges: { bottom: '.resize-handle' },
-            modifiers: [
-                interact.modifiers.snap({
-                    targets: [interact.snappers.grid({
-                        x: 1, y: this.PX_PER_SLOT
-                    })],
-                    range: Infinity,
-                    relativePoint: { x: 0, y: 0 },
-                    offset: 'self'
-                }),
-                interact.modifiers.restrictSize({
-                    min: { width: 0, height: this.PX_PER_SLOT }
-                })
-            ],
-            listeners: {
-                move: (event) => {
-                    const target = event.target;
-                    target.style.height = event.rect.height + 'px';
-                },
-                end: (event) => {
-                    const target = event.target;
-                    const blockId = target.dataset.blockId;
-                    const top = parseFloat(target.style.top);
-                    const height = parseFloat(target.style.height);
-
-                    const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(top));
-                    const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(top + height));
-
-                    App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
-                }
-            }
-        });
+        return el;
     },
 
-    darkenColor(hex) {
-        const h = hex.replace('#', '');
-        const r = Math.max(0, parseInt(h.substring(0, 2), 16) - 30);
-        const g = Math.max(0, parseInt(h.substring(2, 4), 16) - 30);
-        const b = Math.max(0, parseInt(h.substring(4, 6), 16) - 30);
-        return `rgb(${r},${g},${b})`;
+    _minutesPx(minutes) {
+        return minutes * this.pxPerMinute;
     },
 
-    escapeHtml(str) {
-        if (!str) return '';
-        const d = document.createElement('div');
-        d.textContent = str;
-        return d.innerHTML;
-    }
+    _onDragMove(event, block) {
+        const target = event.target;
+        const x = (parseFloat(target.style.left) || 0);
+        // Convert delta px to minutes
+        const deltaPx = event.dx;
+        const deltaMin = deltaPx / this.pxPerMinute;
+        const newStartMin = this.snapMinutes(this.parseTime(block.start) + deltaMin);
+        const duration = this.parseTime(block.end) - this.parseTime(block.start);
+        const clampedStart = Math.max(this._startMin, Math.min(this._endMin - duration, newStartMin));
+        const newEnd = clampedStart + duration;
+
+        block.start = this.formatTime(clampedStart);
+        block.end = this.formatTime(newEnd);
+
+        const totalRange = this._endMin - this._startMin;
+        const leftPct = (clampedStart - this._startMin) / totalRange * 100;
+        target.style.left = leftPct + '%';
+    },
+
+    _onDragEnd(event, block) {
+        App.renderCanvas();
+    },
+
+    _onResizeMove(event, block) {
+        const target = event.target;
+        const newWidthPx = event.rect.width;
+        const totalRange = this._endMin - this._startMin;
+        const containerW = target.parentElement.clientWidth;
+        const minutesPerPx = totalRange / containerW;
+        const newDuration = this.snapMinutes(Math.round(newWidthPx * minutesPerPx));
+        const clampedDuration = Math.max(this.MIN_BLOCK_MIN, newDuration);
+        const startMin = this.parseTime(block.start);
+        const endMin = Math.min(this._endMin, startMin + clampedDuration);
+
+        block.end = this.formatTime(endMin);
+        const widthPct = (endMin - startMin) / totalRange * 100;
+        target.style.width = widthPct + '%';
+    },
+
+    _onResizeEnd(event, block) {
+        App.renderCanvas();
+    },
 };

app/static/sample.json

@@ -3,136 +3,101 @@
   "event": {
     "title": "Zimní výjezd oddílu",
     "subtitle": "Víkendový zážitkový kurz pro mladé",
+    "date_from": "2026-03-01",
+    "date_to": "2026-03-02",
     "date": "2026-03-01",
     "location": "Chata Horní Lhota"
   },
   "program_types": [
-    {
-      "id": "morning",
-      "name": "Ranní program",
-      "color": "#F97316"
-    },
-    {
-      "id": "main",
-      "name": "Hlavní program",
-      "color": "#3B82F6"
-    },
-    {
-      "id": "rest",
-      "name": "Odpočinek",
-      "color": "#22C55E"
-    }
+    { "id": "morning", "name": "Ranní program", "color": "#F97316" },
+    { "id": "main",    "name": "Hlavní program", "color": "#3B82F6" },
+    { "id": "rest",    "name": "Odpočinek / jídlo", "color": "#22C55E" },
+    { "id": "evening", "name": "Večerní program", "color": "#8B5CF6" }
   ],
   "blocks": [
     {
-      "id": "b1",
-      "date": "2026-03-01",
-      "start": "08:00",
-      "end": "08:30",
-      "title": "Budíček a rozcvička",
-      "type_id": "morning",
-      "responsible": "Kuba",
-      "notes": "Venkovní rozcvička, pokud počasí dovolí"
+      "id": "d1_b1", "date": "2026-03-01",
+      "start": "08:00", "end": "08:30",
+      "title": "Budíček a rozcvička", "type_id": "morning",
+      "responsible": "Kuba", "notes": "Venkovní rozcvička"
     },
     {
-      "id": "b2",
-      "date": "2026-03-01",
-      "start": "08:30",
-      "end": "09:00",
-      "title": "Snídaně",
-      "type_id": "rest",
-      "responsible": "Kuchyň",
-      "notes": null
+      "id": "d1_b2", "date": "2026-03-01",
+      "start": "08:30", "end": "09:00",
+      "title": "Snídaně", "type_id": "rest",
+      "responsible": "Kuchyň", "notes": null
     },
     {
-      "id": "b3",
-      "date": "2026-03-01",
-      "start": "09:00",
-      "end": "10:30",
-      "title": "Stopovací hra v lese",
-      "type_id": "main",
-      "responsible": "Lucka",
-      "notes": "Rozdělení do 4 skupin, mapky připraveny"
+      "id": "d1_b3", "date": "2026-03-01",
+      "start": "09:00", "end": "11:00",
+      "title": "Stopovací hra v lese", "type_id": "main",
+      "responsible": "Lucka", "notes": "4 skupiny"
     },
     {
-      "id": "b4",
-      "date": "2026-03-01",
-      "start": "10:30",
-      "end": "11:00",
-      "title": "Svačina a pauza",
-      "type_id": "rest",
-      "responsible": null,
-      "notes": null
+      "id": "d1_b4", "date": "2026-03-01",
+      "start": "11:00", "end": "11:15",
+      "title": "Svačina", "type_id": "rest",
+      "responsible": null, "notes": null
     },
     {
-      "id": "b5",
-      "date": "2026-03-01",
-      "start": "11:00",
-      "end": "12:30",
-      "title": "Stavba iglú / přístřešků",
-      "type_id": "main",
-      "responsible": "Petr",
-      "notes": "Soutěž o nejlepší stavbu, potřeba lopaty a plachty"
+      "id": "d1_b5", "date": "2026-03-01",
+      "start": "11:15", "end": "13:00",
+      "title": "Stavba přístřešků", "type_id": "main",
+      "responsible": "Petr", "notes": "Soutěž"
     },
     {
-      "id": "b6",
-      "date": "2026-03-01",
-      "start": "12:30",
-      "end": "14:00",
-      "title": "Oběd a polední klid",
-      "type_id": "rest",
-      "responsible": "Kuchyň",
-      "notes": "Guláš + čaj"
+      "id": "d1_b6", "date": "2026-03-01",
+      "start": "13:00", "end": "14:30",
+      "title": "Oběd a polední klid", "type_id": "rest",
+      "responsible": "Kuchyň", "notes": "Guláš"
     },
     {
-      "id": "b7",
-      "date": "2026-03-01",
-      "start": "14:00",
-      "end": "16:00",
-      "title": "Orientační běh",
-      "type_id": "main",
-      "responsible": "Honza",
-      "notes": "Trasa 3 km, kontroly rozmístěny od rána"
+      "id": "d1_b7", "date": "2026-03-01",
+      "start": "14:30", "end": "17:00",
+      "title": "Orientační běh", "type_id": "main",
+      "responsible": "Honza", "notes": "Trasa 3 km"
     },
     {
-      "id": "b8",
-      "date": "2026-03-01",
-      "start": "16:00",
-      "end": "16:30",
-      "title": "Svačina",
-      "type_id": "rest",
-      "responsible": null,
-      "notes": null
+      "id": "d1_b8", "date": "2026-03-01",
+      "start": "17:00", "end": "18:00",
+      "title": "Workshopy", "type_id": "morning",
+      "responsible": "Lucka + Petr", "notes": "Uzlování / Orientace"
     },
     {
-      "id": "b9",
-      "date": "2026-03-01",
-      "start": "16:30",
-      "end": "18:00",
-      "title": "Workshopy dle výběru",
-      "type_id": "morning",
-      "responsible": "Lucka + Petr",
-      "notes": "Uzlování / Orientace s buzolou / Kresba mapy"
+      "id": "d1_b9", "date": "2026-03-01",
+      "start": "18:00", "end": "19:00",
+      "title": "Večeře", "type_id": "rest",
+      "responsible": "Kuchyň", "notes": null
     },
     {
-      "id": "b10",
-      "date": "2026-03-01",
-      "start": "18:00",
-      "end": "19:00",
-      "title": "Večeře",
-      "type_id": "rest",
-      "responsible": "Kuchyň",
-      "notes": null
+      "id": "d1_b10", "date": "2026-03-01",
+      "start": "19:00", "end": "21:30",
+      "title": "Noční hra – Světlušky", "type_id": "evening",
+      "responsible": "Honza + Kuba", "notes": "Čelovky, reflexní pásky"
     },
     {
-      "id": "b11",
-      "date": "2026-03-01",
-      "start": "19:00",
-      "end": "21:00",
-      "title": "Noční hra – Světlušky",
-      "type_id": "main",
-      "responsible": "Honza + Kuba",
-      "notes": "Potřeba: čelovky, reflexní pásky, vysílačky"
+      "id": "d2_b1", "date": "2026-03-02",
+      "start": "08:00", "end": "09:00",
+      "title": "Snídaně + balení", "type_id": "rest",
+      "responsible": "Kuchyň", "notes": null
+    },
+    {
+      "id": "d2_b2", "date": "2026-03-02",
+      "start": "09:00", "end": "11:30",
+      "title": "Závěrečná hra – Poklad", "type_id": "main",
+      "responsible": "Lucka", "notes": "Finálová aktivita víkendu"
+    },
+    {
+      "id": "d2_b3", "date": "2026-03-02",
+      "start": "11:30", "end": "12:30",
+      "title": "Oběd + vyhodnocení", "type_id": "rest",
+      "responsible": "Všichni", "notes": "Ceny pro vítěze"
+    },
+    {
+      "id": "d2_b4", "date": "2026-03-02",
+      "start": "12:30", "end": "14:00",
+      "title": "Odjezd domů", "type_id": "morning",
+      "responsible": "Martin", "notes": "Autobus 13:45"
     }
   ]
 }