trilium/src/public/javascripts/widgets/calendar.js

164 lines
5 KiB
JavaScript
Raw Normal View History

2020-02-03 03:02:08 +08:00
import CollapsibleWidget from "./collapsible_widget.js";
2019-09-08 22:06:42 +08:00
import libraryLoader from "../services/library_loader.js";
import utils from "../services/utils.js";
import dateNoteService from "../services/date_notes.js";
import server from "../services/server.js";
2020-02-03 05:04:28 +08:00
import appContext from "../services/app_context.js";
2019-09-08 19:08:01 +08:00
const TPL = `
2019-09-08 22:06:42 +08:00
<div class="calendar-widget">
<div class="calendar-header">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
2019-09-08 22:06:42 +08:00
2020-02-03 03:02:08 +08:00
<div class="calendar-header-label" data-calendar-label="month">
2019-09-08 22:06:42 +08:00
March 2017
</div>
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
2019-09-08 22:06:42 +08:00
</div>
<div class="calendar-week">
<span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
</div>
<div class="calendar-body" data-calendar-area="month"></div>
</div>
2019-09-08 19:08:01 +08:00
`;
2020-02-03 04:16:20 +08:00
export default class CalendarWidget extends CollapsibleWidget {
2019-09-08 19:08:01 +08:00
getWidgetTitle() { return "Calendar"; }
async isEnabled() {
return await super.isEnabled()
2020-02-04 04:56:45 +08:00
&& this.note.hasOwnedLabel("dateNote");
2019-09-08 19:08:01 +08:00
}
async doRenderBody() {
2019-09-08 22:06:42 +08:00
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
2019-09-08 19:08:01 +08:00
this.$body.html(TPL);
2019-09-08 22:06:42 +08:00
2020-02-03 03:02:08 +08:00
this.$month = this.$body.find('[data-calendar-area="month"]');
this.$next = this.$body.find('[data-calendar-toggle="next"]');
this.$previous = this.$body.find('[data-calendar-toggle="previous"]');
this.$label = this.$body.find('[data-calendar-label="month"]');
2019-09-08 19:08:01 +08:00
2019-11-10 00:39:48 +08:00
this.$next.on('click', () => {
2019-09-08 22:06:42 +08:00
this.date.setMonth(this.date.getMonth() + 1);
this.createMonth();
});
2019-11-10 00:39:48 +08:00
this.$previous.on('click', () => {
2019-09-08 22:06:42 +08:00
this.date.setMonth(this.date.getMonth() - 1);
this.createMonth();
});
this.$body.on('click', '.calendar-date', async ev => {
const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
const note = await dateNoteService.getDateNote(date);
if (note) {
appContext.tabManager.getActiveTabContext().setNote(note.noteId);
2019-09-08 22:06:42 +08:00
}
else {
alert("Cannot find day note");
}
});
}
2020-02-03 03:02:08 +08:00
async refreshWithNote(note) {
this.init(this.$body, note.getOwnedLabelValue("dateNote"));
}
init($el, activeDate) {
this.activeDate = new Date(activeDate + "T12:00:00"); // attaching time fixes local timezone handling
this.todaysDate = new Date();
this.date = new Date(this.activeDate.getTime());
this.date.setDate(1);
this.createMonth();
}
createDay(dateNotesForMonth, num, day) {
const $newDay = $('<a>')
2019-09-08 22:06:42 +08:00
.addClass("calendar-date")
.attr('data-calendar-date', utils.formatDateISO(this.date));
const $date = $('<span>').html(num);
// if it's the first day of the month
if (num === 1) {
if (day === 0) {
$newDay.css("marginLeft", (6 * 14.28) + '%');
} else {
$newDay.css("marginLeft", ((day - 1) * 14.28) + '%');
}
}
const dateNoteId = dateNotesForMonth[utils.formatDateISO(this.date)];
if (dateNoteId) {
$newDay.addClass('calendar-date-exists');
$newDay.attr("data-note-path", dateNoteId);
}
2019-09-08 22:06:42 +08:00
if (this.isEqual(this.date, this.activeDate)) {
$newDay.addClass('calendar-date-active');
}
if (this.isEqual(this.date, this.todaysDate)) {
$newDay.addClass('calendar-date-today');
}
$newDay.append($date);
2020-02-03 03:02:08 +08:00
return $newDay;
2019-09-08 22:06:42 +08:00
}
isEqual(a, b) {
return a.getFullYear() === b.getFullYear()
&& a.getMonth() === b.getMonth()
&& a.getDate() === b.getDate();
}
async createMonth() {
const month = utils.formatDateISO(this.date).substr(0, 7);
const dateNotesForMonth = await server.get('date-notes/notes-for-month/' + month);
2020-02-03 03:02:08 +08:00
this.$month.empty();
2019-09-08 22:06:42 +08:00
const currentMonth = this.date.getMonth();
while (this.date.getMonth() === currentMonth) {
2020-02-03 03:02:08 +08:00
const $day = this.createDay(
dateNotesForMonth,
2019-09-08 22:06:42 +08:00
this.date.getDate(),
this.date.getDay(),
this.date.getFullYear()
);
2020-02-03 03:02:08 +08:00
this.$month.append($day);
2019-09-08 22:06:42 +08:00
this.date.setDate(this.date.getDate() + 1);
}
// while loop trips over and day is at 30/31, bring it back
this.date.setDate(1);
this.date.setMonth(this.date.getMonth() - 1);
this.$label.html(this.monthsAsString(this.date.getMonth()) + ' ' + this.date.getFullYear());
}
monthsAsString(monthIndex) {
return [
'January',
'Febuary',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
][monthIndex];
}
2020-02-03 04:16:20 +08:00
}