diff --git a/docs/advanced/dataview.md b/docs/advanced/dataview.md index 931f0223..875d492d 100644 --- a/docs/advanced/dataview.md +++ b/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! diff --git a/src/main.ts b/src/main.ts index db16e9c4..255f8ef9 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,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() { 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) );