diff --git a/src/calendar.ts b/src/calendar.ts index ef603ab..ddc5852 100644 --- a/src/calendar.ts +++ b/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; modifyEvent?: (event: EventApi, oldEvent: EventApi) => Promise; 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; } diff --git a/src/settings.ts b/src/settings.ts index d31b04d..5b7a9df 100644 --- a/src/settings.ts +++ b/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,6 +29,9 @@ export interface FullCalendarSettings { defaultCalendar: number; recursiveLocal: boolean; firstDay: number; + locale: string; + slotMinTime: string; + slotMaxTime: string; } export const DEFAULT_SETTINGS: FullCalendarSettings = { @@ -32,6 +39,10 @@ export const DEFAULT_SETTINGS: FullCalendarSettings = { 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([ + ["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, diff --git a/src/view.ts b/src/view.ts index 655fc5e..383abb9 100644 --- a/src/view.ts +++ b/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))