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: Implement simple month switcher

Browse Source
This commit is contained in:
Elian Doran 2024-08-31 14:42:21 +03:00
parent cb57ceb541
commit 9cc2e7745e
No known key found for this signature in database
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,21 @@ 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";
const MONTHS = [
t("calendar.january"),
t("calendar.febuary"),
t("calendar.march"),
t("calendar.april"),
t("calendar.may"),
t("calendar.june"),
t("calendar.july"),
t("calendar.august"),
t("calendar.september"),
t("calendar.october"),
t("calendar.november"),
t("calendar.december")
];
const DROPDOWN_TPL = ` const DROPDOWN_TPL = `
<div class="calendar-dropdown-widget"> <div class="calendar-dropdown-widget">
<style> <style>
@ -19,7 +34,9 @@ const DROPDOWN_TPL = `
<div class="calendar-month-selector"> <div class="calendar-month-selector">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button> <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
<div class="calendar-header-label" data-calendar-label="month"></div> <select data-calendar-input="month">
${Object.entries(MONTHS).map(([i, month]) => `<option value=${i}>${month}</option>`)}
</select>
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button> <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
</div> </div>
@ -51,9 +68,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.$month = this.$dropdownContent.find('[data-calendar-area="month"]'); this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
// Month navigation // Month navigation
this.$label = this.$dropdownContent.find('[data-calendar-label="month"]'); this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]'); this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]'); this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
this.$monthSelect.on("input", (e) => {
this.date.setMonth(e.target.value);
this.createMonth();
});
this.$next.on('click', () => { this.$next.on('click', () => {
this.date.setMonth(this.date.getMonth() + 1); this.date.setMonth(this.date.getMonth() + 1);
this.createMonth(); this.createMonth();
@ -178,24 +199,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.date.setDate(1); this.date.setDate(1);
this.date.setMonth(this.date.getMonth() - 1); this.date.setMonth(this.date.getMonth() - 1);
this.$label.html(t(this.monthsAsString(this.date.getMonth()).toLowerCase())); this.$monthSelect.val(this.date.getMonth());
this.$yearLabel.html(this.date.getFullYear()); this.$yearLabel.html(this.date.getFullYear());
} }
monthsAsString(monthIndex) {
return [
t("calendar.january"),
t("calendar.febuary"),
t("calendar.march"),
t("calendar.april"),
t("calendar.may"),
t("calendar.june"),
t("calendar.july"),
t("calendar.august"),
t("calendar.september"),
t("calendar.october"),
t("calendar.november"),
t("calendar.december")
][monthIndex];
}
} }

4
src/public/stylesheets/calendar.css
View File

@ -42,6 +42,10 @@
width: 100%; width: 100%;
} }
.calendar-dropdown-widget select[data-calendar-input="month"] {
text-align: center;
}
.calendar-dropdown-widget .calendar-week { .calendar-dropdown-widget .calendar-week {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;