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 year switcher for calendar

Browse Source
This commit is contained in:
Elian Doran 2024-08-31 14:49:01 +03:00
parent 9cc2e7745e
commit 84056415ca
No known key found for this signature in database
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ const DROPDOWN_TPL = `
<div class="calendar-year-selector"> <div class="calendar-year-selector">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button> <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button>
<div class="calendar-header-label" data-calendar-label="year"></div> <input type="number" min="1900" max="2999" step="1" data-calendar-input="year" />
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="nextYear"></button> <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="nextYear"></button>
</div> </div>
@ -69,29 +69,33 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
// Month navigation // Month navigation
this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]'); this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
this.$monthSelect.on("input", (e) => { this.$monthSelect.on("input", (e) => {
this.date.setMonth(e.target.value); this.date.setMonth(e.target.value);
this.createMonth(); this.createMonth();
}); });
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
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 = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
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 // Year navigation
this.$yearLabel = this.$dropdownContent.find('[data-calendar-label="year"]'); this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
this.$yearSelect.on("input", (e) => {
this.date.setFullYear(e.target.value);
this.createMonth();
});
this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]'); this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
this.$nextYear.on('click', () => { this.$nextYear.on('click', () => {
this.date.setFullYear(this.date.getFullYear() + 1); this.date.setFullYear(this.date.getFullYear() + 1);
this.createMonth(); this.createMonth();
}); });
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
this.$previousYear.on('click', e => { this.$previousYear.on('click', e => {
this.date.setFullYear(this.date.getFullYear() - 1); this.date.setFullYear(this.date.getFullYear() - 1);
this.createMonth(); this.createMonth();
@ -200,6 +204,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.date.setMonth(this.date.getMonth() - 1); this.date.setMonth(this.date.getMonth() - 1);
this.$monthSelect.val(this.date.getMonth()); this.$monthSelect.val(this.date.getMonth());
this.$yearLabel.html(this.date.getFullYear()); this.$yearSelect.val(this.date.getFullYear());
} }
} }