Working calendar month navigation
This commit is contained in:
parent
72a6297ae5
commit
ae4b529879
|
@ -34,9 +34,6 @@ for (let i = 0; i < 7; i++) {
|
||||||
|
|
||||||
class CalendarView extends TemplateView {
|
class CalendarView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
const date = vm.date;
|
|
||||||
console.log('CalendarView vm', vm);
|
|
||||||
|
|
||||||
return t.div({ className: { CalendarView: true } }, [
|
return t.div({ className: { CalendarView: true } }, [
|
||||||
t.div({ className: { CalendarView_heading: true } }, [
|
t.div({ className: { CalendarView_heading: true } }, [
|
||||||
t.button(
|
t.button(
|
||||||
|
@ -62,38 +59,43 @@ class CalendarView extends TemplateView {
|
||||||
['\u276F']
|
['\u276F']
|
||||||
),
|
),
|
||||||
]),
|
]),
|
||||||
t.ol(
|
t.map(
|
||||||
{ className: { CalendarView_calendar: true } },
|
(vm) => vm.date,
|
||||||
[].concat(
|
(date, t) => {
|
||||||
Object.keys(DAYS_OF_WEEK).map((dayKey) => {
|
return t.ol(
|
||||||
return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]);
|
{ className: { CalendarView_calendar: true } },
|
||||||
}),
|
[].concat(
|
||||||
(() => {
|
Object.keys(DAYS_OF_WEEK).map((dayKey) => {
|
||||||
let dayNodes = [];
|
return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]);
|
||||||
for (let i = 0; i < numDaysInMonthForDate(date); i++) {
|
}),
|
||||||
// We only need to calculate the day offset for the first day of the month
|
(() => {
|
||||||
let dayNumber;
|
let dayNodes = [];
|
||||||
if (i === 0) {
|
for (let i = 0; i < numDaysInMonthForDate(date); i++) {
|
||||||
const dayNumberDate = new Date(date);
|
// We only need to calculate the day offset for the first day of the month
|
||||||
dayNumberDate.setDate(i + 1);
|
let dayNumber;
|
||||||
// day number from 0 (monday) to 6 (sunday)
|
if (i === 0) {
|
||||||
dayNumber = dayNumberDate.getDay();
|
const dayNumberDate = new Date(date);
|
||||||
}
|
dayNumberDate.setDate(i + 1);
|
||||||
|
// day number from 0 (monday) to 6 (sunday)
|
||||||
|
dayNumber = dayNumberDate.getDay();
|
||||||
|
}
|
||||||
|
|
||||||
dayNodes.push(
|
dayNodes.push(
|
||||||
t.li(
|
t.li(
|
||||||
{
|
{
|
||||||
className: { CalendarView_day: true },
|
className: { CalendarView_day: true },
|
||||||
style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null,
|
style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null,
|
||||||
},
|
},
|
||||||
[String(i + 1)]
|
[String(i + 1)]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return dayNodes;
|
return dayNodes;
|
||||||
})()
|
})()
|
||||||
)
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,6 +13,7 @@ const {
|
||||||
TimelineView,
|
TimelineView,
|
||||||
RoomView,
|
RoomView,
|
||||||
RoomViewModel,
|
RoomViewModel,
|
||||||
|
ViewModel,
|
||||||
} = require('hydrogen-view-sdk');
|
} = require('hydrogen-view-sdk');
|
||||||
|
|
||||||
const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
|
const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
|
||||||
|
@ -179,29 +180,39 @@ async function mountHydrogen() {
|
||||||
kind: 'none',
|
kind: 'none',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
class CalendarViewModel extends ViewModel {
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
const { date } = options;
|
||||||
|
this._date = date;
|
||||||
|
}
|
||||||
|
|
||||||
|
get date() {
|
||||||
|
return this._date;
|
||||||
|
}
|
||||||
|
|
||||||
|
prevMonth() {
|
||||||
|
const prevMonthDate = new Date(this._date);
|
||||||
|
prevMonthDate.setMonth(this._date.getMonth() - 1);
|
||||||
|
this._date = prevMonthDate;
|
||||||
|
this.emitChange('date');
|
||||||
|
}
|
||||||
|
|
||||||
|
nextMonth() {
|
||||||
|
const nextMonthDate = new Date(this._date);
|
||||||
|
nextMonthDate.setMonth(this._date.getMonth() + 1);
|
||||||
|
this._date = nextMonthDate;
|
||||||
|
this.emitChange('date');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const archiveViewModel = {
|
const archiveViewModel = {
|
||||||
roomViewModel,
|
roomViewModel,
|
||||||
rightPanelModel: {
|
rightPanelModel: {
|
||||||
activeViewModel: {
|
activeViewModel: {
|
||||||
type: 'custom',
|
type: 'custom',
|
||||||
customView: RightPanelContentView,
|
customView: RightPanelContentView,
|
||||||
|
calendarViewModel: new CalendarViewModel({ date: new Date() }),
|
||||||
calendarViewModel: {
|
|
||||||
date: new Date(),
|
|
||||||
prevMonth: function () {
|
|
||||||
console.log('prevMonth');
|
|
||||||
const prevMonthDate = new Date(this.date);
|
|
||||||
prevMonthDate.setMonth(this.date.getMonth() - 1);
|
|
||||||
console.log('prevMonthDate', prevMonthDate);
|
|
||||||
this.date = prevMonthDate;
|
|
||||||
},
|
|
||||||
nextMonth: function () {
|
|
||||||
console.log('nextMonth');
|
|
||||||
const nextMonthDate = new Date(this.date);
|
|
||||||
nextMonthDate.setMonth(this.date.getMonth() + 1);
|
|
||||||
this.date = nextMonthDate;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue