Toying around with it a bit, have not tested thoroughly enough to say whether there will be wider consequence, but I got the calendar to rerender when the sidebar is closed by adjusting these methods:
render(e, M) {
this.parentDomNode = e;
this.computeAttributes();
this.execute();
// Create elements if they don't exist
if (!this.#containerElement || !this.#mountElement) {
this.#containerElement = document.createElement("div");
this.#mountElement = document.createElement("div");
this.#mountElement.classList.add("tiddlywiki-calendar-widget-container");
this.#containerElement.append(this.#mountElement);
// Handle width/height attributes
const [width, height] = [this.getAttribute("width"), this.getAttribute("height")];
if (width) this.#containerElement.style.width = width;
if (height) {
this.#containerElement.style.height = height;
this.#mountElement.style.minHeight = height;
}
// Setup resize observer instead of connection observer
this.resizeObserver = new ResizeObserver(() => {
if (this.#calendar) {
this.#calendar.updateSize();
}
});
this.resizeObserver.observe(this.#mountElement);
}
if (!this.#calendar) { this.#calendar = initCalendar(this.#mountElement, this.getContext()); requestAnimationFrame(() => {
this.#calendar?.render();
});
} else {
this.#calendar.render();
}
// Append to DOM
this.domNodes.push(this.#containerElement);
e.appendChild(this.#containerElement);
}
and
refresh(b) {
let e = !1; // changed flag
let t = !1; // draft flag
const z = this.getContext();
// Check for draft changes
const hasDraftChanges = Object.keys(b).some(e => e.startsWith(draftTiddlerTitle));
if (hasDraftChanges) {
t = !0;
}
// Check for relevant tiddler changes
const hasTiddlerChanges = Object.keys(b).some(e => {
if (e.startsWith("$:/state/")) return false;
const endDateField = z.endDateFields?.[0] ?? "endDate";
return b[e].modified ? changedTiddlerInViewRange(e, this.#calendar, endDateField) : b[e].deleted;
});
if (hasTiddlerChanges) {
if (t) {
this.#triggerRefetch();
} else {
this.refreshTiddlerEventCalendar();
}
e = !0;
}
// Check for plugin settings changes
if (Object.keys(b).some(e => e.startsWith("$:/plugins/linonetwo/tw-calendar/settings"))) {
this.refreshTiddlerEventCalendar(!0);
e = !0;
}
// Handle sidebar state changes
if (Object.keys(b).some(e => e.startsWith("$:/state/event-calendar-sidebar"))) {
// Add a small delay to ensure DOM has settled
requestAnimationFrame(() => {
this.#calendar?.updateSize();
this.#triggerRefetch();
});
}
// Handle search mode changes
if (getIsSearchMode() && (
b["$:/temp/volatile/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords"]?.modified ||
b["$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/pagination"]?.modified
)) {
this.refreshTiddlerEventCalendar();
e = !0;
}
this.refreshChildren(b);
return e;
}
Since that was relatively straightforward, I’ve been toying around with a resize function for the sidebar, which I think works pretty well currently – check it out
$__plugins_linonetwo_tw-calendar_calendar-widget_widget.js.tid (1.3 MB)
Just need to trigger the calendar contents to refresh upon resize, but I’ve run out of my morning coffee and it’s time to work out Will check in again later.
EDIT: Almost forgot, you’ll need this stylesheet too:
$__plugins_linonetwo_tw-calendar_calendar-widget_widget.css.tid (654 Bytes)
Though this is functional, I have 2 observations about this method
- The correct styling of the calendar layout sidebar goes out the window if the standard layout sidebar is closed (though I have mind render as closed by default and it seems to work fine, leading me to believe it’s the collapsing itself which is triggering the problem), and
- The actual tiddlers being transcluded in the sidebar are not expanding to fill the expanded space, which would be the ideal. Currently do not know where to even look for that, but will do some investigating (I imagine it’s a simple CSS problem) if you don’t point me in the right direction first, @linonetwo
EDIT EDIT: Fixed re-render mentioned above and updated the file