Reveal Today Button, Button Hover Hints, Default File Prefix, README Update

README.md

@@ -1,3 +1,25 @@
 # OZ Calendar Plugin
 
-This plugin is created to help users to easily view notes on Calendar using any YAML key with date value.
+If you like the see your notes on a Calendar and easily find using a certain date, you are at the right place. This plugin is created to help users to easily view notes on Calendar using any YAML key with custom date value. You define the YAML key and Date Format to be used. Follow the **Configure** steps and you are ready to go.
+
+## Configure
+
+1. Go to the plugin settings
+2. Define **YAML** key you want to use as a date field. Default key is **created**
+3. Define **Date Format** you are using within **YAML**. The default date format is **YYYY-MM-DD hh:mm:ss**
+4. After these changes, use **Reload Plugin** option to activate the changes in the vault.
+
+## Create File Option
+
+You can use the **Plus(+)** icon within the calendar view to add a note with default YAML key and date format.
+
+You can define
+
+-   The **default folder** the plugin is supposed to save the new file
+-   And the **file prefix date format** in case you prefer your file names to start with a certain date format
+
+within the plugin settings.
+
+## Style Settings Plugin Support
+
+You can customize some of the calendar style settings using the **Style Settings Plugin**.

src/components/noteList.tsx

@@ -2,10 +2,11 @@ import React, { useMemo } from 'react';
 import { BsArrowRight, BsArrowLeft } from 'react-icons/bs';
 import { HiOutlineDocumentText } from 'react-icons/hi';
 import { RiPhoneFindLine, RiAddCircleLine } from 'react-icons/ri';
+import { MdToday } from 'react-icons/md';
 import dayjs from 'dayjs';
 import OZCalendarPlugin from 'main';
-import { openFile } from '../util/utils';
-import { TFile } from 'obsidian';
+import { isMouseEvent, openFile } from '../util/utils';
+import { Menu, TFile } from 'obsidian';
 import { CreateNoteModal } from 'modal';
 
 interface NoteListComponentParams {
@@ -51,12 +52,27 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 		return selectedDayIso in plugin.OZCALENDARDAYS_STATE ? plugin.OZCALENDARDAYS_STATE[selectedDayIso] : [];
 	}, [selectedDay, forceValue]);
 
+	const triggerFileContextMenu = (e: React.MouseEvent | React.TouchEvent, filePath: string) => {
+		let abstractFile = plugin.app.vault.getAbstractFileByPath(filePath);
+		if (abstractFile) {
+			const fileMenu = new Menu();
+			plugin.app.workspace.trigger('file-menu', fileMenu, abstractFile, 'file-explorer');
+			if (isMouseEvent(e)) {
+				fileMenu.showAtPosition({ x: e.pageX, y: e.pageY });
+			} else {
+				// @ts-ignore
+				fileMenu.showAtPosition({ x: e.nativeEvent.locationX, y: e.nativeEvent.locationY });
+			}
+		}
+	};
+
 	return (
 		<>
 			<div className="oz-calendar-notelist-header-container">
 				<div className="oz-calendar-nav-action-plus">
 					<RiAddCircleLine
 						size={20}
+						aria-label="Add a note under default folder"
 						onClick={() => {
 							let newFileModal = new CreateNoteModal(plugin, selectedDay);
 							newFileModal.open();
@@ -64,13 +80,26 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 					/>
 				</div>
 				<div className="oz-calendar-nav-action-left">
-					<BsArrowLeft size={22} onClick={() => setNewSelectedDay(-1)} />
+					<BsArrowLeft size={22} aria-label="Go to previous day" onClick={() => setNewSelectedDay(-1)} />
 				</div>
-				<div className="oz-calendar-nav-action-middle" onClick={() => setActiveStartDate(selectedDay)}>
+				<div
+					className="oz-calendar-nav-action-middle"
+					aria-label="Show active date on Calendar"
+					onClick={() => setActiveStartDate(selectedDay)}>
 					{dayjs(selectedDay).format('DD MMM YYYY')}
 				</div>
 				<div className="oz-calendar-nav-action-right">
-					<BsArrowRight size={22} onClick={() => setNewSelectedDay(1)} />
+					<BsArrowRight size={22} aria-label="Go to next day" onClick={() => setNewSelectedDay(1)} />
+				</div>
+				<div className="oz-calendar-nav-action-plus">
+					<MdToday
+						size={20}
+						aria-label="Set Today as Selected Day"
+						onClick={() => {
+							setActiveStartDate(new Date());
+							setSelectedDay(new Date());
+						}}
+					/>
 				</div>
 			</div>
 			<div className="oz-calendar-notelist-container">
@@ -85,7 +114,8 @@ export default function NoteListComponent(params: NoteListComponentParams) {
 						<div
 							className="oz-calendar-note-line"
 							id={notePath}
-							onClick={() => openFilePath(notePath)}>
+							onClick={() => openFilePath(notePath)}
+							onContextMenu={(e) => triggerFileContextMenu(e, notePath)}>
 							<HiOutlineDocumentText className="oz-calendar-note-line-icon" />
 							<span>{extractFileName(notePath)}</span>
 						</div>

src/modal.ts

@@ -25,6 +25,11 @@ export class CreateNoteModal extends Modal {
 		const inputEl = contentEl.createEl('input');
 		inputEl.style.cssText = 'width: 100%; height: 2.5em; margin-bottom: 15px;';
 
+		let defFileNamePref = this.plugin.settings.defaultFileNamePrefix;
+		if (defFileNamePref !== '' && dayjs(new Date(), defFileNamePref, true).isValid()) {
+			inputEl.value = dayjs().format(defFileNamePref) + ' ';
+		}
+
 		inputEl.focus();
 
 		const createButton = contentEl.createEl('button', { text: 'Create Note' });

src/settings/settings.ts

@@ -7,6 +7,7 @@ export interface OZCalendarPluginSettings {
 	yamlKey: string;
 	dateFormat: string;
 	defaultFolder: string;
+	defaultFileNamePrefix: string;
 }
 
 export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
@@ -14,6 +15,7 @@ export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
 	yamlKey: 'created',
 	dateFormat: 'YYYY-MM-DD hh:mm:ss',
 	defaultFolder: '/',
+	defaultFileNamePrefix: 'YYYY-MM-DD',
 };
 
 export class OZCalendarPluginSettingsTab extends PluginSettingTab {
@@ -96,7 +98,7 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 
 		new Setting(this.containerEl)
 			.setName('Default Folder Location')
-			.setDesc('Select the defaukt folder, under which the new files should be saved')
+			.setDesc('Select the default folder, under which the new files should be saved when use plugin + icon')
 			.addSearch((cb) => {
 				new FolderSuggest(cb.inputEl);
 				cb.setPlaceholder('Example: folder1/folder2')
@@ -108,5 +110,17 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 				// @ts-ignore
 				cb.containerEl.addClass('templater_search');
 			});
+
+		new Setting(containerEl)
+			.setName('Default File Name Prefix Date Format')
+			.setDesc(
+				'Set the default file name prefix date format that will be used when you create a note using + icon. Leave blank if you dont want any'
+			)
+			.addText((text) => {
+				text.setValue(this.plugin.settings.defaultFileNamePrefix).onChange((newValue) => {
+					this.plugin.settings.defaultFileNamePrefix = newValue;
+					this.plugin.saveSettings();
+				});
+			});
 	}
 }

src/util/utils.ts

@@ -29,3 +29,7 @@ export const createNewMarkdownFile = async (
 	if (content && content !== '') await plugin.app.vault.modify(newFile, content);
 	openFile({ file: newFile, plugin: plugin, newLeaf: false });
 };
+
+export function isMouseEvent(e: React.TouchEvent | React.MouseEvent): e is React.MouseEvent {
+	return e && 'screenX' in e;
+}

styles.css

@@ -1,3 +1,23 @@
+/* @settings
+
+name: OZ Calendar Plugin
+id: oz-calendar-plugin
+settings:
+
+    -
+        id: oz-calendar-weekend-color
+        title: Weekend Text Color
+        description: Set the color of weekend in the calendar
+        type: variable-color
+        format: hex
+        default: '#f76a6a'
+*/
+
+.theme-light,
+.theme-dark {
+	--oz-calendar-weekend-color: #f76a6a;
+}
+
 .oz-cal-coffee-div,
 .oz-cal-tip-div {
 	text-align: center;
@@ -40,7 +60,7 @@
 }
 
 .oz-calendar-plugin-view .react-calendar__month-view__days__day--weekend {
-	color: #d10000;
+	color: var(--oz-calendar-weekend-color);
 }
 
 .oz-calendar-plugin-view .react-calendar__month-view__days__day--neighboringMonth {
@@ -137,7 +157,7 @@
 
 .oz-calendar-nav-action-right {
 	display: inline-block;
-	width: 25%;
+	width: 15%;
 	text-align: left;
 	color: var(--text-muted);
 }