gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 03:29:02 +01:00
Code Issues Actions 7 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

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

@ -16,6 +16,7 @@ const DROPDOWN_TPL = `
</style> </style>
<div class="calendar-header"> <div class="calendar-header">
<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> <div class="calendar-header-label" data-calendar-label="month"></div>
@ -23,9 +24,19 @@ const DROPDOWN_TPL = `
<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-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"> <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> <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>`;
@ -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"]');
// Month navigation
this.$label = this.$dropdownContent.find('[data-calendar-label="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.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
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;