manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "oz-calendar",
 	"name": "OZ Calendar",
-	"version": "0.3.4",
+	"version": "0.2.7",
 	"minAppVersion": "0.15.0",
 	"description": "View your notes in Calendar using any YAML key with date",
 	"author": "Ozan Tellioglu",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "oz-calendar",
-	"version": "0.3.4",
+	"version": "0.2.7",
 	"description": "View your notes in Calendar using any YAML key with date",
 	"main": "main.js",
 	"scripts": {
@@ -14,9 +14,9 @@
 	"devDependencies": {
 		"@types/common-tags": "^1.8.1",
 		"@types/node": "^16.11.6",
-		"@types/react": "18.2.38",
+		"@types/react": "17.0.2",
 		"@types/react-calendar": "^3.9.0",
-		"@types/react-dom": "18.2.17",
+		"@types/react-dom": "17.0.2",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
@@ -30,9 +30,10 @@
 		"@popperjs/core": "^2.11.6",
 		"common-tags": "^1.8.2",
 		"dayjs": "1.11.7",
-		"react": "18.2.0",
+		"preact": "10",
+		"react": "npm:@preact/compat@17.0.2",
 		"react-calendar": "4.0.0",
-		"react-dom": "18.2.0",
+		"react-dom": "npm:@preact/compat@17.0.2",
 		"react-icons": "4.8.0"
 	}
 }

src/components/calendar.tsx

@@ -29,9 +29,10 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 
 	const createNote = () => {
 		let currentSelectedDay: Date = selectedDay;
-		let dateNow: Date = new Date();
+		let dateNow: Date = null;
 		setSelectedDay((selectedDay) => {
 			currentSelectedDay = selectedDay;
+			dateNow = new Date();
 			return selectedDay;
 		});
 		// Add now time details to the existing date if current date
@@ -77,7 +78,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 			return (
 				<div className="dots-wrapper">
 					{[...Array(Math.min(dotsCount, 2))].map((_, index) => (
-						<RxDotFilled key={index} viewBox="0 0 15 15" />
+						<RxDotFilled viewBox="0 0 15 15" />
 					))}
 					{dotsCount > 2 && <span>+{dotsCount - 2}</span>}
 				</div>
@@ -105,7 +106,6 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 				value={selectedDay}
 				maxDetail="month"
 				minDetail="month"
-				showWeekNumbers={plugin.settings.showWeekNumbers}
 				view="month"
 				tileContent={customTileContent}
 				tileClassName={customTileClass}

src/components/noteList.tsx

@@ -8,7 +8,6 @@ import OZCalendarPlugin from 'main';
 import { isMouseEvent, openFile } from '../util/utils';
 import { Menu, TFile } from 'obsidian';
 import { VIEW_TYPE } from 'view';
-import { OZNote } from 'types';
 
 interface NoteListComponentParams {
 	selectedDay: Date;
@@ -58,18 +57,13 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 		}
 	};
 
-	const selectedDayNotes: OZNote[] = useMemo(() => {
+	const selectedDayNotes = useMemo(() => {
 		const selectedDayIso = dayjs(selectedDay).format('YYYY-MM-DD');
-		let sortedList: OZNote[] = [];
-		if (selectedDayIso in plugin.OZCALENDARDAYS_STATE) {
-			sortedList = plugin.OZCALENDARDAYS_STATE[selectedDayIso].filter(
-				(ozItem) => ozItem.type === 'note'
-			) as OZNote[];
-		}
+		let sortedList =
+			selectedDayIso in plugin.OZCALENDARDAYS_STATE ? plugin.OZCALENDARDAYS_STATE[selectedDayIso] : [];
 		sortedList = sortedList.sort((a, b) => {
-			if (plugin.settings.sortingOption === 'name-rev')
-				[a.displayName, b.displayName] = [b.displayName, a.displayName];
-			return a.displayName.localeCompare(b.displayName, 'en', { numeric: true });
+			if (plugin.settings.sortingOption === 'name-rev') [a, b] = [b, a];
+			return extractFileName(a).localeCompare(extractFileName(b), 'en', { numeric: true });
 		});
 		return sortedList;
 	}, [selectedDay, forceValue]);
@@ -128,7 +122,7 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 						No note found
 					</div>
 				)}
-				{selectedDayNotes.map((ozNote) => {
+				{selectedDayNotes.map((notePath) => {
 					return (
 						<div
 							className={
@@ -137,12 +131,11 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 									? ' oz-calendar-overflow-hide'
 									: '')
 							}
-							id={ozNote.path}
-							key={ozNote.path}
-							onClick={(e) => openFilePath(e, ozNote.path)}
-							onContextMenu={(e) => triggerFileContextMenu(e, ozNote.path)}>
+							id={notePath}
+							onClick={(e) => openFilePath(e, notePath)}
+							onContextMenu={(e) => triggerFileContextMenu(e, notePath)}>
 							<HiOutlineDocumentText className="oz-calendar-note-line-icon" />
-							<span>{ozNote.displayName}</span>
+							<span>{extractFileName(notePath)}</span>
 						</div>
 					);
 				})}

src/main.ts

@@ -2,7 +2,7 @@ import { CachedMetadata, Menu, Plugin, TAbstractFile, TFile, addIcon } from 'obs
 import { OZCalendarView, VIEW_TYPE } from 'view';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { DayChangeCommandAction, OZCalendarDaysMap, fileToOZItem } from 'types';
+import { DayChangeCommandAction, OZCalendarDaysMap } from 'types';
 import { OZCAL_ICON } from './util/icons';
 import { OZCalendarPluginSettings, DEFAULT_SETTINGS, OZCalendarPluginSettingsTab } from './settings/settings';
 import { CreateNoteModal } from 'modal';
@@ -140,13 +140,13 @@ export default class OZCalendarPlugin extends Plugin {
 	 * @param date
 	 * @param filePath
 	 */
-	addFilePathToState = (date: string, file: TFile) => {
+	addFilePathToState = (date: string, filePath: string) => {
 		let newStateMap = this.OZCALENDARDAYS_STATE;
 		// if exists, add the new file path
 		if (date in newStateMap) {
-			newStateMap[date] = [...newStateMap[date], fileToOZItem({ note: file })];
+			newStateMap[date] = [...newStateMap[date], filePath];
 		} else {
-			newStateMap[date] = [fileToOZItem({ note: file })];
+			newStateMap[date] = [filePath];
 		}
 		this.OZCALENDARDAYS_STATE = newStateMap;
 	};
@@ -160,10 +160,8 @@ export default class OZCalendarPlugin extends Plugin {
 		let changeFlag = false;
 		let newStateMap = this.OZCALENDARDAYS_STATE;
 		for (let k of Object.keys(newStateMap)) {
-			if (newStateMap[k].some((ozItem) => ozItem.type === 'note' && ozItem.path === filePath)) {
-				newStateMap[k] = newStateMap[k].filter((ozItem) => {
-					return !(ozItem.type === 'note' && ozItem.path === filePath);
-				});
+			if (newStateMap[k].contains(filePath)) {
+				newStateMap[k] = newStateMap[k].filter((p) => p !== filePath);
 				changeFlag = true;
 			}
 		}
@@ -185,7 +183,7 @@ export default class OZCalendarPlugin extends Plugin {
 				if (k === this.settings.yamlKey) {
 					let fmValue = String(fm[k]);
 					let parsedDayISOString = dayjs(fmValue, this.settings.dateFormat).format('YYYY-MM-DD');
-					this.addFilePathToState(parsedDayISOString, file);
+					this.addFilePathToState(parsedDayISOString, file.path);
 					changeFlag = true;
 				}
 			}
@@ -217,11 +215,11 @@ export default class OZCalendarPlugin extends Plugin {
 						let parsedDayISOString = dayjs(fmValue, this.settings.dateFormat).format('YYYY-MM-DD');
 						// If date doesn't exist, create a new one
 						if (!(parsedDayISOString in this.OZCALENDARDAYS_STATE)) {
-							this.addFilePathToState(parsedDayISOString, file);
+							this.addFilePathToState(parsedDayISOString, file.path);
 						} else {
 							// if date exists and note is not in the date list
 							if (!(file.path in this.OZCALENDARDAYS_STATE[parsedDayISOString])) {
-								this.addFilePathToState(parsedDayISOString, file);
+								this.addFilePathToState(parsedDayISOString, file.path);
 							}
 						}
 					}
@@ -237,16 +235,14 @@ export default class OZCalendarPlugin extends Plugin {
 		let changeFlag = false;
 		if (file instanceof TFile && file.extension === 'md') {
 			for (let k of Object.keys(this.OZCALENDARDAYS_STATE)) {
-				for (let ozItem of this.OZCALENDARDAYS_STATE[k]) {
-					if (ozItem.type === 'note' && ozItem.path === oldPath) {
+				for (let filePath of this.OZCALENDARDAYS_STATE[k]) {
+					if (filePath === oldPath) {
+						let oldIndex = this.OZCALENDARDAYS_STATE[k].indexOf(filePath);
 						if (this.settings.dateSource === 'yaml') {
-							ozItem.path = file.path;
-							ozItem.displayName = file.basename;
+							this.OZCALENDARDAYS_STATE[k][oldIndex] = file.path;
 							changeFlag = true;
 						} else if (this.settings.dateSource === 'filename') {
-							this.OZCALENDARDAYS_STATE[k] = this.OZCALENDARDAYS_STATE[k].filter((ozItem) => {
-								return !(ozItem.type === 'note' && ozItem.path === oldPath);
-							});
+							this.OZCALENDARDAYS_STATE[k].splice(oldIndex, 1);
 							changeFlag = true;
 						}
 					}
@@ -260,10 +256,10 @@ export default class OZCalendarPlugin extends Plugin {
 			if (parsedDayISOString in this.OZCALENDARDAYS_STATE) {
 				this.OZCALENDARDAYS_STATE[parsedDayISOString] = [
 					...this.OZCALENDARDAYS_STATE[parsedDayISOString],
-					fileToOZItem({ note: file }),
+					file.path,
 				];
 			} else {
-				this.OZCALENDARDAYS_STATE[parsedDayISOString] = [fileToOZItem({ note: file })];
+				this.OZCALENDARDAYS_STATE[parsedDayISOString] = [file.path];
 			}
 			changeFlag = true;
 		}
@@ -284,10 +280,10 @@ export default class OZCalendarPlugin extends Plugin {
 				if (parsedDayISOString in this.OZCALENDARDAYS_STATE) {
 					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [
 						...this.OZCALENDARDAYS_STATE[parsedDayISOString],
-						fileToOZItem({ note: file }),
+						file.path,
 					];
 				} else {
-					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [fileToOZItem({ note: file })];
+					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [file.path];
 				}
 			}
 			this.calendarForceUpdate();
@@ -339,10 +335,10 @@ export default class OZCalendarPlugin extends Plugin {
 							if (parsedDayISOString in OZCalendarDays) {
 								OZCalendarDays[parsedDayISOString] = [
 									...OZCalendarDays[parsedDayISOString],
-									fileToOZItem({ note: mdFile }),
+									mdFile.path,
 								];
 							} else {
-								OZCalendarDays[parsedDayISOString] = [fileToOZItem({ note: mdFile })];
+								OZCalendarDays[parsedDayISOString] = [mdFile.path];
 							}
 						}
 					}
@@ -355,10 +351,10 @@ export default class OZCalendarPlugin extends Plugin {
 						if (parsedDayISOString in OZCalendarDays) {
 							OZCalendarDays[parsedDayISOString] = [
 								...OZCalendarDays[parsedDayISOString],
-								fileToOZItem({ note: mdFile }),
+								mdFile.path,
 							];
 						} else {
-							OZCalendarDays[parsedDayISOString] = [fileToOZItem({ note: mdFile })];
+							OZCalendarDays[parsedDayISOString] = [mdFile.path];
 						}
 					}
 				}

src/modal.ts

@@ -60,41 +60,32 @@ export class CreateNoteModal extends Modal {
 
 		const onClickCreateButton = async () => {
 			let newFileName = fileNameInputEl.value;
-
-			if (newFileName === '') {
+			if (newFileName !== '') {
+				let defFolderSrc = folderInputEl ? folderInputEl.value : this.plugin.settings.defaultFolder;
+				let defFolder = this.app.vault.getAbstractFileByPath(defFolderSrc);
+				if (defFolder && defFolder instanceof TFolder) {
+					// Default Text Preparation for File with YAML and Date
+					let defaultNewFileText = stripIndents`
+                    ---
+                    ${this.plugin.settings.yamlKey}: ${dayjs(this.destinationDate).format(
+						this.plugin.settings.dateFormat
+					)}
+                    ---
+                    `;
+					// Create the MD File and close the modal
+					await createNewMarkdownFile(
+						this.plugin,
+						defFolder,
+						newFileName,
+						this.plugin.settings.dateSource === 'yaml' ? defaultNewFileText : ''
+					);
+					thisModal.close();
+				} else {
+					new Notice('Folder couldnt be found in the Vault');
+				}
+			} else {
 				new Notice('You didnt provide file name');
-				return;
 			}
-
-			if (newFileName.includes('/') && !this.plugin.settings.allowSlashhDuringCreate) {
-				new Notice('You can not have a slash (/) in file name');
-				return;
-			}
-
-			let defFolderSrc = folderInputEl ? folderInputEl.value : this.plugin.settings.defaultFolder;
-			let defFolder = this.app.vault.getAbstractFileByPath(defFolderSrc);
-
-			if (!defFolder || !(defFolder instanceof TFolder)) {
-				new Notice('Folder couldnt be found in the Vault');
-				return;
-			}
-
-			// Default Text Preparation for File with YAML and Date
-			let defaultNewFileText = stripIndents`
-			---
-			${this.plugin.settings.yamlKey}: ${dayjs(this.destinationDate).format(this.plugin.settings.dateFormat)}
-			---
-			`;
-
-			// Create the MD File and close the modal
-			await createNewMarkdownFile(
-				this.plugin,
-				defFolder as TFolder,
-				newFileName,
-				this.plugin.settings.dateSource === 'yaml' ? defaultNewFileText : ''
-			);
-
-			thisModal.close();
 		};
 
 		createButton.addEventListener('click', onClickCreateButton);

src/settings/settings.ts

@@ -19,13 +19,11 @@ export interface OZCalendarPluginSettings {
 	defaultFileNamePrefix: string;
 	fixedCalendar: boolean;
 	showDestinationFolderDuringCreate: boolean;
-	allowSlashhDuringCreate: boolean;
 	openFileBehaviour: OpenFileBehaviourType;
 	sortingOption: SortingOption;
 	newNoteDate: NewNoteDateType;
 	newNoteCancelButtonReverse: boolean;
 	fileNameOverflowBehaviour: OverflowBehaviour;
-	showWeekNumbers: boolean;
 }
 
 export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
@@ -38,13 +36,11 @@ export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
 	defaultFileNamePrefix: 'YYYY-MM-DD',
 	fixedCalendar: true,
 	showDestinationFolderDuringCreate: true,
-	allowSlashhDuringCreate: false,
 	openFileBehaviour: 'current-tab',
 	sortingOption: 'name',
 	newNoteDate: 'current-date',
 	newNoteCancelButtonReverse: false,
 	fileNameOverflowBehaviour: 'hide',
-	showWeekNumbers: false,
 };
 
 export class OZCalendarPluginSettingsTab extends PluginSettingTab {
@@ -116,17 +112,6 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 					});
 			});
 
-		new Setting(containerEl)
-			.setName('Show Week Numbers')
-			.setDesc('Enable if you want to have week numbers within the calendar view')
-			.addToggle((toggle) => {
-				toggle.setValue(this.plugin.settings.showWeekNumbers).onChange((newValue) => {
-					this.plugin.settings.showWeekNumbers = newValue;
-					this.plugin.saveSettings();
-					this.plugin.calendarForceUpdate();
-				});
-			});
-
 		new Setting(containerEl)
 			.setName('Open File Behaviour')
 			.setDesc('Select the behaviour you want to have when you click on file name in the calendar view')
@@ -306,23 +291,6 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 				});
 			});
 
-		new Setting(containerEl)
-			.setName('Allow to provide slash during the file creation')
-			.setDesc(
-				`
-                Enable this option if you want to allow file creation modal to allow slash (/) in the filename, which will help creating a folder. 
-                i.e. if this option is enabled and you provide an input like Folder1/File1, this will create Folder1 and place File1 under it. If 
-                the folder exists, the file will be placed under the existing folder. This will respect the default folder location and create the 
-                new folder as a subfolder under the default one.
-                `
-			)
-			.addToggle((toggle) => {
-				toggle.setValue(this.plugin.settings.allowSlashhDuringCreate).onChange((newValue) => {
-					this.plugin.settings.allowSlashhDuringCreate = newValue;
-					this.plugin.saveSettings();
-				});
-			});
-
 		new Setting(containerEl)
 			.setName('Reverse direction of Cancel and New Note Buttons')
 			.setDesc(

src/types.ts

@@ -1,29 +1,5 @@
-import { TFile } from 'obsidian';
-
-export type OZNote = {
-	type: 'note';
-	displayName: string;
-	path: string;
-};
-
-export type OZReminder = {
-	type: 'task' | 'periodic';
-	displayName: string;
-	date: string;
-};
-
-type OZItem = OZNote | OZReminder;
-
 export interface OZCalendarDaysMap {
-	[key: string]: OZItem[];
+	[key: string]: string[];
 }
 
 export type DayChangeCommandAction = 'next-day' | 'previous-day' | 'today';
-
-export const fileToOZItem = (params: { note: TFile }): OZItem => {
-	return {
-		type: 'note',
-		displayName: params.note.basename,
-		path: params.note.path,
-	};
-};

src/view.tsx

@@ -1,8 +1,8 @@
 import { ItemView, WorkspaceLeaf } from 'obsidian';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import OZCalendarPlugin from './main';
 import MyCalendar from './components/calendar';
-import { createRoot, Root } from 'react-dom/client'; 
 
 export const VIEW_TYPE = 'oz-calendar';
 export const VIEW_DISPLAY_TEXT = 'OZ Calendar';
@@ -10,7 +10,6 @@ export const ICON = 'OZCAL_ICON';
 
 export class OZCalendarView extends ItemView {
 	plugin: OZCalendarPlugin;
-	root: Root;
 
 	constructor(leaf: WorkspaceLeaf, plugin: OZCalendarPlugin) {
 		super(leaf);
@@ -34,12 +33,11 @@ export class OZCalendarView extends ItemView {
 	}
 
 	destroy() {
-		if (this.root) this.root.unmount();
+		ReactDOM.unmountComponentAtNode(this.contentEl);
 	}
 
 	async onOpen() {
 		this.destroy();
-		this.root = createRoot(this.contentEl)
-		this.root.render(<MyCalendar plugin={this.plugin} />);
+		ReactDOM.render(<MyCalendar plugin={this.plugin} />, this.contentEl);
 	}
 }

styles.css

@@ -39,13 +39,6 @@ settings:
         type: variable-color
         format: hex
         default: '#'
-    -
-        id: oz-calendar-weeknr-date-color
-        title: Week Number Text Color
-        description: Set the color of week numbers, defaulted to the interactive-accent
-        type: variable-color
-        format: hex
-        default: '#'
 */
 
 .theme-light,
@@ -55,7 +48,6 @@ settings:
 	--oz-calendar-selected-day-background: var(--interactive-accent);
 	--oz-calendar-header-date-color: var(--interactive-accent);
 	--oz-calendar-current-day-color: #74dd58;
-	--oz-calendar-weeknr-date-color: var(--color-accent-2);
 }
 
 .oz-cal-coffee-div,
@@ -72,12 +64,6 @@ settings:
 	fill: var(--icon-color) !important;
 }
 
-.oz-calendar-plugin-view {
-	min-height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
 .oz-calendar-plugin-view .react-calendar__tile.react-calendar__month-view__days__day:hover {
 	background: var(--background-secondary-alt);
 }
@@ -166,10 +152,10 @@ settings:
 }
 
 .oz-calendar-notelist-container {
+	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
-	display: block;
-	padding: 5px;
-	flex: 1;
+	vertical-align: middle;
 }
 
 .oz-calendar-nav-action-plus {
@@ -215,6 +201,11 @@ settings:
 	opacity: 0.6;
 }
 
+.oz-calendar-notelist-container {
+	display: block;
+	padding: 5px;
+}
+
 .oz-calendar-note-line {
 	padding-top: 3px;
 	padding-bottom: 3px;
@@ -278,14 +269,6 @@ settings:
 	vertical-align: top;
 }
 
-.oz-calendar-plugin-view .react-calendar__month-view__weekNumbers {
-	display: block !important;
-	color: var(--oz-calendar-weeknr-date-color);
-	flex-basis: auto !important;
-	background-color: var(--background-modifier-cover);
-	font-size: var(--nav-item-size);
-}
-
 /*  END - Fixed Calendar */
 
 .oz-calendar-modal-inputel {

versions.json

@@ -1,11 +1,4 @@
 {
-	"0.3.4": "0.15.0",
-	"0.3.3": "0.15.0",
-	"0.3.2": "0.15.0",
-	"0.3.1": "0.15.0",
-	"0.3.0": "0.15.0",
-	"0.2.9": "0.15.0",
-	"0.2.8": "0.15.0",
 	"0.2.7": "0.15.0",
 	"0.2.6": "0.15.0",
 	"0.2.5": "0.15.0",