updates
This commit is contained in:
ben
+51
-17
@@ -1,5 +1,5 @@
|
||||
const API_BASE =
|
||||
"http://localhost:8000";
|
||||
"/api";
|
||||
|
||||
|
||||
|
||||
@@ -491,12 +491,14 @@ async function handleJoinRoom(event){
|
||||
// ---------- calendar (week view) ----------
|
||||
|
||||
|
||||
const CALENDAR_HOUR_HEIGHT = 48;
|
||||
const CALENDAR_SLOT_HOURS = 2;
|
||||
const CALENDAR_SLOT_HEIGHT = 48;
|
||||
|
||||
const CALENDAR_START_HOUR = 0;
|
||||
|
||||
const CALENDAR_END_HOUR = 24;
|
||||
|
||||
const PIXELS_PER_MINUTE =
|
||||
CALENDAR_SLOT_HEIGHT / (CALENDAR_SLOT_HOURS * 60);
|
||||
|
||||
function isEventCancelled(event){
|
||||
|
||||
@@ -620,25 +622,31 @@ function buildWeekCalendarHtml(events, offset){
|
||||
(CALENDAR_END_HOUR - CALENDAR_START_HOUR) * 60;
|
||||
|
||||
let trackHeight =
|
||||
(CALENDAR_END_HOUR - CALENDAR_START_HOUR) * CALENDAR_HOUR_HEIGHT;
|
||||
|
||||
((CALENDAR_END_HOUR - CALENDAR_START_HOUR) / CALENDAR_SLOT_HOURS)
|
||||
* CALENDAR_SLOT_HEIGHT;
|
||||
|
||||
// time gutter
|
||||
|
||||
let hourRows = "";
|
||||
|
||||
|
||||
for(let h = CALENDAR_START_HOUR; h < CALENDAR_END_HOUR; h++){
|
||||
for(
|
||||
let h = CALENDAR_START_HOUR;
|
||||
h < CALENDAR_END_HOUR;
|
||||
h += CALENDAR_SLOT_HOURS
|
||||
){
|
||||
|
||||
hourRows += `
|
||||
<div class="calendar-hour-label" style="height:${CALENDAR_HOUR_HEIGHT}px">
|
||||
<div
|
||||
class="calendar-hour-label"
|
||||
style="height:${CALENDAR_SLOT_HEIGHT}px"
|
||||
>
|
||||
${String(h).padStart(2, "0")}:00
|
||||
</div>
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// day columns
|
||||
|
||||
let dayColumns =
|
||||
@@ -673,13 +681,23 @@ function buildWeekCalendarHtml(events, offset){
|
||||
|
||||
let placed =
|
||||
dayEvents.map(event => {
|
||||
function parseLocalDate(dateString){
|
||||
let parts = dateString.split(/[- :]/);
|
||||
|
||||
let start =
|
||||
new Date(event.start_time);
|
||||
return new Date(
|
||||
parts[0],
|
||||
parts[1] - 1,
|
||||
parts[2],
|
||||
parts[3],
|
||||
parts[4]
|
||||
);
|
||||
}
|
||||
|
||||
let start = parseLocalDate(event.start_time);
|
||||
|
||||
let end =
|
||||
event.end_time
|
||||
? new Date(event.end_time)
|
||||
? parseLocalDate(event.end_time)
|
||||
: new Date(start.getTime() + 30 * 60000);
|
||||
|
||||
let startMinutes =
|
||||
@@ -715,8 +733,14 @@ function buildWeekCalendarHtml(events, offset){
|
||||
let blocksHtml =
|
||||
placed.map(p => {
|
||||
|
||||
let topPct =
|
||||
(p.startMinutes / totalMinutes) * 100;
|
||||
let topPx =
|
||||
(p.startMinutes - CALENDAR_START_HOUR * 60)
|
||||
* PIXELS_PER_MINUTE;
|
||||
|
||||
|
||||
let heightPx =
|
||||
(p.endMinutes - p.startMinutes)
|
||||
* PIXELS_PER_MINUTE;
|
||||
|
||||
let heightPct =
|
||||
((p.endMinutes - p.startMinutes) / totalMinutes) * 100;
|
||||
@@ -732,15 +756,25 @@ function buildWeekCalendarHtml(events, offset){
|
||||
|
||||
let timeLabel =
|
||||
new Date(p.event.start_time)
|
||||
.toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit" });
|
||||
|
||||
.toLocaleTimeString("nl-NL", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false
|
||||
});
|
||||
|
||||
console.log({
|
||||
title: p.event.title,
|
||||
startMinutes: p.startMinutes,
|
||||
endMinutes: p.endMinutes,
|
||||
topPx,
|
||||
heightPx
|
||||
});
|
||||
return `
|
||||
<div
|
||||
class="calendar-event ${colorClass}"
|
||||
style="
|
||||
top:${topPct}%;
|
||||
height:${heightPct}%;
|
||||
top:${topPx}px;
|
||||
height:${heightPx}px;
|
||||
left:${leftPct}%;
|
||||
width:${widthPct}%;
|
||||
z-index:${p.layer + 1};
|
||||
|
||||
+14
-99
@@ -370,126 +370,61 @@ form {
|
||||
/* week grid */
|
||||
|
||||
.calendar-week {
|
||||
|
||||
display: flex;
|
||||
|
||||
margin-top: 16px;
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-gutter {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 55px;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
.calendar-hour-label {
|
||||
|
||||
height: 48px; /* 2 uur = 48px */
|
||||
font-size: 11px;
|
||||
|
||||
color: var(--muted);
|
||||
|
||||
text-align: right;
|
||||
|
||||
padding-right: 8px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
transform: translateY(-6px);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-days {
|
||||
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-width: 700px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-column {
|
||||
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
border-left: 1px solid var(--border);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-header {
|
||||
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
|
||||
padding: 6px 0 10px 0;
|
||||
|
||||
padding: 6px 0;
|
||||
font-size: 12px;
|
||||
|
||||
color: var(--muted);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-header.today .calendar-day-number {
|
||||
|
||||
color: white;
|
||||
|
||||
background: var(--accent);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
padding: 2px 7px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-name {
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
font-size: 10px;
|
||||
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-number {
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--text);
|
||||
|
||||
margin-top: 2px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-day-track {
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 576px; /* 12 uur zichtbaar × 48px */
|
||||
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
@@ -498,14 +433,15 @@ form {
|
||||
transparent 1px,
|
||||
transparent 48px
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-event {
|
||||
|
||||
position: absolute;
|
||||
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
padding: 3px 6px;
|
||||
@@ -518,52 +454,31 @@ form {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0,0,0,0.25);
|
||||
|
||||
opacity: 0.92;
|
||||
|
||||
border: 1px solid rgba(255,255,255,0.4);
|
||||
|
||||
transition: opacity 0.15s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-event:hover {
|
||||
|
||||
opacity: 1;
|
||||
|
||||
z-index: 99 !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-event-time {
|
||||
|
||||
display: block;
|
||||
|
||||
font-size: 10px;
|
||||
|
||||
opacity: 0.85;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.calendar-event-title {
|
||||
|
||||
display: block;
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.event-confirmed {
|
||||
|
||||
background: #16a34a;
|
||||
|
||||
Reference in New Issue
Block a user