Changes for page Home
Last modified by Benjamin Fischer on 2025/06/04 14:20
From version 72.33
edited by Benjamin Fischer
on 2024/11/06 14:26
on 2024/11/06 14:26
Change comment:
There is no comment for this version
To version 72.47
edited by Benjamin Fischer
on 2024/11/07 11:57
on 2024/11/07 11:57
Change comment:
There is no comment for this version
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,35 +1,93 @@ 1 1 require(["jquery", "fullcalendar"], function (jq) { 2 2 const FC = jq.fullCalendar; 3 - const E = (tag, attrs, ...childs) => { 4 - if (typeof attrs === "string") attrs = [attrs]; 5 - if (attrs instanceof Array) { 6 - childs = attrs.concat(childs); 7 - attrs = {}; 8 - } 3 + const E = (tag, ...childs) => { 4 + const attrs = childs[0]?.constructor === Object ? childs.shift() : {}; 9 9 const ret = Element(tag, attrs); 10 - ret.append(...childs.flat()); 6 + ret.append(...childs.flat().filter(e => e)); 11 11 return ret; 12 12 }; 9 + const range = num => Array(num).fill().map((_, i) => i); 13 13 FC.defineView('monthCols', { 14 14 class: FC.View.extend({ 12 + render() { 13 + console.debug("render"); 14 + }, 15 15 renderSkeleton() { 16 - debugger; 17 - const chf = this.opt("columnFormat") ?? "MMM"; 18 - return; 19 - const months = Array(12).fill().map((_, month) => this.start.add({month})); 16 + console.debug("renderSkeleton"); 17 + }, 18 + renderEvents(events) { 19 + console.debug("renderEvents", events); 20 + const cf = this.opt("columnFormat") ?? "MMM"; 21 + const rf = this.opt("rowFormat") ?? "dd"; 22 + const df = this.opt("cellFormat") ?? "ddd"; 23 + const wf = this.opt("weekFormat") ?? "w"; 24 + const colspan = (df || wf) ? (1 + !!df + !!wf) : null; 20 20 26 + const ys = this.start; 27 + const ye = this.end; 28 + const yv = events.slice().sort((a,b) => a.start.diff(b.start) || a.end.diff(b.end)); 29 + 30 + const head = []; 31 + const days = Array(31).fill().map(_ => []); 32 + 33 + if (rf) { 34 + head.push(E("th")); 35 + days.forEach((arr, day) => arr.push(E("th", {class: "fc-axis"}, ys.clone().add({day}).format(rf)))); 36 + } 37 + 38 + for (const month in Array(12).fill()) { 39 + const ms = ys.clone().add({month}) 40 + const me = ms.clone().add({month: 1}); 41 + const md = me.diff(ms, "days"); 42 + const mv = yv.filter(t => ms.isBefore(t.end) || t.start.isBefore(me)); 43 + 44 + head.push(E("th", {colspan}, ms.format(cf))); 45 + 46 + const bgc = new Array(md); 47 + 48 + for (let day = 0; i < 31; i++) { 49 + if (i < md) { 50 + const ds = ms.clone().add({day}); 51 + const de = ds.clone().add({day: 1}); 52 + 53 + const oc = []; 54 + while(mv[0]?.isBefore(de)) { 55 + const v = mv.shift(); 56 + const d = Math.ceil(v.end.min(me).diff(ds, "days", true)); 57 + if (t.rendering == "background") 58 + if (t.color) 59 + for (let i=0; i<d; i++) 60 + bgc[day + i] = t.color; 61 + else { 62 + const e = E("div", t.title); 63 + e.style.height = `${100 * d}%`; 64 + if (t.color) e.style.borderColor = e.style.backgroundColor = t.color; 65 + if (t.textColor) e.style.color = t.textColor; 66 + oc.push(e); 67 + // TODO: soft-columns 68 + } 69 + } 70 + 71 + const da = {class: this.getDayClasses(d).join(" ")}; 72 + if (df) days[i].push(E("td", da, ds.format(df))); 73 + if (bgc[day]) da.style = `background-color: ${bgc[day]};`; 74 + days[i].push(E("td", da, oc)); 75 + if (wf) days[i].oush(E("td", ds.weekday() ? "" : ds.format(wf))); 76 + } else 77 + days[i].push(E("td", {colspan})); 78 + } 79 + } 80 + 81 + 21 21 this.el.addClass("fc-month-cols-view").html( 22 22 E( 23 23 "table", 24 - E("thead", {class: "fc-head"}, 25 - E("tr", months.map(m => E("td", m.format(chf))))), 26 - E("tbody", {class: "fc-body"}, 27 - Array(31).fill().map((_, day) => E("tr", 28 - months.map(m => m.add({day})).map(d => E("td", {class: this.getDayClasses(d).join(" ")}, [d.toISOString()])))) 29 - ), 85 + E("thead", {class: "fc-head"}, E("tr", head)), 86 + E("tbody", {class: "fc-body"}, days.map(d => E("tr", d))), 30 30 ) 31 31 ); 32 - 89 + 90 + //debugger; 33 33 }, 34 34 }), 35 35 duration: { year: 1 },