Files: f4d5311f0568a4e8494ef82c9a12ff9545d9f9cd / views / component / day-picker.js
1778 bytesRaw
1 | const { h, computed } = require('mutant') |
2 | const Marama = require('marama') |
3 | |
4 | module.exports = function DayPicker (state) { |
5 | const startOfToday = startOfDay() |
6 | |
7 | return h('ScryDayPicker', [ |
8 | h('div.month-picker', [ |
9 | h('button', { 'ev-click': () => setMonth(-1) }, '<'), |
10 | MonthTitle(state.monthIndex), |
11 | h('button', { 'ev-click': () => setMonth(+1) }, '>') |
12 | ]), |
13 | computed(state, ({ monthIndex, days }) => { |
14 | return Marama({ |
15 | monthIndex, |
16 | events: days, |
17 | onSelect, |
18 | styles: { |
19 | weekFormat: 'rows', |
20 | showNumbers: true, |
21 | tileRadius: 16, |
22 | tileGap: 8 |
23 | } |
24 | }) |
25 | }) |
26 | ]) |
27 | |
28 | function setMonth (d) { |
29 | state.monthIndex.set(state.monthIndex() + d) |
30 | } |
31 | |
32 | function onSelect ({ gte, lt, events: dayEvents }) { |
33 | if (gte < startOfToday) return |
34 | |
35 | if (!dayEvents.length) addEmptyEvent() |
36 | else clearDay() |
37 | |
38 | function addEmptyEvent () { |
39 | state.days.push(Event(gte)) |
40 | } |
41 | function clearDay () { |
42 | const prunedEvents = state.days().filter(e => !dayEvents.includes(e)) |
43 | state.days.set(prunedEvents) |
44 | } |
45 | } |
46 | } |
47 | |
48 | function MonthTitle (monthIndex) { |
49 | const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ] |
50 | |
51 | return computed(monthIndex, mi => { |
52 | const now = new Date() |
53 | const view = new Date(now.getFullYear(), mi, 1) |
54 | |
55 | return `${MONTHS[view.getMonth()]} ${view.getFullYear()}` |
56 | |
57 | // while (monthIndex < 0) { monthIndex += 12 } |
58 | // return `${MONTHS[(monthIndex) % 12]} ${year}` |
59 | }) |
60 | } |
61 | |
62 | function Event (date) { |
63 | return { |
64 | date, |
65 | data: {attending: true} |
66 | } |
67 | } |
68 | |
69 | function startOfDay (d = new Date()) { |
70 | return new Date(d.getFullYear(), d.getMonth(), d.getDate()) |
71 | } |
72 |
Built with git-ssb-web