Add weekStartDay setting.

README.md

@@ -1,8 +1,8 @@
 # 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.
 
-Useful for tracking progress towards various things such as exercise, finance, passion, vices, social, project progression etc.   
+Useful for tracking progress towards various things such as exercise, finance, passion, vices, social, project progression etc.
 
 It's intended to be used alongside [DataviewJS](https://blacksmithgu.github.io/obsidian-dataview/), but could be used standalone or with other plugins as well, as all the plugin does, is add the function ***renderHeatmapCalendar()*** to the global namespace.
 
@@ -17,10 +17,10 @@ It's intended to be used alongside [DataviewJS](https://blacksmithgu.github.io/o
  
 ## Use:
 
-1. Annotate the data you want to track in your daily notes (see [Dataview annotation documentation](https://blacksmithgu.github.io/obsidian-dataview/data-annotation/)) 
-2. Create a [DataviewJS block](https://blacksmithgu.github.io/obsidian-dataview/api/intro/) wherever you want the Heatmap Calendar to display.  
+1. Annotate the data you want to track in your daily notes (see [Dataview annotation documentation](https://blacksmithgu.github.io/obsidian-dataview/data-annotation/))
+2. Create a [DataviewJS block](https://blacksmithgu.github.io/obsidian-dataview/api/intro/) wherever you want the Heatmap Calendar to display.
 3. Collect the data you want to display using [DataviewJS](https://blacksmithgu.github.io/obsidian-dataview/api/code-reference/)
-4. Pass the data into Heatmap Calendar using  **renderHeatmapCalendar()** 
+4. Pass the data into Heatmap Calendar using  **renderHeatmapCalendar()**
 ![heatmap calendar example](https://github.com/Richardsl/heatmap-calendar-obsidian/blob/master/github-images/heatmap-calendar-howto3.jpg?raw=true)
 
 ## Full Example Code:
@@ -63,7 +63,7 @@ renderHeatmapCalendar(this.container, calendarData)
  
 
 ## Colors:
-You don't need to supply any colors, the calendar uses green by default, just like Github.   
+You don't need to supply any colors, the calendar uses green by default, just like Github.
 If you do supply colors to *calendarData.colors*, the first index will be considered the new default color.
 
 Add a custom color to each entry by specifying the name you gave the color in calendarData.colors.
@@ -93,31 +93,31 @@ renderHeatmapCalendar(this.container, calendarData)
  
 
 ## Intensity:
-The "Intensity" means which intensity of color to use, for example from light-green to dark-green, 
-and they will be distributed between the highest and lowest number you pass to "intensity".  
+The "Intensity" means which intensity of color to use, for example from light-green to dark-green,
+and they will be distributed between the highest and lowest number you pass to "intensity".
 If the number range 0-100 is used, numbers between 1-20 would map to the lightest color, 40-60 would map to mid intensity color, and 80-100 would map to max intensity.
 You can add more intensities in order to increase color resolution; simply supply more colors to **calendarData.colors.yourcolor**
 
-Dataview's time variables are supported without any conversion, as they return milliseconds by default.  
+Dataview's time variables are supported without any conversion, as they return milliseconds by default.
 **[time:: 1 hours, 35 minutes] => intensity: page.time**
 
  
 
 ## Styling:
-Use Obsidian CSS snippets for custom styling.  
+Use Obsidian CSS snippets for custom styling.
 See [snippet examples](https://github.com/Richardsl/heatmap-calendar-obsidian/tree/master/EXAMPLE_VAULT/.obsidian/snippets).
 
  
 
 ## 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)
 
  
 
 ## Development (Windows):
- ```npm run dev``` - will start TS to JS transpiler and automatically copy the JS/CSS/manifest files to the example vault whenever they are modified.  
+ ```npm run dev``` - will start TS to JS transpiler and automatically copy the JS/CSS/manifest files to the example vault whenever they are modified.
  Installing https://github.com/pjeby/hot-reload is recommended to avoid restarting obsidian after every change, but remember to add a **.hot-reload** file to EXAMPLE_VAULT/.obsidian/plugins/heatmap-calendar/
 
  
@@ -134,9 +134,9 @@ See [snippet examples](https://github.com/Richardsl/heatmap-calendar-obsidian/tr
 - Feature: Add darkmode support
 
 **Version [0.4.0] - 2022-06-25**
-- Feature: Add hover preview feature courtesy of @arsenty from issue #12.  
-to enable - add **content: await dv.span(`[](${page.file.name})`)** to entries, and enable **Settings** -> **Core Plugins** -> **Page Preview**.   
-Optionally install plugin [Metatable](https://github.com/arnau/obsidian-metatable) to display metadata/frontmatter in the preview window aswell.  
+- Feature: Add hover preview feature courtesy of @arsenty from issue #12.
+to enable - add **content: await dv.span(`[](${page.file.name})`)** to entries, and enable **Settings** -> **Core Plugins** -> **Page Preview**.
+Optionally install plugin [Metatable](https://github.com/arnau/obsidian-metatable) to display metadata/frontmatter in the preview window aswell.
 See examples for more details
 
 **Version [0.3.0] - 2022-06-25**

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;
@@ -201,13 +207,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 )