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 = `
<div class="calendar-dropdown-widget">
<style>
.calendar-dropdown-widget {
width: 350px;
}
</style>
<style>
.calendar-dropdown-widget {
width: 350px;
}
</style>
<div class="calendar-header">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
<div class="calendar-header">
<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>
</div>
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
</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 class="calendar-year-selector">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button>
<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>`;
export default class CalendarWidget extends RightDropdownButtonWidget {
@ -38,20 +49,33 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
super.doRender();
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.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
this.$next.on('click', () => {
this.date.setMonth(this.date.getMonth() + 1);
this.createMonth();
});
this.$previous.on('click', e => {
this.date.setMonth(this.date.getMonth() - 1);
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.on('click', '.calendar-date', async ev => {
@ -154,7 +178,8 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.date.setDate(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) {

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

@ -31,6 +31,11 @@
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 {
font-weight: bold;
text-align: center;