json-calendar

json-calendar

A JSON data model for displaying dates and date ranges on a calendar interface.

Installation

Install with NodeJS:

npm install json-calendar

Install for browsers, Volta, or Deno:

import { install } from 'esinstall'

await install(['json-calendar'], {
  /* options */
})
// Result: Creates `json-calendar.js` inside a `web_modules/` directory in your current directory.

Usage

Works default out of the box:

const Calendar = require("json-calendar")
const calendar = new Calendar()
calendar.weeks.map(
  week => week.days.map(
    day => {
      const { className, id, day, date, monthIndex, year } = day;
      // do something with the day's data
      return date.toLocaleString()
    }
  )
)

Or set a custom selected date:

// with custom today date
const calendar = new Calendar({ today: new Date(1971, 0, 1) })

Or use a specific language:

// with language for day and month names
// 'fr', 'es' and 'en' supported, will default to 'en' if empty or unrecognized
const calendarWithSpanishNames = new Calendar({ languageCode: 'es' })

For example:

calendarWithSpanishName.dayNames.map(item => console.log(item.name))
// Outputs:
//   'Domingo'
//   'Lunes'
//   'Martes'
//   'Miércoles'
//   'Jueves'
//   'Viernes'
//   'Sábado'

Get an array of weeks in this month

console.log("Weeks this month:", calendar.weeks.length)
// Output: Weeks this month: 5

You can use the returned array of arrays to render a full calendar for a given month. If, for example, the month is September of 2018:

calendar.weeks.map(w => w.map(d => d.day))

Will output all the elements as the day number:

[
  [26, 27, 28, 29, 30, 31, 1],
  [2, 3, 4, 5, 6, 7, 8],
  [9, 10, 11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20, 21, 22],
  [23, 24, 25, 26, 27, 28, 29],
  [30, 1, 2, 3, 4, 5, 6]
];

Get an array of month names

calendar.monthNames

Will output an array of month names:

[
  'January', 'February', 'March', 'April', 'May', 'June', 'July',
  'August', 'September', 'October', 'November', 'December'
]

Change the displayed month

The following example code will display the days for September, 2020:

// create the calendar
const Calendar = require("json-calendar")
const calendar = new Calendar()

// sometime later fire an event
function handleOnClick() {
  calendar.changeMonth(2020, 8)
}

The function changeMonth takes two number params: year and monthIndex

Changelog

1.9.1 (2020-12-07)

Bug Fixes

• bump ts-standard and remove json types (#333) (2801173)