Calendar Type Implementation

src/components/calendar.tsx

@@ -87,8 +87,10 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 		return null;
 	};
 
+	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}
@@ -96,6 +98,8 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
 				minDetail="month"
 				view="month"
 				tileContent={customTileContent}
+				calendarType={plugin.settings.calendarType}
+				showFixedNumberOfWeeks={plugin.settings.fixedCalendar}
 				activeStartDate={activeStartDate}
 				onActiveStartDateChange={(props) => {
 					if (props.action === 'next') {

src/settings/settings.ts

@@ -6,9 +6,11 @@ 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 interface OZCalendarPluginSettings {
 	openViewOnStart: boolean;
+	calendarType: CalendarType;
 	dateSource: DateSourceOption;
 	yamlKey: string;
 	dateFormat: string;
@@ -23,6 +25,7 @@ export interface OZCalendarPluginSettings {
 
 export const DEFAULT_SETTINGS: OZCalendarPluginSettings = {
 	openViewOnStart: true,
+	calendarType: 'ISO 8601',
 	dateSource: 'yaml',
 	yamlKey: 'created',
 	dateFormat: 'YYYY-MM-DD hh:mm:ss',
@@ -85,6 +88,25 @@ 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('Open File Behaviour')
 			.setDesc('Select the behaviour you want to have when you click on file name in the calendar view')

styles.css

@@ -239,7 +239,7 @@ settings:
 }
 
 .oz-calendar-plugin-view.fixed .react-calendar {
-	height: 255px;
+	height: 295px;
 }
 
 .oz-calendar-plugin-view.fixed #oz-calendar-divider {