Fixed Calendar, Settings Update

src/components/calendar.tsx

@@ -39,7 +39,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 	};
 
 	return (
-		<div>
+		<div className={'oz-calendar-plugin-view' + (plugin.settings.fixedCalendar ? ' fixed' : '')}>
 			<Calendar
 				onChange={setSelectedDay}
 				value={selectedDay}

src/settings/settings.ts

@@ -8,6 +8,7 @@ export interface OZCalendarPluginSettings {
 	dateFormat: string;
 	defaultFolder: string;
 	defaultFileNamePrefix: string;
+	fixedCalendar: boolean;
 }
 
 export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
@@ -16,6 +17,7 @@ export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
 	dateFormat: 'YYYY-MM-DD hh:mm:ss',
 	defaultFolder: '/',
 	defaultFileNamePrefix: 'YYYY-MM-DD',
+	fixedCalendar: true,
 };
 
 export class OZCalendarPluginSettingsTab extends PluginSettingTab {
@@ -56,6 +58,8 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 
 		containerEl.createEl('h1', { text: 'OZ Calendar Plugin Settings' });
 
+		containerEl.createEl('h2', { text: 'General Settings' });
+
 		new Setting(containerEl)
 			.setName('Open Calendar on Start')
 			.setDesc('Disable if you dont want Calendar View to be opened during the initial vault launch')
@@ -66,6 +70,16 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 				});
 			});
 
+		containerEl.createEl('h2', { text: 'YAML and Date Format' });
+
+		containerEl.createEl('p', {
+			text: `
+            When you make a change under this section for YAML Key and Date Format, make sure that
+            you also use "Reload Plugin" button so that the changes can be activated.
+            `,
+			cls: 'setting-item-description',
+		});
+
 		new Setting(containerEl)
 			.setName('YAML Key')
 			.setDesc('Set the YAML Key that should be used for displaying in the calendar')
@@ -96,6 +110,8 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 				});
 			});
 
+		containerEl.createEl('h2', { text: 'New Note Settings' });
+
 		new Setting(this.containerEl)
 			.setName('Default Folder Location')
 			.setDesc('Select the default folder, under which the new files should be saved when use plugin + icon')
@@ -122,5 +138,27 @@ export class OZCalendarPluginSettingsTab extends PluginSettingTab {
 					this.plugin.saveSettings();
 				});
 			});
+
+		containerEl.createEl('h2', { text: 'Style Settings' });
+
+		containerEl.createEl('p', {
+			text: `
+            You can adjust most of the style settings using Style Settings plugin. Please download from Community Plugins
+            to be able to adjust colors, etc. Below you can find some of the Style Settings that can not be incorporated
+            to the Style Settings
+        `,
+			cls: 'setting-item-description',
+		});
+
+		new Setting(containerEl)
+			.setName('Fixed Calendar (Only File List Scrollable)')
+			.setDesc('Disable this if you want whole calendar view to be scrollable and not only the file list')
+			.addToggle((toggle) => {
+				toggle.setValue(this.plugin.settings.fixedCalendar).onChange((newValue) => {
+					this.plugin.settings.fixedCalendar = newValue;
+					this.plugin.saveSettings();
+					this.plugin.calendarForceUpdate();
+				});
+			});
 	}
 }

src/view.tsx

@@ -38,11 +38,6 @@ export class OZCalendarView extends ItemView {
 
 	async onOpen() {
 		this.destroy();
-		ReactDOM.render(
-			<div className="oz-calendar-plugin-view">
-				<MyCalendar plugin={this.plugin} />
-			</div>,
-			this.contentEl
-		);
+		ReactDOM.render(<MyCalendar plugin={this.plugin} />, this.contentEl);
 	}
 }

styles.css

@@ -11,11 +11,27 @@ settings:
         type: variable-color
         format: hex
         default: '#f76a6a'
+    -
+        id: oz-calendar-selected-daycolor
+        title: Selected Day Text Color
+        description: Set the color of selected day in the month view, defaulted to the interactive-accent
+        type: variable-color
+        format: hex
+        default: '#'
+    -
+        id: oz-calendar-header-date-color
+        title: Header Dates Text Color
+        description: Set the color of headers dates like (month/year, and date above the list), defaulted to the interactive-accent
+        type: variable-color
+        format: hex
+        default: '#'
 */
 
 .theme-light,
 .theme-dark {
 	--oz-calendar-weekend-color: #f76a6a;
+	--oz-calendar-selected-daycolor: var(----interactive-accent);
+	--oz-calendar-header-date-color: var(----interactive-accent);
 }
 
 .oz-cal-coffee-div,
@@ -84,7 +100,7 @@ settings:
 }
 
 .oz-calendar-plugin-view button.react-calendar__navigation__label {
-	color: var(--interactive-accent);
+	color: var(--oz-calendar-header-date-color);
 	font-size: 1.3em;
 }
 
@@ -106,7 +122,7 @@ settings:
 }
 
 .oz-calendar-plugin-view .react-calendar__tile--active {
-	color: var(--interactive-accent);
+	color: var(--oz-calendar-selected-daycolor);
 	font-weight: bold;
 	font-size: 1em;
 }
@@ -151,7 +167,7 @@ settings:
 	text-align: center;
 	vertical-align: top;
 	font-size: 1.1em;
-	color: var(--interactive-accent);
+	color: var(--oz-calendar-header-date-color);
 	cursor: pointer;
 }
 
@@ -203,3 +219,32 @@ settings:
 	padding-bottom: 2px;
 	margin-right: 3px;
 }
+
+/* START - Fixed Calendar Except Note List - Scroll */
+
+.oz-calendar-plugin-view.fixed {
+	height: 100%;
+	max-height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.oz-calendar-plugin-view.fixed .react-calendar {
+	height: 255px;
+}
+
+.oz-calendar-plugin-view.fixed #oz-calendar-divider {
+	height: 4px;
+}
+
+.oz-calendar-plugin-view.fixed .oz-calendar-notelist-header-container {
+	height: 30px;
+}
+
+.oz-calendar-plugin-view.fixed .oz-calendar-notelist-container {
+	width: 100%;
+	overflow-y: auto;
+	vertical-align: top;
+}
+
+/*  END - Fixed Calendar */