Changes for page Home

Summary

• Objects (2 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -1,107 +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		- render() {
13		- console.debug("render");
14		- },
15	15	renderSkeleton() {
16		- console.debug("renderSkeleton");
17		- },
18		- renderEvents(events) {
19		- console.debug("renderEvents", events);
20		- debugger;
21		- try {
22		- this._renderFun(events);
23		- } catch (e) {
24		- console.exception(e);
25		- }
26		- },
27		- _renderFun(events) {
28		- const cf = this.opt("columnFormat") ?? "MMM";
29		- const rf = this.opt("rowFormat") ?? "D";
30		- const df = this.opt("cellFormat") ?? "dd";
31		- const wf = this.opt("weekFormat") ?? "w";
32		- const colspan = (df || wf) ? (1 + !!df + !!wf) : null;
	16	+ const chf = this.opt("columnFormat") ?? "MMM";
	17	+ const months = Array(12).fill().map((_, month) => this.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 cols = [];
39		- const head = [];
40		- const days = Array(31).fill().map(_ => []);
41		-
42		- if (rf) {
43		- cols.push(E("col", {class: "fc-fitCol"}));
44		- head.push(E("th"));
45		- days.forEach((arr, day) => arr.push(E("th", {class: "fc-axis"}, ys.clone().add({day}).format(rf))));
46		- }
47		-
48		- for (const month of range(12)) {
49		- const ms = ys.clone().add({month})
50		- const me = ms.clone().add({month: 1});
51		- const md = me.diff(ms, "days");
52		- const mv = yv.filter(t => ms.isBefore(t.end) && t.start.isBefore(me));
53		-
54		- if (df) cols.push(E("col", {class: "fc-fitCol fc-fade fc-borderLeft"}));
55		- cols.push(E("col", {class: df ? null : "fc-borderLeft"}));
56		- if (wf) cols.push(E("col", {class: "fc-fitCol fc-fade"}));
57		- head.push(E("th", {colspan}, ms.format(cf)));
58		-
59		- const bgc = new Array(md);
60		-
61		- for (const day of range(31)) {
62		- if (day < md) {
63		- const ds = ms.clone().add({day});
64		- const de = ds.clone().add({day: 1});
65		-
66		- const oc = [];
67		- while(mv[0]?.start.isBefore(de)) {
68		- const v = mv.shift();
69		- const d = Math.ceil(v.end.max(me).diff(ds, "days", true));
70		- if (v.rendering == "background") {
71		- if (v.color)
72		- for (const i of range(d))
73		- bgc[day + i] = v.color;
74		- } else {
75		- const e = E("div", v.title);
76		- e.style.height = `${100 * d}%`;
77		- if (v.color) e.style.borderColor = e.style.backgroundColor = v.color;
78		- if (v.textColor) e.style.color = v.textColor;
79		- oc.push(e);
80		- // TODO: soft-columns
81		- }
82		- }
83		-
84		- const style = bgc[day] && `background-color: ${bgc[day]};`;
85		- const dc = this.getDayClasses(ds);
86		- const da = sub => ({class: dc.concat(sub).join(" "), style});
87		- if (df) days[day].push(E("td", da("fc-dayVal"), ds.format(df)));
88		- days[day].push(E("td", da("fc-mainVal"), oc));
89		- if (wf) days[day].push(E("td", da("fc-weekVal"), ds.weekday() ? "" : ds.format(wf)));
90		- } else
91		- days[day].push(E("td", {colspan}));
92		- }
93		- }
94		-
95		-
96	96	this.el.addClass("fc-month-cols-view").html(
97	97	E(
98	98	"table",
99		- E("colgroup", cols),
100		- E("thead", {class: "fc-head"}, E("tr", head)),
101		- E("tbody", {class: "fc-body"}, days.map(d => E("tr", d))),
	22	+ E("thead", {class: "fc-head"},
	23	+ E("tr", {}
	24	+ months.map(m => E("td", m.format(chf))))),
	25	+ E("tbody", {class: "fc-body"},
	26	+ Array(31).fill().map((_, day) =>
	27	+ months.map(m => m.add({day})).map(d =>
	28	+ E("td", {class: this.getDayClasses(d).join(" ")}, [d.toISOString()])))
	29	+ ),
102	102	)
103	103	);
104		- }
	32	+ debugger;
	33	+ },
105	105	}),
106	106	duration: { year: 1 },
107	107	});
...	...	@@ -116,7 +116,6 @@
116	116	},
117	117	monthCols: {
118	118	columnFormat: "MMM",
119		- weekFormat: "W",
120	120	titleFormat: "YYYY",
121	121	buttonText: "year",
122	122	},

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,32 +1,5 @@
1		-#calendarCustom.fc {
	1	+#calendarCustom {
2	2	td.fc-sat, td.fc-sun {
3	3	background-color: #f5f5f5;
4	4	}
5		- .fc-month-cols-view > table {
6		- table-layout: auto;
7		- td, th {
8		- border-width: 0px;
9		- }
10		- col.fc-fitCol {
11		- width: 1px;
12		- }
13		- col.fc-borderLeft {
14		- border-left-width: 1px;
15		- }
16		- .fc-body {
17		- td {
18		- position: relative;
19		- & > div {
20		- position: absolute;
21		- width: 100%;
22		- }
23		- }
24		- td.fc-weekVal {
25		- text-align: right;
26		- }
27		- .fc-fade {
28		- opacity: 0.3;
29		- }
30		- }
31		- }
32	32	}