personal memory agent
Merge pull request #122 from kognova/codex/update-dream-calendar-day-view
Adjust calendar day view layout
authored by
Jer Miller
and committed by
GitHub
810f5e28
ae382de6
+19
-8
+19
-8
dream/templates/calendar.html
+19
-8
dream/templates/calendar.html
···
73
73
74
74
.day-view {
75
75
position:relative;
76
-
height:800px;
76
+
height:1067px;
77
77
border-left:60px solid transparent;
78
78
}
79
79
.hour-line {
···
233
233
234
234
let html = `<div class="modal-header"><h3>${formattedDate}</h3></div><div class="modal-body"><div class='day-view'>`;
235
235
236
-
for(let h=0; h<=24; h++){
236
+
const startHour = 6;
237
+
const endHour = 22;
238
+
for(let h=startHour; h<=endHour; h++){
237
239
const label = h===0? '12am' : h<12? h+'am' : h===12? '12pm' : (h-12)+'pm';
238
-
html += `<div class='hour-line' style='top:${(h/24)*100}%'><span>${label}</span></div>`;
240
+
html += `<div class='hour-line' style='top:${((h-startHour)/(endHour-startHour))*100}%'><span>${label}</span></div>`;
239
241
}
240
242
243
+
const types = Array.from(new Set(list.map(o => o.type || 'other')));
244
+
const colWidth = 100 / types.length;
245
+
241
246
list.forEach(o => {
242
247
if(!o.startTime) return;
243
248
const start = new Date(o.startTime);
244
249
const end = o.endTime ? new Date(o.endTime) : new Date(start.getTime()+5*60000);
245
-
const s = start.getHours()*60 + start.getMinutes();
246
-
const e = end.getHours()*60 + end.getMinutes();
247
-
const top = (s/1440)*100;
248
-
const height = Math.max((e - s)/1440*100, 0.4);
250
+
let s = start.getHours()*60 + start.getMinutes();
251
+
let e = end.getHours()*60 + end.getMinutes();
252
+
s = Math.max(s, startHour*60);
253
+
e = Math.min(e, endHour*60);
254
+
if(e <= s) return;
255
+
const top = ((s - startHour*60)/((endHour-startHour)*60))*100;
256
+
const height = Math.max((e - s)/((endHour-startHour)*60)*100, 0.4);
249
257
const type = o.type || 'other';
258
+
const col = types.indexOf(type);
250
259
const title = escapeHtml(o.title || o.summary || type);
251
-
html += `<div class='occ ${type}' style='top:${top}%;height:${height}%' title='${title}'></div>`;
260
+
const left = `calc(${col*colWidth}% + 10px)`;
261
+
const width = `calc(${colWidth}% - 20px)`;
262
+
html += `<div class='occ ${type}' style='top:${top}%;height:${height}%;left:${left};width:${width};right:auto' title='${title}'></div>`;
252
263
});
253
264
254
265
html += "</div></div>";