Changes for page Home

Summary

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

Details

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -1,37 +1,107 @@
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({
15	15	render() {
	13	+ console.debug("render");
	14	+ },
	15	+ renderSkeleton() {
	16	+ console.debug("renderSkeleton");
	17	+ },
	18	+ renderEvents(events) {
	19	+ console.debug("renderEvents", events);
16	16	debugger;
17		- const chf = this.opt("columnFormat") ?? "MMM";
18		- return;
19		- const start = this.start ?? FC.moment({year: FC.moment().year()});
20		- const months = Array(12).fill().map((_, month) => start.add({month}));
	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;
21	21
	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	+
22	22	this.el.addClass("fc-month-cols-view").html(
23	23	E(
24	24	"table",
25		- E("thead", {class: "fc-head"},
26		- E("tr", months.map(m => E("td", m.format(chf))))),
27		- E("tbody", {class: "fc-body"},
28		- Array(31).fill().map((_, day) => E("tr",
29		- months.map(m => m.add({day})).map(d => E("td", {class: this.getDayClasses(d).join(" ")}, [d.toISOString()]))))
30		- ),
	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))),
31	31	)
32	32	);
33		-
34		- },
	104	+ }
35	35	}),
36	36	duration: { year: 1 },
37	37	});
...	...	@@ -46,6 +46,7 @@
46	46	},
47	47	monthCols: {
48	48	columnFormat: "MMM",
	119	+ weekFormat: "W",
49	49	titleFormat: "YYYY",
50	50	buttonText: "year",
51	51	},

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,5 +1,32 @@
1		-#calendarCustom {
	1	+#calendarCustom.fc {
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	+ }
5	5	}