fafad16926
Cleans up the codebase by removing unnecessary console log statements. These logs were primarily used for debugging and are no longer needed in the production code. This reduces noise in the console and improves overall performance.
536 lines
No EOL
19 KiB
HTML
536 lines
No EOL
19 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</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;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |