Files: ca2790e4654757e6f97c0d5cff97163c1865af61 / index.js
2621 bytesRaw
1 | const h = require('mutant/h') |
2 | const DayTile = require('./day-tile') |
3 | const DayLabel = require('./day-label') |
4 | const getDay = require('./lib/get-day') |
5 | |
6 | const DAYS = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ] |
7 | const DEFAULT_FORMAT = 'rows' |
8 | |
9 | module.exports = function Marama (opts = {}) { |
10 | const day = opts.today || startOfDay() |
11 | const { |
12 | events = [], |
13 | month = day.getMonth() + 1, // month number (common defn) |
14 | year = day.getFullYear(), |
15 | range = null, |
16 | onSelect = () => {}, |
17 | styles = {}, |
18 | today = day |
19 | } = opts |
20 | if (opts.style) console.error('Marama: you have passed in **style** instead of styles!') |
21 | |
22 | const monthIndex = month - 1 // month number (Date API defn) |
23 | const monthLength = new Date(year, monthIndex + 1, 0).getDate() |
24 | // NOTE Date takes month as a monthIndex i.e. april = 3 |
25 | // and day = 0 goes back a day |
26 | const days = Array(monthLength).fill().map((_, i) => i + 1) |
27 | const dayOpts = { |
28 | events, |
29 | year, |
30 | monthIndex, |
31 | // day TBD |
32 | today, |
33 | offset: getDay(new Date(year, monthIndex, 1)) - 1, // how far into the week the month starts |
34 | weekFormat: getWeekFormat(styles), |
35 | showNumbers: Boolean(styles.showNumbers), |
36 | range, |
37 | onSelect |
38 | } |
39 | |
40 | return h('div.Marama', { style: getStyles(styles) }, [ |
41 | DAYS.map((day, i) => DayLabel(day, i, dayOpts.weekFormat)), |
42 | days.map(day => { |
43 | dayOpts.day = day // note we're mutating this object (might save memory?) |
44 | return DayTile(dayOpts) |
45 | }) |
46 | ]) |
47 | } |
48 | |
49 | function getStyles (styles = {}) { |
50 | const { |
51 | tileRadius = 6, |
52 | tileGap = 1, |
53 | dotRadius, |
54 | dotBorder = 1 |
55 | } = styles |
56 | const format = getWeekFormat(styles) |
57 | const transFormat = ['rows', 'columns'].find(f => f !== format) |
58 | |
59 | const _styles = { |
60 | '--tile-width': `${2 * tileRadius}px`, |
61 | '--tile-gap': `${tileGap}px`, |
62 | '--dot-width': `${2 * dotRadius || tileRadius}px`, |
63 | '--dot-border': `${dotBorder}px`, |
64 | display: 'grid', |
65 | [`grid-template-${format}`]: 'calc(var(--tile-width) + 2 * var(--tile-gap)) repeat(6, var(--tile-width))', |
66 | [`grid-template-${transFormat}`]: 'repeat(7, var(--tile-width))' |
67 | } |
68 | |
69 | return _styles |
70 | } |
71 | |
72 | function getWeekFormat (styles) { |
73 | if (styles.weekFormat && !['rows', 'columns'].includes(styles.weekFormat)) { |
74 | throw new Error('marama styles.weekFormat must be either "rows" or "columns"') |
75 | } |
76 | return styles.weekFormat || DEFAULT_FORMAT |
77 | } |
78 | |
79 | function startOfDay (d = new Date()) { |
80 | return new Date(d.getFullYear(), d.getMonth(), d.getDate()) |
81 | } |
82 | |
83 | // function endOfDay (d = new Date()) { |
84 | // return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1) |
85 | // } |
86 |
Built with git-ssb-web