18c12cd3e6
Introduces basic month view structure and styling with week numbers. Creates expanded month view with event details and duration-based sizing. Moves event color handling to CSS classes for better flexibility and theming.
848 lines
No EOL
36 KiB
HTML
848 lines
No EOL
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Plantempus - Month View Expanded</title>
|
|
<style>
|
|
/* Use existing Calendar Plantempus variables and styling */
|
|
:root {
|
|
/* Event duration sizing */
|
|
--pixels-per-hour: 30px;
|
|
--min-event-height: 15px; /* 30 min minimum */
|
|
|
|
--color-primary: #2196f3;
|
|
--color-secondary: #ff9800;
|
|
--color-success: #4caf50;
|
|
--color-warning: #ff5722;
|
|
--color-error: #f44336;
|
|
--color-text: #2c3e50;
|
|
--color-text-secondary: #6c757d;
|
|
--color-border: #e0e0e0;
|
|
--color-background: #ffffff;
|
|
--color-surface: #f8f9fa;
|
|
--color-hover: #f0f0f0;
|
|
|
|
--transition-fast: 0.15s ease;
|
|
--border-radius: 4px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: var(--color-surface);
|
|
color: var(--color-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Month grid container */
|
|
.month-container {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
margin: 20px;
|
|
}
|
|
|
|
/* Month grid layout - rows auto-size based on content */
|
|
.month-grid {
|
|
display: grid;
|
|
grid-template-columns: 40px repeat(7, 1fr);
|
|
grid-template-rows: 40px repeat(6, auto);
|
|
min-height: 600px;
|
|
}
|
|
|
|
/* Week number header */
|
|
.week-header {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
height: 40px;
|
|
}
|
|
|
|
/* Day headers */
|
|
.month-day-header {
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 8px 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.875rem;
|
|
height: 40px;
|
|
}
|
|
|
|
.month-day-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Week number cells */
|
|
.week-number {
|
|
grid-column: 1;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: center;
|
|
padding-top: 8px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Month day cells */
|
|
.month-day-cell {
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 8px;
|
|
background: var(--color-background);
|
|
transition: background-color var(--transition-fast);
|
|
min-height: 80px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.month-day-cell:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
.month-day-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.month-day-cell.other-month {
|
|
background: var(--color-surface);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.month-day-cell.today {
|
|
background: #f0f8ff;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
.month-day-cell.weekend {
|
|
background: #fafbfc;
|
|
}
|
|
|
|
.month-day-number {
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.month-day-cell.today .month-day-number {
|
|
color: var(--color-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Events container */
|
|
.month-events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
/* Individual events with duration-based minimum height */
|
|
.month-event {
|
|
background: #e3f2fd;
|
|
color: var(--color-text);
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
border-left: 3px solid var(--color-primary);
|
|
/* Min-height set inline based on duration */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Event time range */
|
|
.event-time-range {
|
|
font-size: 11px;
|
|
color: var(--color-text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Event title */
|
|
.event-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Event subtitle/description */
|
|
.event-subtitle {
|
|
font-size: 11px;
|
|
color: var(--color-text-secondary);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.month-event:hover {
|
|
transform: translateX(2px);
|
|
background: #d1e7fd;
|
|
}
|
|
|
|
/* Event categories */
|
|
.month-event.category-meeting {
|
|
background: #e8f5e8;
|
|
border-left-color: var(--color-success);
|
|
}
|
|
|
|
.month-event.category-meeting:hover {
|
|
background: #d4edd4;
|
|
}
|
|
|
|
.month-event.category-deadline {
|
|
background: #ffebee;
|
|
border-left-color: var(--color-error);
|
|
}
|
|
|
|
.month-event.category-deadline:hover {
|
|
background: #ffd6dc;
|
|
}
|
|
|
|
.month-event.category-work {
|
|
background: #fff8e1;
|
|
border-left-color: var(--color-secondary);
|
|
}
|
|
|
|
.month-event.category-work:hover {
|
|
background: #ffedcc;
|
|
}
|
|
|
|
.month-event.category-personal {
|
|
background: #f3e5f5;
|
|
border-left-color: #9c27b0;
|
|
}
|
|
|
|
.month-event.category-personal:hover {
|
|
background: #e8d1ec;
|
|
}
|
|
|
|
/* All-day events */
|
|
.month-event.all-day {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-left: none;
|
|
}
|
|
|
|
.month-event.all-day .event-time-range,
|
|
.month-event.all-day .event-title,
|
|
.month-event.all-day .event-subtitle {
|
|
color: white;
|
|
}
|
|
|
|
.month-event.all-day:hover {
|
|
background: linear-gradient(135deg, #5a72e8 0%, #6b42a0 100%);
|
|
}
|
|
|
|
/* Short events (30 min) - compact layout */
|
|
.month-event.short-event {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.month-event.short-event .event-time-range {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.month-event.short-event .event-title {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.month-event.short-event .event-subtitle {
|
|
display: none;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.month-container {
|
|
margin: 10px;
|
|
}
|
|
|
|
.month-grid {
|
|
grid-template-columns: 30px repeat(7, 1fr);
|
|
min-height: 500px;
|
|
}
|
|
|
|
.month-day-cell {
|
|
padding: 4px;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.month-day-header {
|
|
padding: 8px 4px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.month-event {
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.event-title {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.event-time-range,
|
|
.event-subtitle {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.week-number {
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
:root {
|
|
--pixels-per-hour: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="month-container">
|
|
<div class="month-grid">
|
|
<!-- Week number header -->
|
|
<div class="week-header">Uge</div>
|
|
|
|
<!-- Day headers -->
|
|
<div class="month-day-header">Man</div>
|
|
<div class="month-day-header">Tir</div>
|
|
<div class="month-day-header">Ons</div>
|
|
<div class="month-day-header">Tor</div>
|
|
<div class="month-day-header">Fre</div>
|
|
<div class="month-day-header">Lør</div>
|
|
<div class="month-day-header">Søn</div>
|
|
|
|
<!-- Week 1 -->
|
|
<div class="week-number">1</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">30</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">31</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal" style="min-height: 60px;">
|
|
<div class="event-time-range">20:00 - 22:00</div>
|
|
<div class="event-title">Nytårsaften</div>
|
|
<div class="event-subtitle">Fest med familie og venner</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">1</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Nytårsdag</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">2</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work" style="min-height: 30px;">
|
|
<div class="event-time-range">09:00 - 10:00</div>
|
|
<div class="event-title">Tilbage på arbejde</div>
|
|
<div class="event-subtitle">Opstart efter ferien</div>
|
|
</div>
|
|
<div class="month-event category-meeting short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">10:00 - 10:30</div>
|
|
<div class="event-title">Kick-off møde</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">3</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 45px;">
|
|
<div class="event-time-range">09:00 - 10:30</div>
|
|
<div class="event-title">Team møde</div>
|
|
<div class="event-subtitle">Q1 planning og mål</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">11:00 - 13:00</div>
|
|
<div class="event-title">Projekt review</div>
|
|
<div class="event-subtitle">Gennemgang af December projekter og status på Q1 initiativer</div>
|
|
</div>
|
|
<div class="month-event category-deadline short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">15:00 - 15:30</div>
|
|
<div class="event-title">Sprint deadline</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">4</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">5</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal" style="min-height: 75px;">
|
|
<div class="event-time-range">18:00 - 20:30</div>
|
|
<div class="event-title">Familie middag</div>
|
|
<div class="event-subtitle">Hos mormor og morfar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week 2 -->
|
|
<div class="week-number">2</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">6</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting short-event" style="min-height: 7.5px;">
|
|
<div class="event-time-range">09:15 - 09:30</div>
|
|
<div class="event-title">Stand-up</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 45px;">
|
|
<div class="event-time-range">10:00 - 11:30</div>
|
|
<div class="event-title">Code review</div>
|
|
<div class="event-subtitle">Frontend refactoring PR</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">7</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-deadline" style="min-height: 30px;">
|
|
<div class="event-time-range">12:00 - 13:00</div>
|
|
<div class="event-title">Rapport deadline</div>
|
|
<div class="event-subtitle">Månedlig status rapport</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 30px;">
|
|
<div class="event-time-range">14:00 - 15:00</div>
|
|
<div class="event-title">1:1 med chef</div>
|
|
<div class="event-subtitle">Karriere udvikling</div>
|
|
</div>
|
|
<div class="month-event category-work short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">15:30 - 16:00</div>
|
|
<div class="event-title">Design review</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">8</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work" style="min-height: 30px;">
|
|
<div class="event-time-range">10:00 - 11:00</div>
|
|
<div class="event-title">Feature demo</div>
|
|
<div class="event-subtitle">Ny dashboard funktionalitet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">9</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 60px;">
|
|
<div class="event-time-range">09:00 - 11:00</div>
|
|
<div class="event-title">Planning møde</div>
|
|
<div class="event-subtitle">Sprint 23 planning og estimering</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 45px;">
|
|
<div class="event-time-range">11:00 - 12:30</div>
|
|
<div class="event-title">Design session</div>
|
|
<div class="event-subtitle">UX workshop for ny feature</div>
|
|
</div>
|
|
<div class="month-event category-deadline short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">14:00 - 14:30</div>
|
|
<div class="event-title">Release notes</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 30px;">
|
|
<div class="event-time-range">15:00 - 16:00</div>
|
|
<div class="event-title">Tech sync</div>
|
|
<div class="event-subtitle">Arkitektur diskussion</div>
|
|
</div>
|
|
<div class="month-event category-personal short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">17:00 - 17:30</div>
|
|
<div class="event-title">Tandlæge</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">10</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">13:00 - 15:00</div>
|
|
<div class="event-title">Sprint review</div>
|
|
<div class="event-subtitle">Demo af Sprint 22 leverancer til stakeholders</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 30px;">
|
|
<div class="event-time-range">15:00 - 16:00</div>
|
|
<div class="event-title">Retrospective</div>
|
|
<div class="event-subtitle">Sprint 22 læringer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">11</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">12</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal" style="min-height: 60px;">
|
|
<div class="event-time-range">11:00 - 13:00</div>
|
|
<div class="event-title">Brunch</div>
|
|
<div class="event-subtitle">Med gamle venner fra uni</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week 3 -->
|
|
<div class="week-number">3</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">13</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">All hands møde</div>
|
|
<div class="event-subtitle">Quarterly business update</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">14:00 - 16:00</div>
|
|
<div class="event-title">Architecture planning</div>
|
|
<div class="event-subtitle">Microservices migration strategi</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">14</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work" style="min-height: 90px;">
|
|
<div class="event-time-range">10:00 - 13:00</div>
|
|
<div class="event-title">Feature deployment</div>
|
|
<div class="event-subtitle">Production release og monitoring af ny payment feature</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 45px;">
|
|
<div class="event-time-range">15:00 - 16:30</div>
|
|
<div class="event-title">Client call</div>
|
|
<div class="event-subtitle">Requirements gathering</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">15</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-deadline" style="min-height: 60px;">
|
|
<div class="event-time-range">10:00 - 12:00</div>
|
|
<div class="event-title">Client presentation</div>
|
|
<div class="event-subtitle">Q4 results og Q1 roadmap præsentation</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 30px;">
|
|
<div class="event-time-range">14:00 - 15:00</div>
|
|
<div class="event-title">Team retrospective</div>
|
|
<div class="event-subtitle">Monthly team health check</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 30px;">
|
|
<div class="event-time-range">16:00 - 17:00</div>
|
|
<div class="event-title">Bug triage</div>
|
|
<div class="event-subtitle">Priority 1 issues</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">16</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work" style="min-height: 45px;">
|
|
<div class="event-time-range">11:00 - 12:30</div>
|
|
<div class="event-title">Performance review</div>
|
|
<div class="event-subtitle">Database optimization results</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">17</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 90px;">
|
|
<div class="event-time-range">09:00 - 12:00</div>
|
|
<div class="event-title">Sprint planning</div>
|
|
<div class="event-subtitle">Sprint 24 - omfattende planning session med hele teamet</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">13:00 - 15:00</div>
|
|
<div class="event-title">Code cleanup</div>
|
|
<div class="event-subtitle">Technical debt reduction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">18</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal" style="min-height: 90px;">
|
|
<div class="event-time-range">19:00 - 22:00</div>
|
|
<div class="event-title">Koncert</div>
|
|
<div class="event-subtitle">Royal Arena - med forband og afterparty</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">19</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
|
|
<!-- Week 4 - Today -->
|
|
<div class="week-number">4</div>
|
|
<div class="month-day-cell today">
|
|
<div class="month-day-number">20</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">09:00 - 09:30</div>
|
|
<div class="event-title">Status møde</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 45px;">
|
|
<div class="event-time-range">10:30 - 12:00</div>
|
|
<div class="event-title">Refactoring session</div>
|
|
<div class="event-subtitle">Legacy code modernization</div>
|
|
</div>
|
|
<div class="month-event category-deadline" style="min-height: 30px;">
|
|
<div class="event-time-range">12:00 - 13:00</div>
|
|
<div class="event-title">Documentation due</div>
|
|
<div class="event-subtitle">API documentation update</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 45px;">
|
|
<div class="event-time-range">14:00 - 15:30</div>
|
|
<div class="event-title">Architecture review</div>
|
|
<div class="event-subtitle">System design review med senior architects</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 30px;">
|
|
<div class="event-time-range">15:30 - 16:30</div>
|
|
<div class="event-title">Performance testing</div>
|
|
<div class="event-subtitle">Load testing results</div>
|
|
</div>
|
|
<div class="month-event category-personal short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">17:00 - 17:30</div>
|
|
<div class="event-title">Gym</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">21</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-deadline" style="min-height: 120px;">
|
|
<div class="event-time-range">14:00 - 18:00</div>
|
|
<div class="event-title">Beta release</div>
|
|
<div class="event-subtitle">Full release process including deployment, smoke testing, monitoring setup og stakeholder notification</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">22</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 45px;">
|
|
<div class="event-time-range">09:00 - 10:30</div>
|
|
<div class="event-title">Architecture review</div>
|
|
<div class="event-subtitle">Final design approval</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">11:00 - 13:00</div>
|
|
<div class="event-title">Performance testing</div>
|
|
<div class="event-subtitle">Full regression test suite execution</div>
|
|
</div>
|
|
<div class="month-event category-deadline" style="min-height: 30px;">
|
|
<div class="event-time-range">14:00 - 15:00</div>
|
|
<div class="event-title">Documentation deadline</div>
|
|
<div class="event-subtitle">User guide completion</div>
|
|
</div>
|
|
<div class="month-event category-meeting" style="min-height: 45px;">
|
|
<div class="event-time-range">15:00 - 16:30</div>
|
|
<div class="event-title">Stakeholder meeting</div>
|
|
<div class="event-subtitle">Project status update</div>
|
|
</div>
|
|
<div class="month-event category-work short-event" style="min-height: 15px;">
|
|
<div class="event-time-range">16:30 - 17:00</div>
|
|
<div class="event-title">Deploy to staging</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">23</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-work all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Code cleanup day</div>
|
|
<div class="event-subtitle">Team-wide technical debt reduction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">24</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 30px;">
|
|
<div class="event-time-range">14:00 - 15:00</div>
|
|
<div class="event-title">Weekly sync</div>
|
|
<div class="event-subtitle">Cross-team alignment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">25</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell weekend">
|
|
<div class="month-day-number">26</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-personal all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Fødselsdag</div>
|
|
</div>
|
|
<div class="month-event category-personal" style="min-height: 120px;">
|
|
<div class="event-time-range">18:00 - 22:00</div>
|
|
<div class="event-title">Fødselsdagsfest</div>
|
|
<div class="event-subtitle">Stor fest med familie og venner, middag og underholdning</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week 5 -->
|
|
<div class="week-number">5</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">27</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Q1 planning - Day 1</div>
|
|
<div class="event-subtitle">Quarterly planning workshop</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">28</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Q1 planning - Day 2</div>
|
|
<div class="event-subtitle">OKR setting og roadmap</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">14:00 - 16:00</div>
|
|
<div class="event-title">Tech talks</div>
|
|
<div class="event-subtitle">Knowledge sharing session om nye teknologier</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">29</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">Q1 planning - Day 3</div>
|
|
<div class="event-subtitle">Final alignment og præsentation</div>
|
|
</div>
|
|
<div class="month-event category-deadline" style="min-height: 60px;">
|
|
<div class="event-time-range">16:00 - 18:00</div>
|
|
<div class="event-title">Monthly report</div>
|
|
<div class="event-subtitle">Januar status rapport og metrics sammensætning</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">30</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-meeting" style="min-height: 90px;">
|
|
<div class="event-time-range">15:00 - 18:00</div>
|
|
<div class="event-title">Team building</div>
|
|
<div class="event-subtitle">Off-site team building aktivitet med middag</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell">
|
|
<div class="month-day-number">31</div>
|
|
<div class="month-events">
|
|
<div class="month-event category-deadline all-day" style="min-height: 30px;">
|
|
<div class="event-time-range">Hele dagen</div>
|
|
<div class="event-title">End of month</div>
|
|
</div>
|
|
<div class="month-event category-work" style="min-height: 60px;">
|
|
<div class="event-time-range">14:00 - 16:00</div>
|
|
<div class="event-title">Month wrap-up</div>
|
|
<div class="event-subtitle">Januar review og Februar forberedelse</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">1</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">2</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
|
|
<!-- Week 6 -->
|
|
<div class="week-number">6</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">3</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">4</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">5</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">6</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">7</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">8</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
<div class="month-day-cell other-month">
|
|
<div class="month-day-number">9</div>
|
|
<div class="month-events"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Click handlers
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.month-event')) {
|
|
const event = e.target.closest('.month-event');
|
|
console.log('Event clicked:', event.querySelector('.event-title').textContent);
|
|
|
|
// Remove previous selection
|
|
document.querySelectorAll('.month-event').forEach(el => {
|
|
el.style.outline = '';
|
|
});
|
|
|
|
// Highlight selected event
|
|
event.style.outline = '2px solid var(--color-primary)';
|
|
}
|
|
|
|
if (e.target.closest('.month-day-cell')) {
|
|
const cell = e.target.closest('.month-day-cell');
|
|
const dayNumber = cell.querySelector('.month-day-number').textContent;
|
|
console.log('Day clicked:', dayNumber);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |