Marama

From te reo maori: marama - 1. moon, 2. month

Uasge

var Marama = require('marama')
require('marama/lib/styles-inject')()

const marama = Marama({
  events: [
    { date: new Date(2018, 3, 4), data: { attending: false } },
    { date: new Date(2018, 7, 21), data: { attending: true } }
    // NOTE Date has signatute (Year, monthIndex, day)
  ],
  range: {
    gte: new Date(2018, 7, 13),
    lt: new Date(2018, 7, 20) // range of highlighted dates
  },
  styles: {
    tileRadius: 18,
    tileGap: 4
  }
})

document.body.appendChild(marama)

API

Marama can take the following options:

{
  month,   // month number (by common defn, e.g. 4 is April)
  events      // (optional) an Array of form: [{ date: Date, data: { ... } }]
  year,       // (optional) defaults to current year
  range,      // (optional) an Object of form { gte: Date, lt: Date } to highlight
  setRange,   // (optional) a callback which receives a range on clicks { gte, lt } 
  styles,     // (optional) Object, _see below_
  today       // (optional) a Date which can be used to over-ride the definition of today
}

The styles option can be used to change how Marama looks programmatically

{
  tileRadius, // (optional) Number, half-width of a day-tile, in px (default 6)
  tileGap,    // (optional) Number, gap between day-tiles, in px (default: 1)
  dotRadius,  // (optional) Number, radius of the 'attendance' dot in px (default: tileRadius/2)
  dotBorder,  // (optional) Number, depth of outline on an event not attending (default: 1) 
  weekFormat, // (optional) String(rows|columns), which direction weeks run in (default: rows)
}