Change language + change start/end of day + new button two weeks at a time + new options can be passed down

src/calendar.ts

@@ -3,6 +3,7 @@
  */
 import {
 	Calendar,
+	Duration,
 	EventApi,
 	EventClickArg,
 	EventHoveringArg,
@@ -20,7 +21,12 @@ interface ExtraRenderProps {
 	select?: (startDate: Date, endDate: Date, allDay: boolean) => Promise<void>;
 	modifyEvent?: (event: EventApi, oldEvent: EventApi) => Promise<boolean>;
 	eventMouseEnter?: (info: EventHoveringArg) => void;
+	locale?: string;
 	firstDay?: number;
+	validRange?: { start: string; end: string };
+	slotMinTime?: Duration | string;
+	slotMaxTime?: Duration | string;
+	expandRows?: boolean;
 }
 
 export function renderCalendar(
@@ -29,7 +35,19 @@ export function renderCalendar(
 	settings?: ExtraRenderProps
 ): Calendar {
 	const isMobile = window.innerWidth < 500;
-	const { eventClick, select, modifyEvent, eventMouseEnter } = settings || {};
+	const {
+		eventClick,
+		select,
+		modifyEvent,
+		eventMouseEnter,
+		firstDay,
+		locale,
+		validRange,
+		slotMinTime,
+		slotMaxTime,
+		expandRows,
+	} = settings || {};
+
 	const modifyEventCallback =
 		modifyEvent &&
 		(async ({
@@ -71,7 +89,7 @@ export function renderCalendar(
 			: {
 					left: "prev,next today",
 					center: "title",
-					right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+					right: "dayGridMonth,timeGridWeek,timeGrid2Weeks,timeGridDay,listWeek",
 			  },
 		views: {
 			timeGridDay: {
@@ -84,10 +102,18 @@ export function renderCalendar(
 				duration: { days: 3 },
 				buttonText: "3",
 			},
+			timeGrid2Weeks: {
+				type: "timeGrid",
+				duration: { weeks: 2 },
+				buttonText: "two weeks",
+			},
 		},
-		firstDay: settings?.firstDay,
 		eventSources,
+		validRange,
 		eventClick,
+		slotMinTime: slotMinTime ?? "00:00:00",
+		slotMaxTime: slotMaxTime ?? "24:00:00",
+		expandRows,
 
 		selectable: select && true,
 		selectMirror: select && true,
@@ -103,7 +129,14 @@ export function renderCalendar(
 		eventResize: modifyEventCallback,
 
 		eventMouseEnter,
+
+		firstDay,
+		locale:
+			!locale || locale === "default"
+				? window.localStorage.getItem("language") ?? "en"
+				: locale,
 	});
+
 	cal.render();
 	return cal;
 }

src/settings.ts

@@ -2,10 +2,14 @@ import FullCalendarPlugin from "./main";
 import {
 	App,
 	DropdownComponent,
+	moment,
+	MomentFormatComponent,
 	Notice,
 	PluginSettingTab,
 	Setting,
+	TextComponent,
 	TFolder,
+	ValueComponent,
 	Vault,
 } from "obsidian";
 import {
@@ -25,13 +29,20 @@ export interface FullCalendarSettings {
 	defaultCalendar: number;
 	recursiveLocal: boolean;
 	firstDay: number;
+	locale: string;
+	slotMinTime: string;
+	slotMaxTime: string;
 }
 
 export const DEFAULT_SETTINGS: FullCalendarSettings = {
 	calendarSources: [],
 	defaultCalendar: 0,
 	recursiveLocal: false,
 	firstDay: 0,
+	//locale: "window.localStorage.getItem("language") ?? "en"",
+	locale: "default",
+	slotMinTime: "00:00:00",
+	slotMaxTime: "24:00:00",
 };
 
 const WEEKDAYS = [
@@ -44,6 +55,34 @@ const WEEKDAYS = [
 	"Saturday",
 ];
 
+const LANGUAGES = new Map<string, string>([
+	["default", "Obsidian default"],
+	["en", "English"],
+	["zh", "简体中文"],
+	["zh- TW", "繁體中文"],
+	["ru", "Pусский"],
+	["ko", "한국어"],
+	["it", "Italiano"],
+	["id", "Bahasa Indonesia"],
+	["ro", "Română"],
+	["pt- BR", "Portugues do Brasil"],
+	["cz", "čeština"],
+	["de", "Deutsch"],
+	["es", "Español"],
+	["fr", "Français"],
+	["no", "Norsk"],
+	["pl", "język polski"],
+	["pt", "Português"],
+	["ja", "日本語"],
+	["da", "Dansk"],
+	["uk", "Український"],
+	["sq", "Shqip"],
+	["tr", "Türkçe (kısmi)"],
+	["hi", "हिन्दी (आंशिक)"],
+	["nl", "Nederlands (gedeeltelijk)"],
+	["ar", "العربية (جزئي)"],
+]);
+
 export function addCalendarButton(
 	app: App,
 	plugin: FullCalendarPlugin,
@@ -160,6 +199,79 @@ export class FullCalendarSettingTab extends PluginSettingTab {
 				});
 			});
 
+		new Setting(containerEl)
+			.setName("Language")
+			.setDesc(
+				"Set the language of your calendars. (This only changes the days and month in the calendar view)."
+			)
+			.addDropdown((dropdown) => {
+				LANGUAGES.forEach(
+					(countryName: string, countryCode: string) => {
+						dropdown.addOption(countryCode, countryName);
+					}
+				);
+				dropdown.setValue(this.plugin.settings.locale);
+				dropdown.onChange(async (countryCode) => {
+					this.plugin.settings.locale = countryCode;
+					await this.plugin.saveSettings();
+				});
+			});
+
+		new Setting(containerEl)
+			.setName("Start time")
+			.setDesc(
+				"Set the starting time of your calendars. For example 09:00:00 starts the calendar view at 9am."
+			)
+			.addText((text: TextComponent) => {
+				text.setPlaceholder(this.plugin.settings.slotMinTime);
+				text.setValue(this.plugin.settings.slotMinTime);
+				text.onChange(async (newValue: string) => {
+					if (newValue.length > 8) {
+						new Notice(`Please input the starting time using the following format : 09:30:00
+first slot : hour (e.g 9 am)
+second slot : minutes (e.g 30 minutes)
+third slot : seconds (e.g 0 seconds)
+						`);
+						return;
+					}
+					this.plugin.settings.slotMinTime = newValue;
+					await this.plugin.saveSettings();
+				});
+				// So that we let the user only input [0-9] | :
+				text.inputEl.setAttr(
+					"onkeypress",
+					"return event.charCode <= 58 && event.charCode >= 48"
+				);
+			});
+
+		new Setting(containerEl)
+			.setName("End time")
+			.setDesc(
+				"Set the ending time of your calendars. For example 24:00:00 stops the calendar view at midnight."
+			)
+			.addText((text: TextComponent) => {
+				text.setPlaceholder(this.plugin.settings.slotMaxTime);
+				text.setValue(this.plugin.settings.slotMaxTime);
+				text.onChange(async (newValue: string) => {
+					if (newValue.length > 8) {
+						new Notice(`Please input the ending time using the following format : 
+						23:30:00
+						first slot : hour (e.g 11 pm)
+						second slot : minutes (e.g 30 minutes)
+						third slot : seconds (e.g 0 seconds)
+						`);
+						return;
+					}
+					this.plugin.settings.slotMaxTime = newValue;
+					await this.plugin.saveSettings();
+				});
+				// So that we let the user only input [0-9] | :
+				text.inputEl.setAttr(
+					"onkeypress",
+					"return event.charCode <= 58 && event.charCode >= 48"
+				);
+			});
+
 		addCalendarButton(
 			this.app,
 			this.plugin,

src/view.ts

@@ -1,6 +1,6 @@
 import "./overrides.css";
 import { ItemView, Notice, TFile, WorkspaceLeaf } from "obsidian";
-import { Calendar } from "@fullcalendar/core";
+import { Calendar, Duration } from "@fullcalendar/core";
 import { renderCalendar } from "./calendar";
 import FullCalendarPlugin from "./main";
 import { EventModal } from "./modal";
@@ -169,8 +169,10 @@ export class CalendarView extends ItemView {
 				}
 			},
 			firstDay: this.plugin.settings.firstDay,
+			locale: this.plugin.settings.locale,
+			slotMinTime: this.plugin.settings.slotMinTime,
+			slotMaxTime: this.plugin.settings.slotMaxTime,
 		});
-
 		this.plugin.settings.calendarSources
 			.flatMap((s) => (s.type === "ical" ? [s] : []))
 			.map((s) => new IcsSource(s))