gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

client: Add basic year navigation to calendar

Browse Source
This commit is contained in:
Elian Doran 2024-08-31 14:32:25 +03:00
parent 0fd92a379b
commit cb57ceb541
No known key found for this signature in database
2 changed files with 49 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,24 +9,35 @@ import toastService from "../../services/toast.js";
const DROPDOWN_TPL = ` const DROPDOWN_TPL = `
<div class="calendar-dropdown-widget"> <div class="calendar-dropdown-widget">
<style> <style>
.calendar-dropdown-widget { .calendar-dropdown-widget {
width: 350px; width: 350px;
} }
</style> </style>
<div class="calendar-header"> <div class="calendar-header">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button> <div class="calendar-month-selector">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
<div class="calendar-header-label" data-calendar-label="month"></div> <div class="calendar-header-label" data-calendar-label="month"></div>
<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>
<div class="calendar-week"> <div class="calendar-year-selector">
<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> <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button>
</div>
<div class="calendar-body" data-calendar-area="month"></div> <div class="calendar-header-label" data-calendar-label="year"></div>
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="nextYear"></button>
</div>
</div>
<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 class="calendar-body" data-calendar-area="month"></div>
</div>`; </div>`;
export default class CalendarWidget extends RightDropdownButtonWidget { export default class CalendarWidget extends RightDropdownButtonWidget {
@ -38,20 +49,33 @@ 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.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]'); // Month navigation
this.$label = this.$dropdownContent.find('[data-calendar-label="month"]'); this.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
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();
}); });
this.$previous.on('click', e => { this.$previous.on('click', e => {
this.date.setMonth(this.date.getMonth() - 1); this.date.setMonth(this.date.getMonth() - 1);
this.createMonth(); this.createMonth();
}); });
// Year navigation
this.$yearLabel = this.$dropdownContent.find('[data-calendar-label="year"]');
this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
this.$nextYear.on('click', () => {
this.date.setFullYear(this.date.getFullYear() + 1);
this.createMonth();
});
this.$previousYear.on('click', e => {
this.date.setFullYear(this.date.getFullYear() - 1);
this.createMonth();
});
this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation()); this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation());
this.$dropdownContent.on('click', '.calendar-date', async ev => { this.$dropdownContent.on('click', '.calendar-date', async ev => {
@ -154,7 +178,8 @@ 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.date.getFullYear()}`); this.$label.html(t(this.monthsAsString(this.date.getMonth()).toLowerCase()));
this.$yearLabel.html(this.date.getFullYear());
} }
monthsAsString(monthIndex) { monthsAsString(monthIndex) {

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

@ -31,6 +31,11 @@
padding: 0 0.5rem 0.5rem 0.5rem; padding: 0 0.5rem 0.5rem 0.5rem;
} }
.calendar-dropdown-widget .calendar-header > div {
display: flex;
flex-grow: 1;
}
.calendar-dropdown-widget .calendar-header-label { .calendar-dropdown-widget .calendar-header-label {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;