v0.3.4 Release

README.md

@@ -8,6 +8,8 @@ If you like the see your notes on a Calendar and easily find them using a certai
 
 ## Configure
 
+> IMPORTANT: Please make sure that you check the date formatting of the library, which is used by this plugin following [Day.js Date Format Link](https://day.js.org/docs/en/display/format).
+
 ### 01 YAML Option as Date Source
 
 1. Go to the plugin settings

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "oz-calendar",
 	"name": "OZ Calendar",
-	"version": "0.1.9",
+	"version": "0.3.4",
 	"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.1.9",
+	"version": "0.3.4",
 	"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": "17.0.2",
+		"@types/react": "18.2.38",
 		"@types/react-calendar": "^3.9.0",
-		"@types/react-dom": "17.0.2",
+		"@types/react-dom": "18.2.17",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
@@ -30,10 +30,9 @@
 		"@popperjs/core": "^2.11.6",
 		"common-tags": "^1.8.2",
 		"dayjs": "1.11.7",
-		"preact": "10",
-		"react": "npm:@preact/compat@17.0.2",
+		"react": "18.2.0",
 		"react-calendar": "4.0.0",
-		"react-dom": "npm:@preact/compat@17.0.2",
+		"react-dom": "18.2.0",
 		"react-icons": "4.8.0"
 	}
 }

src/components/calendar.tsx

@@ -29,10 +29,9 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 
 	const createNote = () => {
 		let currentSelectedDay: Date = selectedDay;
-		let dateNow: Date = null;
+		let dateNow: Date = new Date();
 		setSelectedDay((selectedDay) => {
 			currentSelectedDay = selectedDay;
-			dateNow = new Date();
 			return selectedDay;
 		});
 		// Add now time details to the existing date if current date
@@ -78,7 +77,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 			return (
 				<div className="dots-wrapper">
 					{[...Array(Math.min(dotsCount, 2))].map((_, index) => (
-						<RxDotFilled viewBox="0 0 15 15" />
+						<RxDotFilled key={index} viewBox="0 0 15 15" />
 					))}
 					{dotsCount > 2 && <span>+{dotsCount - 2}</span>}
 				</div>
@@ -87,15 +86,31 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 		return null;
 	};
 
+	const customTileClass = ({ activeStartDate, date, view }: CalendarTileProperties) => {
+		// Assign a custom class in case the day is the current day
+		let today = new Date();
+		return date.getFullYear() === today.getFullYear() &&
+			date.getMonth() === today.getMonth() &&
+			date.getDate() === today.getDate()
+			? 'oz-calendar-plugin-today'
+			: '';
+	};
+
+	const fixedCalendarClass = plugin.settings.fixedCalendar ? 'fixed' : '';
+
 	return (
-		<div className={'oz-calendar-plugin-view' + (plugin.settings.fixedCalendar ? ' fixed' : '')}>
+		<div className={'oz-calendar-plugin-view ' + fixedCalendarClass}>
 			<Calendar
 				onChange={setSelectedDay}
 				value={selectedDay}
 				maxDetail="month"
 				minDetail="month"
+				showWeekNumbers={plugin.settings.showWeekNumbers}
 				view="month"
 				tileContent={customTileContent}
+				tileClassName={customTileClass}
+				calendarType={plugin.settings.calendarType}
+				showFixedNumberOfWeeks={plugin.settings.fixedCalendar}
 				activeStartDate={activeStartDate}
 				onActiveStartDateChange={(props) => {
 					if (props.action === 'next') {

src/components/noteList.tsx

@@ -8,6 +8,7 @@ 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;
@@ -57,13 +58,18 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 		}
 	};
 
-	const selectedDayNotes = useMemo(() => {
+	const selectedDayNotes: OZNote[] = useMemo(() => {
 		const selectedDayIso = dayjs(selectedDay).format('YYYY-MM-DD');
-		let sortedList =
-			selectedDayIso in plugin.OZCALENDARDAYS_STATE ? plugin.OZCALENDARDAYS_STATE[selectedDayIso] : [];
+		let sortedList: OZNote[] = [];
+		if (selectedDayIso in plugin.OZCALENDARDAYS_STATE) {
+			sortedList = plugin.OZCALENDARDAYS_STATE[selectedDayIso].filter(
+				(ozItem) => ozItem.type === 'note'
+			) as OZNote[];
+		}
 		sortedList = sortedList.sort((a, b) => {
-			if (plugin.settings.sortingOption === 'name-rev') [a, b] = [b, a];
-			return extractFileName(a).localeCompare(extractFileName(b), 'en', { numeric: true });
+			if (plugin.settings.sortingOption === 'name-rev')
+				[a.displayName, b.displayName] = [b.displayName, a.displayName];
+			return a.displayName.localeCompare(b.displayName, 'en', { numeric: true });
 		});
 		return sortedList;
 	}, [selectedDay, forceValue]);
@@ -111,22 +117,32 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 					/>
 				</div>
 			</div>
-			<div className="oz-calendar-notelist-container">
+			<div
+				className={
+					'oz-calendar-notelist-container ' +
+					(plugin.settings.fileNameOverflowBehaviour == 'scroll' ? 'oz-calendar-overflow-scroll' : '')
+				}>
 				{selectedDayNotes.length === 0 && (
 					<div className="oz-calendar-note-no-note">
 						<RiPhoneFindLine className="oz-calendar-no-note-icon" />
 						No note found
 					</div>
 				)}
-				{selectedDayNotes.map((notePath) => {
+				{selectedDayNotes.map((ozNote) => {
 					return (
 						<div
-							className="oz-calendar-note-line"
-							id={notePath}
-							onClick={(e) => openFilePath(e, notePath)}
-							onContextMenu={(e) => triggerFileContextMenu(e, notePath)}>
+							className={
+								'oz-calendar-note-line' +
+								(plugin.settings.fileNameOverflowBehaviour == 'hide'
+									? ' oz-calendar-overflow-hide'
+									: '')
+							}
+							id={ozNote.path}
+							key={ozNote.path}
+							onClick={(e) => openFilePath(e, ozNote.path)}
+							onContextMenu={(e) => triggerFileContextMenu(e, ozNote.path)}>
 							<HiOutlineDocumentText className="oz-calendar-note-line-icon" />
-							<span>{extractFileName(notePath)}</span>
+							<span>{ozNote.displayName}</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 } from 'types';
+import { DayChangeCommandAction, OZCalendarDaysMap, fileToOZItem } from 'types';
 import { OZCAL_ICON } from './util/icons';
 import { OZCalendarPluginSettings, DEFAULT_SETTINGS, OZCalendarPluginSettingsTab } from './settings/settings';
 import { CreateNoteModal } from 'modal';
@@ -110,6 +110,14 @@ export default class OZCalendarPlugin extends Plugin {
 				);
 			},
 		});
+
+		this.addCommand({
+			id: 'oz-calendar-open-leaf',
+			name: 'Open OZ Calendar',
+			callback: () => {
+				this.openOZCalendarLeaf({ showAfterAttach: true });
+			},
+		});
 	}
 
 	onunload() {
@@ -132,13 +140,13 @@ export default class OZCalendarPlugin extends Plugin {
 	 * @param date
 	 * @param filePath
 	 */
-	addFilePathToState = (date: string, filePath: string) => {
+	addFilePathToState = (date: string, file: TFile) => {
 		let newStateMap = this.OZCALENDARDAYS_STATE;
 		// if exists, add the new file path
 		if (date in newStateMap) {
-			newStateMap[date] = [...newStateMap[date], filePath];
+			newStateMap[date] = [...newStateMap[date], fileToOZItem({ note: file })];
 		} else {
-			newStateMap[date] = [filePath];
+			newStateMap[date] = [fileToOZItem({ note: file })];
 		}
 		this.OZCALENDARDAYS_STATE = newStateMap;
 	};
@@ -152,8 +160,10 @@ export default class OZCalendarPlugin extends Plugin {
 		let changeFlag = false;
 		let newStateMap = this.OZCALENDARDAYS_STATE;
 		for (let k of Object.keys(newStateMap)) {
-			if (newStateMap[k].contains(filePath)) {
-				newStateMap[k] = newStateMap[k].filter((p) => p !== filePath);
+			if (newStateMap[k].some((ozItem) => ozItem.type === 'note' && ozItem.path === filePath)) {
+				newStateMap[k] = newStateMap[k].filter((ozItem) => {
+					return !(ozItem.type === 'note' && ozItem.path === filePath);
+				});
 				changeFlag = true;
 			}
 		}
@@ -175,7 +185,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.path);
+					this.addFilePathToState(parsedDayISOString, file);
 					changeFlag = true;
 				}
 			}
@@ -207,11 +217,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.path);
+							this.addFilePathToState(parsedDayISOString, file);
 						} else {
 							// if date exists and note is not in the date list
 							if (!(file.path in this.OZCALENDARDAYS_STATE[parsedDayISOString])) {
-								this.addFilePathToState(parsedDayISOString, file.path);
+								this.addFilePathToState(parsedDayISOString, file);
 							}
 						}
 					}
@@ -227,14 +237,16 @@ 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 filePath of this.OZCALENDARDAYS_STATE[k]) {
-					if (filePath === oldPath) {
-						let oldIndex = this.OZCALENDARDAYS_STATE[k].indexOf(filePath);
+				for (let ozItem of this.OZCALENDARDAYS_STATE[k]) {
+					if (ozItem.type === 'note' && ozItem.path === oldPath) {
 						if (this.settings.dateSource === 'yaml') {
-							this.OZCALENDARDAYS_STATE[k][oldIndex] = file.path;
+							ozItem.path = file.path;
+							ozItem.displayName = file.basename;
 							changeFlag = true;
 						} else if (this.settings.dateSource === 'filename') {
-							this.OZCALENDARDAYS_STATE[k].splice(oldIndex, 1);
+							this.OZCALENDARDAYS_STATE[k] = this.OZCALENDARDAYS_STATE[k].filter((ozItem) => {
+								return !(ozItem.type === 'note' && ozItem.path === oldPath);
+							});
 							changeFlag = true;
 						}
 					}
@@ -243,23 +255,17 @@ export default class OZCalendarPlugin extends Plugin {
 		}
 
 		// Make sure that you scan the new file name for filename source
-		if (file.name.length >= this.settings.dateFormat.length) {
-			let cleanFileName = file.name.substring(0, this.settings.dateFormat.length);
-			if (
-				this.settings.dateSource === 'filename' &&
-				dayjs(cleanFileName, this.settings.dateFormat, true).isValid()
-			) {
-				let parsedDayISOString = dayjs(cleanFileName, this.settings.dateFormat).format('YYYY-MM-DD');
-				if (parsedDayISOString in this.OZCALENDARDAYS_STATE) {
-					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [
-						...this.OZCALENDARDAYS_STATE[parsedDayISOString],
-						file.path,
-					];
-				} else {
-					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [file.path];
-				}
-				changeFlag = true;
+		if (this.settings.dateSource === 'filename' && dayjs(file.name, this.settings.dateFormat).isValid()) {
+			let parsedDayISOString = dayjs(file.name, this.settings.dateFormat).format('YYYY-MM-DD');
+			if (parsedDayISOString in this.OZCALENDARDAYS_STATE) {
+				this.OZCALENDARDAYS_STATE[parsedDayISOString] = [
+					...this.OZCALENDARDAYS_STATE[parsedDayISOString],
+					fileToOZItem({ note: file }),
+				];
+			} else {
+				this.OZCALENDARDAYS_STATE[parsedDayISOString] = [fileToOZItem({ note: file })];
 			}
+			changeFlag = true;
 		}
 
 		// If change happened force update the component
@@ -273,16 +279,15 @@ export default class OZCalendarPlugin extends Plugin {
 
 	handleCreate = (file: TAbstractFile) => {
 		if (file instanceof TFile && file.extension === 'md' && this.settings.dateSource === 'filename') {
-			let cleanFileName = file.name.substring(0, this.settings.dateFormat.length);
-			if (dayjs(cleanFileName, this.settings.dateFormat, true).isValid()) {
-				let parsedDayISOString = dayjs(cleanFileName, this.settings.dateFormat).format('YYYY-MM-DD');
+			if (dayjs(file.name, this.settings.dateFormat).isValid()) {
+				let parsedDayISOString = dayjs(file.name, this.settings.dateFormat).format('YYYY-MM-DD');
 				if (parsedDayISOString in this.OZCALENDARDAYS_STATE) {
 					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [
 						...this.OZCALENDARDAYS_STATE[parsedDayISOString],
-						file.path,
+						fileToOZItem({ note: file }),
 					];
 				} else {
-					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [file.path];
+					this.OZCALENDARDAYS_STATE[parsedDayISOString] = [fileToOZItem({ note: file })];
 				}
 			}
 			this.calendarForceUpdate();
@@ -325,7 +330,7 @@ export default class OZCalendarPlugin extends Plugin {
 					// Check the FM keys vs the provided key by the user in settings
 					for (let k of Object.keys(fm)) {
 						if (k === this.settings.yamlKey) {
-							let fmValue = String(fm[k]).substring(0, this.settings.dateFormat.length);
+							let fmValue = String(fm[k]);
 							// Parse the date with provided date format
 							let parsedDayJsDate = dayjs(fmValue, this.settings.dateFormat);
 							// Take only YYYY-MM-DD part fromt the date as String
@@ -334,10 +339,10 @@ export default class OZCalendarPlugin extends Plugin {
 							if (parsedDayISOString in OZCalendarDays) {
 								OZCalendarDays[parsedDayISOString] = [
 									...OZCalendarDays[parsedDayISOString],
-									mdFile.path,
+									fileToOZItem({ note: mdFile }),
 								];
 							} else {
-								OZCalendarDays[parsedDayISOString] = [mdFile.path];
+								OZCalendarDays[parsedDayISOString] = [fileToOZItem({ note: mdFile })];
 							}
 						}
 					}
@@ -345,16 +350,15 @@ export default class OZCalendarPlugin extends Plugin {
 			} else if (this.settings.dateSource === 'filename') {
 				let dateFormatLength = this.settings.dateFormat.length;
 				if (mdFile.name.length >= dateFormatLength) {
-					let value = mdFile.name.substring(0, dateFormatLength);
-					if (dayjs(value, this.settings.dateFormat, true).isValid()) {
-						let parsedDayISOString = dayjs(value, this.settings.dateFormat).format('YYYY-MM-DD');
+					if (dayjs(mdFile.name, this.settings.dateFormat).isValid()) {
+						let parsedDayISOString = dayjs(mdFile.name, this.settings.dateFormat).format('YYYY-MM-DD');
 						if (parsedDayISOString in OZCalendarDays) {
 							OZCalendarDays[parsedDayISOString] = [
 								...OZCalendarDays[parsedDayISOString],
-								mdFile.path,
+								fileToOZItem({ note: mdFile }),
 							];
 						} else {
-							OZCalendarDays[parsedDayISOString] = [mdFile.path];
+							OZCalendarDays[parsedDayISOString] = [fileToOZItem({ note: mdFile })];
 						}
 					}
 				}

src/modal.ts

@@ -46,10 +46,13 @@ export class CreateNoteModal extends Modal {
 		let addSpace = contentEl.createEl('div', { cls: 'oz-calendar-modal-addspacediv ' });
 
 		// Create - Cancel Buttons
-		const createButton = contentEl.createEl('button', { text: 'Create Note' });
+		const createButton = contentEl.createEl('button', {
+			text: 'Create Note',
+			cls: this.plugin.settings.newNoteCancelButtonReverse ? 'oz-calendar-modal-float-right' : '',
+		});
 		const cancelButton = contentEl.createEl('button', {
 			text: 'Cancel',
-			cls: 'oz-calendar-modal-float-right',
+			cls: this.plugin.settings.newNoteCancelButtonReverse ? '' : 'oz-calendar-modal-float-right',
 		});
 		cancelButton.addEventListener('click', () => {
 			thisModal.close();
@@ -57,32 +60,41 @@ export class CreateNoteModal extends Modal {
 
 		const onClickCreateButton = async () => {
 			let newFileName = fileNameInputEl.value;
-			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 {
+
+			if (newFileName === '') {
 				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

@@ -6,9 +6,12 @@ export type OpenFileBehaviourType = 'new-tab' | 'new-tab-group' | 'current-tab'
 export type SortingOption = 'name' | 'name-rev';
 export type DateSourceOption = 'filename' | 'yaml';
 export type NewNoteDateType = 'current-date' | 'active-date';
+export type CalendarType = 'US' | 'ISO 8601';
+export type OverflowBehaviour = 'scroll' | 'hide' | 'next-line';
 
 export interface OZCalendarPluginSettings {
 	openViewOnStart: boolean;
+	calendarType: CalendarType;
 	dateSource: DateSourceOption;
 	yamlKey: string;
 	dateFormat: string;
@@ -16,13 +19,18 @@ 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 = {
 	openViewOnStart: true,
+	calendarType: 'ISO 8601',
 	dateSource: 'yaml',
 	yamlKey: 'created',
 	dateFormat: 'YYYY-MM-DD hh:mm:ss',
@@ -30,9 +38,13 @@ 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 {
@@ -85,6 +97,36 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 				});
 			});
 
+		new Setting(containerEl)
+			.setName('Calendar Type')
+			.setDesc(
+				`
+                Select the calendar type to be displayed. While the week in the US type starts from Sunday,
+                in the ISO 8601 type, the week starts from Monday`
+			)
+			.addDropdown((dropdown) => {
+				dropdown
+					.addOption('ISO 8601', 'ISO 8601')
+					.addOption('US', 'US')
+					.setValue(this.plugin.settings.calendarType)
+					.onChange((newValue: CalendarType) => {
+						this.plugin.settings.calendarType = newValue;
+						this.plugin.saveSettings();
+						this.plugin.calendarForceUpdate();
+					});
+			});
+
+		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')
@@ -264,6 +306,35 @@ 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(
+				`Enable this setting to change the direction of Cancel and New Note buttons within the New Note Creation Modal`
+			)
+			.addToggle((toggle) => {
+				toggle.setValue(this.plugin.settings.newNoteCancelButtonReverse).onChange((newValue) => {
+					this.plugin.settings.newNoteCancelButtonReverse = newValue;
+					this.plugin.saveSettings();
+				});
+			});
+
 		containerEl.createEl('h2', { text: 'Style Settings' });
 
 		containerEl.createEl('p', {
@@ -285,5 +356,21 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 					this.plugin.calendarForceUpdate();
 				});
 			});
+
+		new Setting(containerEl)
+			.setName('File Names Overflow Behaviour')
+			.setDesc('Change the default behaviour for file names when they dont fit to the view')
+			.addDropdown((dropdown) => {
+				dropdown
+					.addOption('hide', 'Hide Overflow')
+					.addOption('scroll', 'Scroll Overflow')
+					.addOption('next-line', 'Show Overflow in the Next Line')
+					.setValue(this.plugin.settings.fileNameOverflowBehaviour)
+					.onChange((newValue: OverflowBehaviour) => {
+						this.plugin.settings.fileNameOverflowBehaviour = newValue;
+						this.plugin.saveSettings();
+						this.plugin.calendarForceUpdate();
+					});
+			});
 	}
 }

src/types.ts

@@ -1,5 +1,29 @@
+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]: string[];
+	[key: string]: OZItem[];
 }
 
 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,6 +10,7 @@ export const ICON = 'OZCAL_ICON';
 
 export class OZCalendarView extends ItemView {
 	plugin: OZCalendarPlugin;
+	root: Root;
 
 	constructor(leaf: WorkspaceLeaf, plugin: OZCalendarPlugin) {
 		super(leaf);
@@ -33,11 +34,12 @@ export class OZCalendarView extends ItemView {
 	}
 
 	destroy() {
-		ReactDOM.unmountComponentAtNode(this.contentEl);
+		if (this.root) this.root.unmount();
 	}
 
 	async onOpen() {
 		this.destroy();
-		ReactDOM.render(<MyCalendar plugin={this.plugin} />, this.contentEl);
+		this.root = createRoot(this.contentEl)
+		this.root.render(<MyCalendar plugin={this.plugin} />);
 	}
 }

styles.css

@@ -18,6 +18,13 @@ settings:
         type: variable-color
         format: hex
         default: '#'
+    -
+        id: oz-calendar-current-day-color
+        title: Current Day (Today) Text Color
+        description: Set the color of the current day in the month view
+        type: variable-color
+        format: hex
+        default: '#'
     -
         id: oz-calendar-selected-day-background
         title: Selected Day Background Color
@@ -32,6 +39,13 @@ 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,
@@ -40,6 +54,8 @@ settings:
 	--oz-calendar-selected-daycolor: var(--text-normal);
 	--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,
@@ -56,6 +72,12 @@ 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);
 }
@@ -144,10 +166,10 @@ settings:
 }
 
 .oz-calendar-notelist-container {
-	display: flex;
-	flex-direction: row;
 	justify-content: space-between;
-	vertical-align: middle;
+	display: block;
+	padding: 5px;
+	flex: 1;
 }
 
 .oz-calendar-nav-action-plus {
@@ -193,11 +215,6 @@ settings:
 	opacity: 0.6;
 }
 
-.oz-calendar-notelist-container {
-	display: block;
-	padding: 5px;
-}
-
 .oz-calendar-note-line {
 	padding-top: 3px;
 	padding-bottom: 3px;
@@ -229,6 +246,11 @@ settings:
 	margin-right: 3px;
 }
 
+.oz-calendar-plugin-today abbr {
+	color: var(--oz-calendar-current-day-color);
+	font-weight: bold;
+}
+
 /* START - Fixed Calendar Except Note List - Scroll */
 
 .oz-calendar-plugin-view.fixed {
@@ -239,7 +261,7 @@ settings:
 }
 
 .oz-calendar-plugin-view.fixed .react-calendar {
-	height: 255px;
+	height: 295px;
 }
 
 .oz-calendar-plugin-view.fixed #oz-calendar-divider {
@@ -256,6 +278,14 @@ 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 {
@@ -274,3 +304,18 @@ settings:
 .oz-calendar-custom-hidden {
 	display: none !important;
 }
+
+.oz-calendar-note-line {
+	color: var(--text-muted);
+}
+
+.oz-calendar-overflow-scroll {
+	overflow: scroll;
+	white-space: nowrap;
+}
+
+.oz-calendar-overflow-hide {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}

versions.json

@@ -1,4 +1,19 @@
 {
+	"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",
+	"0.2.4": "0.15.0",
+	"0.2.3": "0.15.0",
+	"0.2.2": "0.15.0",
+	"0.2.1": "0.15.0",
+	"0.2.0": "0.15.0",
 	"0.1.9": "0.15.0",
 	"0.1.8": "0.15.0",
 	"0.1.7": "0.15.0",