diff --git a/docs/advanced/dataview.md b/docs/advanced/dataview.md
index 931f0223..39c7434a 100644
--- a/docs/advanced/dataview.md
+++ b/docs/advanced/dataview.md
@@ -11,6 +11,16 @@ 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, initializeSettings } = app.plugins.plugins["obsidian-full-calendar"];
+await initializeSettings();
+let calendar = renderCalendar(this.container);
+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!
diff --git a/src/main.ts b/src/main.ts
index db16e9c4..2b5ee4f8 100644
--- a/src/main.ts
+++ b/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,18 @@ export default class FullCalendarPlugin extends Plugin {
         FOR_TEST_ONLY: () => null,
     });
 
-    renderCalendar = renderCalendar;
+    translateSources = translateSources;
+    renderCalendar = (
+        containerEl: HTMLElement,
+        eventSources: EventSourceInput[],
+        settings?: ExtraRenderProps
+    ) => {
+        if (!eventSources) {
+            eventSources = translateSources(this);
+        }
+        return calendarRender(containerEl, eventSources, settings);
+    };
+
     processFrontmatter = toEventInput;
 
     async activateView() {
@@ -202,11 +218,17 @@ export default class FullCalendarPlugin extends Plugin {
         );
     }
 
-    async saveSettings() {
+    initializeSettings = async () => {
+        if (!this.cache.initialized) {
+            await this.saveSettings();
+        }
+    };
+
+    saveSettings = async () => {
         new Notice("Resetting the event cache with new settings...");
         await this.saveData(this.settings);
         this.cache.reset(this.settings.calendarSources);
         await this.cache.populate();
         this.cache.resync();
-    }
+    };
 }
diff --git a/src/ui/calendar.ts b/src/ui/calendar.ts
index 225337e5..b773cf21 100644
--- a/src/ui/calendar.ts
+++ b/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,
diff --git a/src/ui/view.ts b/src/ui/view.ts
index 2bc033e6..28b5510b 100644
--- a/src/ui/view.ts
+++ b/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)
                 );