Merge branch 'week-start-day-setting' of https://github.com/antosha41…

…7/heatmap-calendar-obsidian into antosha417-week-start-day-setting

README.md

@@ -1,6 +1,6 @@
 # Heatmap Calendar plugin for Obsidian
 
-Visualize your data in a heatmap calendar similar to the github activity calendar using this [Obsidian](https://obsidian.md/) plugin.  
+Visualize your data in a heatmap calendar similar to the github activity calendar using this [Obsidian](https://obsidian.md/) plugin.
 
 
 
@@ -182,7 +182,7 @@ Dataview's time variables are supported without any conversion, as they return m
 
 ## Other Notes:
 - See the [EXAMPLE VAULT](https://github.com/Richardsl/heatmap-calendar-obsidian/tree/master/EXAMPLE_VAULT) if you want to test out the examples.
-- Week starts on Monday, not configurable yet
+- Week start day is configurable
 - Date format is YYYY-MM-DD, if your daily note filename is something else, [you can use JS to change it in the loop](https://github.com/Richardsl/heatmap-calendar-obsidian/discussions/2)
 - Use Obsidian CSS snippets for custom styling. See [snippet examples](https://github.com/Richardsl/heatmap-calendar-obsidian/tree/master/EXAMPLE_VAULT/.obsidian/snippets).
 

main.ts

@@ -16,16 +16,17 @@ interface CalendarData {
 interface CalendarSettings extends CalendarData {
 	colors: {
 		[index: string | number]: string[]
-	}
+	},
+	weekStartDay: number,
 }
 
 interface Entry {
 	date: string
 	intensity?: number
-	color: string 
+	color: string
 	content: string
 }
-const DEFAULT_SETTINGS: CalendarData = {
+const DEFAULT_SETTINGS: CalendarSettings = {
 	year: new Date().getFullYear(),
 	colors: {
 		default: ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127",],
@@ -35,17 +36,18 @@ const DEFAULT_SETTINGS: CalendarData = {
 	defaultEntryIntensity: 4,
 	intensityScaleStart: 1,
 	intensityScaleEnd: 5,
+	weekStartDay: 1,
 }
 export default class HeatmapCalendar extends Plugin {
 
 	settings: CalendarSettings
 
 	/**
-	 * Returns a number representing how many days into the year the supplied date is. 
-	 * Example: first of january is 1, third of february is 34 (31+3) 
+	 * Returns a number representing how many days into the year the supplied date is.
+	 * Example: first of january is 1, third of february is 34 (31+3)
 	 * @param date
 	 */
-	
+
 	getHowManyDaysIntoYear(date: Date): number {
 		return (
 			(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) -
@@ -58,7 +60,7 @@ export default class HeatmapCalendar extends Plugin {
 				Date.UTC(date.getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000
 		)
 	}
-	/** 
+	/**
 	 * Removes HTMLElements passed as entry.content and outside of the displayed year from rendering above the calendar
 	 */
 	removeHtmlElementsNotInYear(entries: Entry[], year: number) {
@@ -76,6 +78,10 @@ export default class HeatmapCalendar extends Plugin {
 		return this.clamp(mapped, outMin, outMax)
 	}
 
+	getWeekdayShort(dayNumber: number): string {
+		return new Date(1970, 0, dayNumber + this.settings.weekStartDay + 4).toLocaleDateString('en-US', { weekday: 'short' });
+	}
+
 	async onload() {
 
 		await this.loadSettings()
@@ -125,7 +131,7 @@ export default class HeatmapCalendar extends Plugin {
 			})
 
 			const firstDayOfYear = new Date(Date.UTC(year, 0, 1))
-			let numberOfEmptyDaysBeforeYearBegins = (firstDayOfYear.getUTCDay() + 6) % 7
+			let numberOfEmptyDaysBeforeYearBegins = (firstDayOfYear.getUTCDay() + 7 - this.settings.weekStartDay) % 7
 
 			interface Box {
 				backgroundColor?: string;
@@ -209,13 +215,9 @@ export default class HeatmapCalendar extends Plugin {
 				parent: heatmapCalendarGraphDiv,
 			})
 
-			createEl("li", { text: "Mon", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Tue", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Wed", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Thu", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Fri", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Sat", parent: heatmapCalendarDaysUl, })
-			createEl("li", { text: "Sun", parent: heatmapCalendarDaysUl, })
+			for (let i = 0; i < 7; i++) {
+				createEl("li", { text: this.getWeekdayShort(i), parent: heatmapCalendarDaysUl, })
+			}
 
 			const heatmapCalendarBoxesUl = createEl("ul", {
 				cls: "heatmap-calendar-boxes",

settings.ts

@@ -148,13 +148,39 @@ export default class HeatmapCalendarSettingsTab extends PluginSettingTab {
 		}
 	}
 
+	private displayWeekStartDaySettings() {
+		const { containerEl, } = this
+		new Setting(containerEl)
+			.setName("Week Start Day")
+			.setDesc("Select the day on which your week starts.")
+			.addDropdown(dropdown =>
+			dropdown
+				.addOptions({
+					0: "Sunday",
+					1: "Monday",
+					2: "Tuesday",
+					3: "Wednesday",
+					4: "Thursday",
+					5: "Friday",
+					6: "Saturday",
+				})
+				.setValue(this.plugin.settings.weekStartDay.toString())
+				.onChange(async value => {
+					this.plugin.settings.weekStartDay = +value
+					await this.plugin.saveSettings()
+				})
+			)
+	}
+
 	display() {
 		const { containerEl, } = this
 
 		containerEl.empty()
 
 		containerEl.createEl("h2", { text: "Heatmap Calendar Settings", })
 
+		this.displayWeekStartDaySettings()
+
 		this.displayColorSettings()
 
 		console.log( "settings", this.plugin.settings )