Adds month view design and styling
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.
This commit is contained in:
Janus Knudsen
parent
0ea4e47324
commit
18c12cd3e6
8 changed files with 1735 additions and 15 deletions
537
month-view-design.html
Normal file
537
month-view-design.html
Normal file
|
|
@ -0,0 +1,537 @@
|
||||||
|
<!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</title>
|
||||||
|
<style>
|
||||||
|
/* Use existing Calendar Plantempus variables and styling */
|
||||||
|
:root {
|
||||||
|
--hour-height: 60px;
|
||||||
|
--minute-height: 1px;
|
||||||
|
--snap-interval: 15;
|
||||||
|
--day-column-min-width: 140px;
|
||||||
|
--week-days: 7;
|
||||||
|
--header-height: 80px;
|
||||||
|
|
||||||
|
--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;
|
||||||
|
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
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 - matches existing swp-calendar-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 with week numbers */
|
||||||
|
.month-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 40px repeat(7, 1fr); /* Small column for week numbers + 7 days */
|
||||||
|
grid-template-rows: 40px repeat(6, 1fr);
|
||||||
|
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 - only day names, right aligned, smaller height */
|
||||||
|
.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: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Month day cells - similar to existing day columns */
|
||||||
|
.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);
|
||||||
|
position: relative;
|
||||||
|
min-height: 100px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Month events styling - compact version of existing events */
|
||||||
|
.month-events {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
max-height: 70px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event {
|
||||||
|
background: #e3f2fd;
|
||||||
|
color: var(--color-primary);
|
||||||
|
padding: 1px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
border-left: 2px solid var(--color-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Event categories - using existing color scheme */
|
||||||
|
.month-event.category-meeting {
|
||||||
|
background: #e8f5e8;
|
||||||
|
color: var(--color-success);
|
||||||
|
border-left-color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-deadline {
|
||||||
|
background: #ffebee;
|
||||||
|
color: var(--color-error);
|
||||||
|
border-left-color: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-work {
|
||||||
|
background: #fff8e1;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border-left-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-personal {
|
||||||
|
background: #f3e5f5;
|
||||||
|
color: #7b1fa2;
|
||||||
|
border-left-color: #9c27b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event-more {
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
padding: 1px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 9px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px dashed var(--color-border);
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event-more:hover {
|
||||||
|
background: var(--color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.month-container {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid {
|
||||||
|
grid-template-columns: 30px repeat(7, 1fr);
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-cell {
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-header {
|
||||||
|
padding: 8px 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event {
|
||||||
|
font-size: 9px;
|
||||||
|
padding: 1px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-events {
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-number {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="month-container">
|
||||||
|
<div class="month-grid">
|
||||||
|
<!-- Week number header -->
|
||||||
|
<div class="week-header">Uge</div>
|
||||||
|
|
||||||
|
<!-- Day headers - only day names, right aligned -->
|
||||||
|
<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>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">31</div>
|
||||||
|
<div class="month-events">
|
||||||
|
<div class="month-event category-personal">Nytår</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">Nytårsdag</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">Tilbage på arbejde</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">Team møde</div>
|
||||||
|
<div class="month-event category-work">Review</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell weekend">
|
||||||
|
<div class="month-day-number">4</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">Familie</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">Stand-up</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">Rapport</div>
|
||||||
|
<div class="month-event category-meeting">1:1</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">Code review</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">Planning</div>
|
||||||
|
<div class="month-event category-work">Design</div>
|
||||||
|
<div class="month-event-more">+1</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">Sprint review</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell weekend">
|
||||||
|
<div class="month-day-number">11</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">Brunch</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 hands</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">Deploy</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">Presentation</div>
|
||||||
|
<div class="month-event category-meeting">Retro</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">Bug triage</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">Planning</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">Koncert</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell weekend">
|
||||||
|
<div class="month-day-number">19</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">Status møde</div>
|
||||||
|
<div class="month-event category-work">Refactoring</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">Beta release</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">Architecture</div>
|
||||||
|
<div class="month-event category-work">Performance</div>
|
||||||
|
<div class="month-event category-deadline">Docs</div>
|
||||||
|
<div class="month-event-more">+2</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">Cleanup</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">Weekly sync</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell weekend">
|
||||||
|
<div class="month-day-number">25</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">Fødselsdag</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">Q1 planning</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell">
|
||||||
|
<div class="month-day-number">28</div>
|
||||||
|
<div class="month-events">
|
||||||
|
<div class="month-event category-work">Tech talks</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell">
|
||||||
|
<div class="month-day-number">29</div>
|
||||||
|
<div class="month-events">
|
||||||
|
<div class="month-event category-deadline">Monthly report</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">Team building</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">End of month</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">2</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>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">5</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">8</div>
|
||||||
|
</div>
|
||||||
|
<div class="month-day-cell other-month">
|
||||||
|
<div class="month-day-number">9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Add click handlers for events and days
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (e.target.classList.contains('month-event')) {
|
||||||
|
console.log('Event clicked:', e.target.textContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.classList.contains('month-event-more')) {
|
||||||
|
console.log('Show more events');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.classList.contains('month-day-cell') || 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>
|
||||||
848
month-view-expanded.html
Normal file
848
month-view-expanded.html
Normal file
|
|
@ -0,0 +1,848 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -71,8 +71,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
||||||
eventElement.style.top = `${position.top + 1}px`;
|
eventElement.style.top = `${position.top + 1}px`;
|
||||||
eventElement.style.height = `${position.height - 1}px`;
|
eventElement.style.height = `${position.height - 1}px`;
|
||||||
|
|
||||||
// Set color
|
// Color is now handled by CSS classes based on data-type attribute
|
||||||
eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
|
|
||||||
|
|
||||||
// Format time for display
|
// Format time for display
|
||||||
const startTime = this.dateCalculator.formatTime(new Date(event.start));
|
const startTime = this.dateCalculator.formatTime(new Date(event.start));
|
||||||
|
|
@ -89,7 +88,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
||||||
console.log(`BaseEventRenderer: Created event element for "${event.title}":`, {
|
console.log(`BaseEventRenderer: Created event element for "${event.title}":`, {
|
||||||
top: eventElement.style.top,
|
top: eventElement.style.top,
|
||||||
height: eventElement.style.height,
|
height: eventElement.style.height,
|
||||||
backgroundColor: eventElement.style.backgroundColor,
|
dataType: eventElement.dataset.type,
|
||||||
position: eventElement.style.position,
|
position: eventElement.style.position,
|
||||||
innerHTML: eventElement.innerHTML
|
innerHTML: eventElement.innerHTML
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,8 @@ export class DateHeaderRenderer implements HeaderRenderer {
|
||||||
const gridColumnStart = startColumnIndex + 1;
|
const gridColumnStart = startColumnIndex + 1;
|
||||||
const gridColumnEnd = endColumnIndex + 2;
|
const gridColumnEnd = endColumnIndex + 2;
|
||||||
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
|
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
|
||||||
allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
|
// Color is now handled by CSS classes based on event type
|
||||||
|
allDayEvent.dataset.type = event.type || 'work';
|
||||||
|
|
||||||
calendarHeader.appendChild(allDayEvent);
|
calendarHeader.appendChild(allDayEvent);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,18 +35,20 @@
|
||||||
--color-grid-line: #e0e0e0;
|
--color-grid-line: #e0e0e0;
|
||||||
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
||||||
--color-hour-line: rgba(0, 0, 0, 0.2);
|
--color-hour-line: rgba(0, 0, 0, 0.2);
|
||||||
--color-work-hours: rgba(0, 100, 0, 0.06);
|
--color-work-hours: rgba(242, 242, 242, 1);
|
||||||
--color-current-time: #ff0000;
|
--color-current-time: #ff0000;
|
||||||
|
|
||||||
/* Event colors */
|
/* Event colors - Updated with month-view-expanded.html color scheme */
|
||||||
--color-event-meeting: #e3f2fd;
|
--color-event-meeting: #e8f5e8;
|
||||||
--color-event-meeting-border: #2196f3;
|
--color-event-meeting-border: #4caf50;
|
||||||
--color-event-meal: #fff3e0;
|
--color-event-meal: #fff8e1;
|
||||||
--color-event-meal-border: #ff9800;
|
--color-event-meal-border: #ff9800;
|
||||||
--color-event-work: #f3e5f5;
|
--color-event-work: #fff8e1;
|
||||||
--color-event-work-border: #9c27b0;
|
--color-event-work-border: #ff9800;
|
||||||
--color-event-milestone: #e8f5e9;
|
--color-event-milestone: #ffebee;
|
||||||
--color-event-milestone-border: #4caf50;
|
--color-event-milestone-border: #f44336;
|
||||||
|
--color-event-personal: #f3e5f5;
|
||||||
|
--color-event-personal-border: #9c27b0;
|
||||||
|
|
||||||
/* UI colors */
|
/* UI colors */
|
||||||
--color-background: #ffffff;
|
--color-background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ swp-event {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
color: white;
|
color: var(--color-text);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
|
|
||||||
|
|
@ -18,28 +18,44 @@ swp-event {
|
||||||
&[data-type="meeting"] {
|
&[data-type="meeting"] {
|
||||||
background: var(--color-event-meeting);
|
background: var(--color-event-meeting);
|
||||||
border-left: 4px solid var(--color-event-meeting-border);
|
border-left: 4px solid var(--color-event-meeting-border);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type="meal"] {
|
&[data-type="meal"] {
|
||||||
background: var(--color-event-meal);
|
background: var(--color-event-meal);
|
||||||
border-left: 4px solid var(--color-event-meal-border);
|
border-left: 4px solid var(--color-event-meal-border);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type="work"] {
|
&[data-type="work"] {
|
||||||
background: var(--color-event-work);
|
background: var(--color-event-work);
|
||||||
border-left: 4px solid var(--color-event-work-border);
|
border-left: 4px solid var(--color-event-work-border);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-type="milestone"] {
|
&[data-type="milestone"] {
|
||||||
background: var(--color-event-milestone);
|
background: var(--color-event-milestone);
|
||||||
border-left: 4px solid var(--color-event-milestone-border);
|
border-left: 4px solid var(--color-event-milestone-border);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-type="personal"] {
|
||||||
|
background: var(--color-event-personal);
|
||||||
|
border-left: 4px solid var(--color-event-personal-border);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-type="deadline"] {
|
||||||
|
background: var(--color-event-milestone);
|
||||||
|
border-left: 4px solid var(--color-event-milestone-border);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
swp-event:hover {
|
swp-event:hover {
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
filter: brightness(0.95);
|
transform: translateX(2px);
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
316
wwwroot/css/calendar-month-css.css
Normal file
316
wwwroot/css/calendar-month-css.css
Normal file
|
|
@ -0,0 +1,316 @@
|
||||||
|
/* Calendar Month View Styles */
|
||||||
|
|
||||||
|
/* Month view specific container - extends swp-calendar-container for month layout */
|
||||||
|
swp-calendar[data-view="month"] swp-calendar-container {
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--color-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Month grid layout with week numbers column */
|
||||||
|
.month-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 40px repeat(7, 1fr); /* Week numbers + 7 days */
|
||||||
|
grid-template-rows: 40px repeat(6, 1fr);
|
||||||
|
min-height: 600px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Week number header cell */
|
||||||
|
.month-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Month day headers - only day names, right aligned */
|
||||||
|
.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 */
|
||||||
|
.month-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: center;
|
||||||
|
justify-content: center;
|
||||||
|
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);
|
||||||
|
position: relative;
|
||||||
|
min-height: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-cell:hover {
|
||||||
|
background: var(--color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-cell:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Other month dates (previous/next month) */
|
||||||
|
.month-day-cell.other-month {
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Today highlighting - subtle with left border */
|
||||||
|
.month-day-cell.today {
|
||||||
|
background: #f0f8ff;
|
||||||
|
border-left: 3px solid var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Weekend styling */
|
||||||
|
.month-day-cell.weekend {
|
||||||
|
background: #fafbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Day number in each cell */
|
||||||
|
.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 within each day */
|
||||||
|
.month-events {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
max-height: 70px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual month events - compact version */
|
||||||
|
.month-event {
|
||||||
|
background: #e3f2fd;
|
||||||
|
color: var(--color-primary);
|
||||||
|
padding: 1px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
border-left: 2px solid var(--color-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Event categories using existing color scheme */
|
||||||
|
.month-event.category-meeting {
|
||||||
|
background: #e8f5e8;
|
||||||
|
color: var(--color-success);
|
||||||
|
border-left-color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-deadline {
|
||||||
|
background: #ffebee;
|
||||||
|
color: var(--color-error);
|
||||||
|
border-left-color: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-work {
|
||||||
|
background: #fff8e1;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border-left-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event.category-personal {
|
||||||
|
background: #f3e5f5;
|
||||||
|
color: #7b1fa2;
|
||||||
|
border-left-color: #9c27b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "More events" indicator */
|
||||||
|
.month-event-more {
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
padding: 1px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 9px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px dashed var(--color-border);
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event-more:hover {
|
||||||
|
background: var(--color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Expanded month view - duration-based events */
|
||||||
|
.month-grid.expanded {
|
||||||
|
min-height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.expanded .month-day-cell {
|
||||||
|
min-height: 120px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.expanded .month-events {
|
||||||
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.expanded .month-event {
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
min-height: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
white-space: normal;
|
||||||
|
text-overflow: clip;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Duration-based event sizing (30px per hour) */
|
||||||
|
.month-event.duration-30min { min-height: 15px; }
|
||||||
|
.month-event.duration-1h { min-height: 30px; }
|
||||||
|
.month-event.duration-1h30 { min-height: 45px; }
|
||||||
|
.month-event.duration-2h { min-height: 60px; }
|
||||||
|
.month-event.duration-3h { min-height: 90px; }
|
||||||
|
.month-event.duration-4h { min-height: 120px; }
|
||||||
|
|
||||||
|
/* Event time display for expanded view */
|
||||||
|
.month-event-time {
|
||||||
|
font-size: 9px;
|
||||||
|
opacity: 0.8;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event-subtitle {
|
||||||
|
font-size: 9px;
|
||||||
|
opacity: 0.7;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* All-day events */
|
||||||
|
.month-event.all-day {
|
||||||
|
background: linear-gradient(90deg, var(--color-primary), rgba(33, 150, 243, 0.7));
|
||||||
|
color: white;
|
||||||
|
border-left-color: var(--color-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.month-grid {
|
||||||
|
grid-template-columns: 30px repeat(7, 1fr);
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-cell {
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-day-header {
|
||||||
|
padding: 8px 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-event {
|
||||||
|
font-size: 9px;
|
||||||
|
padding: 1px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-events {
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-week-number {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading state for month view */
|
||||||
|
swp-calendar[data-view="month"][data-loading="true"] .month-grid {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Month view navigation animation support */
|
||||||
|
.month-grid {
|
||||||
|
transition: transform var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.sliding-out-left {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.sliding-out-right {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.sliding-in-left {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
animation: slideInFromLeft var(--transition-normal) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-grid.sliding-in-right {
|
||||||
|
transform: translateX(100%);
|
||||||
|
animation: slideInFromRight var(--transition-normal) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInFromLeft {
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInFromRight {
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
<link rel="stylesheet" href="css/calendar-layout-css.css">
|
<link rel="stylesheet" href="css/calendar-layout-css.css">
|
||||||
<link rel="stylesheet" href="css/calendar-components-css.css">
|
<link rel="stylesheet" href="css/calendar-components-css.css">
|
||||||
<link rel="stylesheet" href="css/calendar-events-css.css">
|
<link rel="stylesheet" href="css/calendar-events-css.css">
|
||||||
|
<link rel="stylesheet" href="css/calendar-month-css.css">
|
||||||
<link rel="stylesheet" href="css/calendar-popup-css.css">
|
<link rel="stylesheet" href="css/calendar-popup-css.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue