gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

client: Update calendar header for first day of week

Browse Source
This commit is contained in:
Elian Doran 2024-08-31 16:50:23 +03:00
parent f5330cb915
commit 981ff34ac4
No known key found for this signature in database
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/public/app/widgets/buttons/calendar.js
View File

@ -6,6 +6,7 @@ import server from "../../services/server.js";
import appContext from "../../components/app_context.js"; import appContext from "../../components/app_context.js";
import RightDropdownButtonWidget from "./right_dropdown_button.js"; import RightDropdownButtonWidget from "./right_dropdown_button.js";
import toastService from "../../services/toast.js"; import toastService from "../../services/toast.js";
import options from "../../services/options.js";
const MONTHS = [ const MONTHS = [
t("calendar.january"), t("calendar.january"),
@ -51,12 +52,21 @@ const DROPDOWN_TPL = `
</div> </div>
<div class="calendar-week"> <div class="calendar-week">
<span>${t("calendar.mon")}</span> <span>${t("calendar.tue")}</span><span>${t("calendar.wed")}</span> <span>${t("calendar.thu")}</span> <span>${t("calendar.fri")}</span> <span>${t("calendar.sat")}</span> <span>${t("calendar.sun")}</span>
</div> </div>
<div class="calendar-body" data-calendar-area="month"></div> <div class="calendar-body" data-calendar-area="month"></div>
</div>`; </div>`;
const DAYS_OF_WEEK = [
t("calendar.sun"),
t("calendar.mon"),
t("calendar.tue"),
t("calendar.wed"),
t("calendar.thu"),
t("calendar.fri"),
t("calendar.sat")
];
export default class CalendarWidget extends RightDropdownButtonWidget { export default class CalendarWidget extends RightDropdownButtonWidget {
constructor(title, icon) { constructor(title, icon) {
super(title, icon, DROPDOWN_TPL); super(title, icon, DROPDOWN_TPL);
@ -66,6 +76,9 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
super.doRender(); super.doRender();
this.$month = this.$dropdownContent.find('[data-calendar-area="month"]'); this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
this.$weekHeader = this.$dropdownContent.find(".calendar-week");
this.manageFirstDayOfWeek();
// Month navigation // Month navigation
this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]'); this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
@ -118,6 +131,16 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
}); });
} }
manageFirstDayOfWeek() {
this.firstDayOfWeek = options.getInt("firstDayOfWeek");
// Generate the list of days of the week taking into consideration the user's selected first day of week.
let localeDaysOfWeek = [ ...DAYS_OF_WEEK ];
const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
localeDaysOfWeek = [ ...localeDaysOfWeek, ...daysToBeAddedAtEnd ];
this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`));
}
async dropdownShown() { async dropdownShown() {
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET); await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
@ -209,7 +232,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
async entitiesReloadedEvent({loadResults}) { async entitiesReloadedEvent({loadResults}) {
if (loadResults.getOptionNames().includes("firstDayOfWeek")) { if (loadResults.getOptionNames().includes("firstDayOfWeek")) {
this.init(); this.manageFirstDayOfWeek();
} }
} }