Default Calendar Sources for renderCalendar + Cache Bugfix (Breaking Option)

docs/advanced/dataview.md

@@ -6,11 +6,19 @@ Create calendars inline with your notes from [dataviewjs](https://blacksmithgu.g
 ```dataviewjs
 this.container.style.minHeight = "500px";
 const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
-let calendar = renderCalendar(this.container, [[{start: new Date(), id: "id", title: "Now and for an hour"}]]);
-calendar.render()
+renderCalendar(this.container, [[{start: new Date(), id: "id", title: "Now and for an hour"}]])
+  .then(calendar => calendar.render());
 ```
 ````
 
-Unfortunately, there's a bug on first render and you need to interact with the calendar by changing the week or view before it renders properly.
+`renderCalendar()` includes all events from all event sources set in the global settings when no event sources are passed in.
+
+````
+```dataviewjs
+this.container.style.minHeight = "500px";
+const { renderCalendar } = app.plugins.plugins["obsidian-full-calendar"];
+renderCalendar(this.container).then(calendar => calendar.render());
+```
+````
 
 `renderCalendar()` exposes the FullCalendar API directly, so check out [the event parsing documentation](https://fullcalendar.io/docs/event-parsing) to see everything you can do here!

src/main.ts

@@ -4,8 +4,12 @@ import {
     FULL_CALENDAR_SIDEBAR_VIEW_TYPE,
     FULL_CALENDAR_VIEW_TYPE,
 } from "./ui/view";
-import { renderCalendar } from "./ui/calendar";
+import {
+    renderCalendar as calendarRender,
+    ExtraRenderProps,
+} from "./ui/calendar";
 import { toEventInput } from "./ui/interop";
+import { translateSources } from "./ui/view";
 import {
     DEFAULT_SETTINGS,
     FullCalendarSettings,
@@ -19,6 +23,7 @@ import FullNoteCalendar from "./calendars/FullNoteCalendar";
 import DailyNoteCalendar from "./calendars/DailyNoteCalendar";
 import ICSCalendar from "./calendars/ICSCalendar";
 import CalDAVCalendar from "./calendars/CalDAVCalendar";
+import { EventSourceInput } from "@fullcalendar/core";
 
 export default class FullCalendarPlugin extends Plugin {
     settings: FullCalendarSettings = DEFAULT_SETTINGS;
@@ -58,7 +63,21 @@ export default class FullCalendarPlugin extends Plugin {
         FOR_TEST_ONLY: () => null,
     });
 
-    renderCalendar = renderCalendar;
+    translateSources = translateSources;
+    renderCalendar = async (
+        containerEl: HTMLElement,
+        eventSources: EventSourceInput[],
+        settings?: ExtraRenderProps
+    ) => {
+        if (!eventSources) {
+            if (!this.cache.initialized) {
+                await this.saveSettings();
+            }
+            eventSources = translateSources(this);
+        }
+        return calendarRender(containerEl, eventSources, settings);
+    };
+
     processFrontmatter = toEventInput;
 
     async activateView() {

src/ui/calendar.ts

@@ -35,7 +35,7 @@ rrulePlugin.recurringTypes[0].expand = function (errd, fr, de) {
         });
 };
 
-interface ExtraRenderProps {
+export interface ExtraRenderProps {
     eventClick?: (info: EventClickArg) => void;
     select?: (
         startDate: Date,

src/ui/view.ts

@@ -50,6 +50,17 @@ function getCalendarColors(color: string | null | undefined): {
     };
 }
 
+export function translateSources(plugin: FullCalendarPlugin) {
+    return plugin.cache.getAllEvents().map(
+        ({ events, editable, color, id }): EventSourceInput => ({
+            id,
+            events: events.flatMap((e) => toEventInput(e.id, e.event) || []),
+            editable,
+            ...getCalendarColors(color),
+        })
+    );
+}
+
 export class CalendarView extends ItemView {
     plugin: FullCalendarPlugin;
     inSidebar: boolean;
@@ -80,19 +91,6 @@ export class CalendarView extends ItemView {
         return this.inSidebar ? "Full Calendar" : "Calendar";
     }
 
-    translateSources() {
-        return this.plugin.cache.getAllEvents().map(
-            ({ events, editable, color, id }): EventSourceInput => ({
-                id,
-                events: events.flatMap(
-                    (e) => toEventInput(e.id, e.event) || []
-                ),
-                editable,
-                ...getCalendarColors(color),
-            })
-        );
-    }
-
     async onOpen() {
         await this.plugin.loadSettings();
         if (!this.plugin.cache) {
@@ -116,7 +114,7 @@ export class CalendarView extends ItemView {
             return;
         }
 
-        const sources: EventSourceInput[] = this.translateSources();
+        const sources: EventSourceInput[] = translateSources(this.plugin);
 
         if (this.fullCalendarView) {
             this.fullCalendarView.destroy();
@@ -301,7 +299,7 @@ export class CalendarView extends ItemView {
         this.callback = this.plugin.cache.on("update", (payload) => {
             if (payload.type === "resync") {
                 this.fullCalendarView?.removeAllEventSources();
-                const sources = this.translateSources();
+                const sources = translateSources(this.plugin);
                 sources.forEach((source) =>
                     this.fullCalendarView?.addEventSource(source)
                 );