calendar-js
Version:
Pure JS calendar generator
220 lines (182 loc) • 5.6 kB
Markdown
# Calendar.js [](https://circleci.com/gh/igor-ribeiro/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:
```js
calendar({
months: [ 'Enero', 'Febrero', 'Marzo', ... ],
monthsAbbr: [ 'Ene', 'Feb', 'Mar', ... ],
})
```
### .years(from, to)
Returns the years in range
```js
calendar().years(2010, 2015)[('2010', '2011', '2012', '2013', '2014', '2015')];
```
### .yearsAbbr(from, to)
Returns the years in range
```js
calendar().yearsAbbr(2010, 2015)[('10', '11', '12', '13', '14', '15')];
```
### .months()
```js
[ 'January', 'February', 'March', 'April', ... ]
```
### .monthsAbbr()
```js
[ 'Jan', 'Feb', 'Mar', 'Apr', ... ]
```
### .of(year, month[, transformer])
```js
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.
```js
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.
```js
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:
```js
{
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
```js
calendar().validate(2017, 0, 1); // valid
calendar().validate(2017, 1, 30); // invalid
```