Add sidebar view (#234)

fixes #51

docs/getting_started.md

@@ -11,3 +11,9 @@ Open Full Calendar from the command palette or the ribbon icon for the first tim
 Either click on the ribbon icon, or run the "Full Calendar: Open Calendar" command from the command palette.
 
 ![Open calendar](assets/open-calendar.gif)
+
+## Sidebar Calendar
+
+You can also open the calendar in the sidebar with the "Open in sidebar" command.
+
+![Sidebar calendar](assets/sidebar.gif)

manifest.json

@@ -2,7 +2,7 @@
 	"id": "obsidian-full-calendar",
 	"name": "Full Calendar",
 	"version": "0.9.1",
-	"minAppVersion": "0.12.0",
+	"minAppVersion": "1.1.1",
 	"description": "Obsidian integration with Full Calendar (fullcalendar.io)",
 	"author": "Davis Haupt",
 	"authorUrl": "https://davi.sh",

package.json

@@ -32,7 +32,7 @@
 		"builtin-modules": "^3.2.0",
 		"esbuild": "0.13.12",
 		"husky": "^7.0.4",
-		"obsidian": "^0.12.17",
+		"obsidian": "^1.1.0",
 		"prettier": "2.5.1",
 		"tslib": "2.3.1",
 		"typescript": "4.4.4"
@@ -49,7 +49,7 @@
 		"dav": "^1.8.0",
 		"ical.js": "^1.4.0",
 		"luxon": "^2.3.0",
-		"moment": "2.29.1",
+		"moment": "^2.29.4",
 		"obsidian-daily-notes-interface": "^0.9.4",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"

src/main.ts

@@ -1,5 +1,9 @@
 import { MarkdownView, Plugin } from "obsidian";
-import { CalendarView, FULL_CALENDAR_VIEW_TYPE } from "./ui/view";
+import {
+	CalendarView,
+	FULL_CALENDAR_SIDEBAR_VIEW_TYPE,
+	FULL_CALENDAR_VIEW_TYPE,
+} from "./ui/view";
 import { renderCalendar } from "./ui/calendar";
 
 import { EventModal } from "./ui/modal";
@@ -18,29 +22,39 @@ export default class FullCalendarPlugin extends Plugin {
 	processFrontmatter = toEventInput;
 
 	async activateView() {
-		this.app.workspace.detachLeavesOfType(FULL_CALENDAR_VIEW_TYPE);
-
-		await this.app.workspace.getUnpinnedLeaf().setViewState({
-			type: FULL_CALENDAR_VIEW_TYPE,
-			active: true,
-		});
-
-		this.app.workspace.revealLeaf(
-			this.app.workspace.getLeavesOfType(FULL_CALENDAR_VIEW_TYPE)[0]
+		const leaves = this.app.workspace.getLeavesOfType(
+			FULL_CALENDAR_VIEW_TYPE
 		);
+		if (leaves.length === 0) {
+			const leaf = this.app.workspace.getLeaf("tab");
+			await leaf.setViewState({
+				type: FULL_CALENDAR_VIEW_TYPE,
+				active: true,
+			});
+		} else {
+			await Promise.all(
+				leaves.map((l) => (l.view as CalendarView).onOpen())
+			);
+		}
 	}
 	async onload() {
 		await this.loadSettings();
 
 		this.registerView(
 			FULL_CALENDAR_VIEW_TYPE,
-			(leaf) => new CalendarView(leaf, this)
+			(leaf) => new CalendarView(leaf, this, false)
 		);
+
+		this.registerView(
+			FULL_CALENDAR_SIDEBAR_VIEW_TYPE,
+			(leaf) => new CalendarView(leaf, this, true)
+		);
+
 		this.addRibbonIcon(
 			"calendar-glyph",
 			"Open Full Calendar",
-			(_: MouseEvent) => {
-				this.activateView();
+			async (_: MouseEvent) => {
+				await this.activateView();
 			}
 		);
 
@@ -60,6 +74,24 @@ export default class FullCalendarPlugin extends Plugin {
 				this.activateView();
 			},
 		});
+
+		this.addCommand({
+			id: "full-calendar-open-sidebar",
+			name: "Open in sidebar",
+			callback: () => {
+				if (
+					this.app.workspace.getLeavesOfType(
+						FULL_CALENDAR_SIDEBAR_VIEW_TYPE
+					).length
+				) {
+					return;
+				}
+				this.app.workspace.getRightLeaf(false).setViewState({
+					type: FULL_CALENDAR_SIDEBAR_VIEW_TYPE,
+				});
+			},
+		});
+
 		this.addCommand({
 			id: "full-calendar-upgrade-note",
 			name: "Upgrade note to event",
@@ -81,6 +113,7 @@ export default class FullCalendarPlugin extends Plugin {
 
 	onunload() {
 		this.app.workspace.detachLeavesOfType(FULL_CALENDAR_VIEW_TYPE);
+		this.app.workspace.detachLeavesOfType(FULL_CALENDAR_SIDEBAR_VIEW_TYPE);
 	}
 
 	async loadSettings() {

src/models/DailyNoteEvent.ts

@@ -116,7 +116,7 @@ export class DailyNoteEvent extends LocalEvent {
 		}
 		const m = moment(data.date);
 		// @ts-ignore
-		let file = getDailyNote(m, getAllDailyNotes());
+		let file = getDailyNote(m, getAllDailyNotes()) as TFile;
 		if (!file) {
 			// @ts-ignore
 			file = await createDailyNote(m);
@@ -153,7 +153,7 @@ export class DailyNoteEvent extends LocalEvent {
 		if (newData.date !== oldData.date) {
 			const m = moment(newData.date);
 			// @ts-ignore
-			let note = getDailyNote(m, getAllDailyNotes());
+			let note = getDailyNote(m, getAllDailyNotes()) as TFile;
 			if (!note) {
 				// @ts-ignore
 				note = await createDailyNote(m);

src/models/DailyNoteSource.ts

@@ -81,7 +81,9 @@ export class DailyNoteSource extends EventSource {
 		const notes = getAllDailyNotes();
 		const events = (
 			await Promise.all(
-				Object.values(notes).map((f) => this.getAllEventsFromFile(f))
+				Object.values(notes).map((f) =>
+					this.getAllEventsFromFile(f as TFile)
+				)
 			)
 		)
 			.flat()

src/ui/calendar.ts

@@ -33,6 +33,7 @@ interface ExtraRenderProps {
 		mouseEvent: MouseEvent
 	) => Promise<void>;
 	toggleTask?: (event: EventApi, isComplete: boolean) => Promise<boolean>;
+	forceNarrow?: boolean;
 }
 
 export function renderCalendar(
@@ -41,6 +42,7 @@ export function renderCalendar(
 	settings?: ExtraRenderProps
 ): Calendar {
 	const isMobile = window.innerWidth < 500;
+	const isNarrow = settings?.forceNarrow || isMobile;
 	const {
 		eventClick,
 		select,
@@ -80,17 +82,22 @@ export function renderCalendar(
 		],
 		googleCalendarApiKey: "AIzaSyDIiklFwJXaLWuT_4y6I9ZRVVsPuf4xGrk",
 		initialView:
-			settings?.initialView?.[isMobile ? "mobile" : "desktop"] ||
-			(isMobile ? "timeGrid3Days" : "timeGridWeek"),
+			settings?.initialView?.[isNarrow ? "mobile" : "desktop"] ||
+			(isNarrow ? "timeGrid3Days" : "timeGridWeek"),
 		nowIndicator: true,
 		scrollTimeReset: false,
 
-		headerToolbar: !isMobile
+		headerToolbar: !isNarrow
 			? {
 					left: "prev,next today",
 					center: "title",
 					right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
 			  }
+			: !isMobile
+			? {
+					right: "today,prev,next",
+					left: "timeGrid3Days,timeGridDay,listWeek",
+			  }
 			: false,
 		footerToolbar: isMobile
 			? {
@@ -103,7 +110,7 @@ export function renderCalendar(
 			timeGridDay: {
 				type: "timeGrid",
 				duration: { days: 1 },
-				buttonText: isMobile ? "1" : "day",
+				buttonText: isNarrow ? "1" : "day",
 			},
 			timeGrid3Days: {
 				type: "timeGrid",

src/ui/modal.ts

@@ -159,8 +159,10 @@ export class EventModal extends Modal {
 								if (this.event instanceof LocalEvent) {
 									let leaf =
 										this.app.workspace.getMostRecentLeaf();
-									await this.event.openIn(leaf);
-									this.close();
+									if (leaf) {
+										await this.event.openIn(leaf);
+										this.close();
+									}
 								}
 						  }
 						: undefined,