Calendar.js 
Pure JS calendar library
Motivation
I needed a date-picker component for a VueJS project, and I found it! But, one has too many dependencies, and the styles of others are too coupled with Bootstrap or Material Design or whatever.
So I started by doing a simple calendar using MomentJS. By doing it I realized that a date-picker is a calendar with the option of selecting a date. With that in mind I realized that we need to calculate some things to render a calendar, like, the days in that month, in what weekday is the first and the last day, wich weekdays are empty in that month, etc. Then I concluded:
We can have a general library that calculates these things so we only need to render these information in any framework
That’s my goal.
API Usage
config
| Option | Description |
|---|---|
| months | Array with the months names |
| monthsAbbr | Array with the months names abbreviation |
| weekdays | Array with the weekdays names |
| weekdaysAbbr | Array with the weekdays names abbreviation |
Usage:
calendar({
months: [ 'Enero', 'Febrero', 'Marzo', ... ],
monthsAbbr: [ 'Ene', 'Feb', 'Mar', ... ],
}).years(from, to)
Returns the years in range
calendar().years(2010, 2015)[('2010', '2011', '2012', '2013', '2014', '2015')];.yearsAbbr(from, to)
Returns the years in range
calendar().yearsAbbr(2010, 2015)[('10', '11', '12', '13', '14', '15')];.months()
[ 'January', 'February', 'March', 'April', ... ].monthsAbbr()
[ 'Jan', 'Feb', 'Mar', 'Apr', ... ].of(year, month[, transformer])
calendar().of(2016, 0)
{
year: '2016',
yearAbbr: '16',
month: 'January',
monthAbbr: 'Jan',
weekdays: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysAbbr: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
days: 31,
firstWeekday: 5,
lastWeekday: 0,
calendar: [
[ 0, 0, 0, 0, 0, 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 ],
[ 31, 0, 0, 0, 0, 0, 0 ],
],
}The transformer param is a function that receives the result of .of method so
you can customize the output.
.detailed(year, month[, dayTransformer])
Like .of but returns a 'date descriptor object' for each date instead of an
integer.
calendar().detailed(2017, 10)
{
year: '2017',
yearAbbr: '17',
month: 'November',
monthAbbr: 'Nov',
weekdays: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysAbbr: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
days: 30,
firstWeekday: 3,
lastWeekday: 4,
calendar: [
[
{
date: '2017-10-29T05:00:00.000Z', // native js date object
day: 29,
isInPrimaryMonth: false,
isInLastWeekOfPrimaryMonth: false,
index: { day: 0, week: 0 }
},
{
date: '2017-10-30T05:00:00.000Z',
day: 30,
isInPrimaryMonth: false,
isInLastWeekOfPrimaryMonth: false,
index: { day: 1, week: 0 }
},
{
date: '2017-10-31T05:00:00.000Z',
day: 31,
isInPrimaryMonth: false,
isInLastWeekOfPrimaryMonth: false,
index: { day: 2, week: 0 }
},
{
date: '2017-11-01T05:00:00.000Z',
day: 1,
isInPrimaryMonth: true,
isInLastWeekOfPrimaryMonth: false,
index: { day: 3, week: 0 }
},
{
date: '2017-11-02T05:00:00.000Z',
day: 2,
isInPrimaryMonth: true,
isInLastWeekOfPrimaryMonth: false,
index: { day: 4, week: 0 }
},
{
date: '2017-11-03T05:00:00.000Z',
day: 3,
isInPrimaryMonth: true,
isInLastWeekOfPrimaryMonth: false,
index: { day: 5, week: 0 }
},
{
date: '2017-11-04T05:00:00.000Z',
day: 4,
isInPrimaryMonth: true,
isInLastWeekOfPrimaryMonth: false,
index: { day: 6, week: 0 }
}
],
[ /* ... */ ],
[ /* ... */ ],
[ /* ... */ ],
[ /* ... */ ]
]
}If you supply a dayTransformer callback, whatever is returned will be used in
place of the default date descriptor object. The callback is supplied the
standard date descriptor object as well as the remainder of the .detailed
result set.
In this case, we'll add a few custom properties - customFormat and weekday.
This way, anything that consumes this data can simply read these "pre-computed"
properties.
var month = calendar().detailed(2017, 10, (data, calendar) => {
return Object.assign(
{
customFormat: someCustomFunction(data.date), // preformat date
weekday: calendar.weekdays[data.index.day], // pre-pluck the weekday
},
data
);
});The resulting date descriptor objects will now look like this:
{
customFormat: '11/29/2017',
weekday: 'Wednesday',
date: '2017-10-29T05:00:00.000Z',
day: 29,
isInPrimaryMonth: false,
isInLastWeekOfPrimaryMonth: false,
index: { day: 0, week: 0 }
}.validate(year, month, day)
Returns if the date is valid
calendar().validate(2017, 0, 1); // valid
calendar().validate(2017, 1, 30); // invalid