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