Skip to content

Commit

Permalink
TypeScript rewrite (#6)
Browse files Browse the repository at this point in the history
Maintains the same signature and tests, just rewriting using TypeScript, as well as using [tsdx](https://github.com/jaredpalmer/tsdx) for modern asset generation.

The goal is to be compatible with [unpkg](https://unpkg.com) and [Pika](https://www.pika.dev).
  • Loading branch information
WesSouza authored Mar 5, 2020
1 parent 4e036c3 commit 02a5b52
Show file tree
Hide file tree
Showing 15 changed files with 1,293 additions and 603 deletions.
50 changes: 50 additions & 0 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
name: CI Tests

on:
pull_request:
types: [opened, synchronize, reopened]
push:
branches:
- master

jobs:
lint:
runs-on: ubuntu-latest

name: Lint on node 12.x and ubuntu-latest

steps:
- uses: actions/checkout@v1
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x

- name: Install deps and build
run: yarn install

- name: Lint codebase
run: yarn lint

test:
runs-on: ${{ matrix.os }}

strategy:
matrix:
node: ['10.x', '12.x', '13.x']
os: [ubuntu-latest, windows-latest, macOS-latest]

name: Test on node ${{ matrix.node }} and ${{ matrix.os }}

steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node }}

- name: Install deps and build
run: yarn install

- name: Test package
run: yarn test --runInBand
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
node_modules
*.log
.DS_Store
node_modules
dist
package-lock.json
yarn.lock
7 changes: 0 additions & 7 deletions .travis.yml

This file was deleted.

18 changes: 18 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
Copyright © Wes Souza <hey@wes.dev>

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
112 changes: 62 additions & 50 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,85 @@
# Calendar Base [![Build Status](https://travis-ci.org/WesleydeSouza/calendar-base.svg?branch=master)](https://travis-ci.org/WesleydeSouza/calendar-base)
# Calendar Base

[![NPM](https://nodei.co/npm/calendar-base.png)](https://nodei.co/npm/calendar-base/)
<a href="https://github.com/WesSouza/calendar-base/actions?query=branch%3Amaster+workflow%3A%22CI%20Tests"><img src="https://github.com/WesSouza/calendar-base/workflows/CI%20Tests/badge.svg" alt="Install, lint, test and build status badge"></a>

Base methods for generating calendars using JavaScript.
[![npm](https://nodei.co/npm/calendar-base.png)](https://nodei.co/npm/calendar-base/)

Supports IE 6+, Chrome 1+, Firefox 3+, Safari 4+.
Base methods for generating calendars using JavaScript.

Output is ES5 compatible.

## Installation

```bash
# using npm
npm install calendar-base
```

Or manually copy `dist/calendar-base.min.js` to your project.

# or yarn
yarn add calendar-base
```

## Usage
```js
var Calendar = require('calendar-base').Calendar,
cal = new Calendar();

cal.getCalendar(2015, 0);
// Returns an Array with the calendar for January 2015.
```js
const Calendar = require('calendar-base').Calendar;
const cal = new Calendar();

cal.getCalendar(2020, 0);
/*
Returns an Array with the calendar for January 2020, including empty spaces for
days from the previous and next months:
[
false,
false,
{ day: 1, weekDay: 3, month: 0, year: 2020 },
{ day: 2, weekDay: 4, month: 0, year: 2020 },
{ day: 3, weekDay: 5, month: 0, year: 2020 },
{ day: 4, weekDay: 6, month: 0, year: 2020 },
{ day: 5, weekDay: 0, month: 0, year: 2020 },
...
]
*/
```

Usage with AMD and global variables is available through `dist/calendar-base.min.js`.

[Check an online example](https://tonicdev.com/npm/calendar-base) or browse the `examples` folder for some simple use cases.

[Check an online example](https://npm.runkit.com/calendar-base) or browse the
[`examples`](./examples/) folder for some simple use cases.

### Date object notation

Every returned day or date argument follows this notation:

```js
{
day: 14,
month: 9,
year: 1986,
weekDay: 4,
selected: false,
siblingMonth: false,
weekNumber: 42
day: 14,
month: 9,
year: 1986,
weekDay: 4,
selected: false,
siblingMonth: false,
weekNumber: 42
}
```

Properties `month` and `weekDay` respect JavaScript’s [`Date.prototype`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype).

Only `day`, `month`, and `year` are necessary as input parameters for methods that require a date.
Properties `month` and `weekDay` respect JavaScript’s
[`Date.prototype`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype).

Only `day`, `month`, and `year` are necessary as input parameters for methods
that require a date.

#### `Calendar(options)`

Constructor for a new calendar generator.

The object `options` may have the following properties:

* `startDate`: current selected starting date (default `undefined`)
* `endDate`: current selected ending date (default `undefined`)
* `siblingMonths`: whether to include the previous and next months’ days before and after the current month when generating a calendar (default `false`)
* `weekNumbers`: whether to include the week number on each day
* `weekStart`: day of the week, respects [`Date.prototype.getDay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay) (default `0`, Sunday)

- `startDate`: current selected starting date (default `undefined`)
- `endDate`: current selected ending date (default `undefined`)
- `siblingMonths`: whether to include the previous and next months’ days before
and after the current month when generating a calendar (default `false`)
- `weekNumbers`: whether to include the week number on each day
- `weekStart`: day of the week, respects
[`Date.prototype.getDay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay) (default `0`, Sunday)

#### `Calendar.diff(dateOne, dateTwo)`

Expand All @@ -72,7 +90,6 @@ Returns the difference in days between `dateOne` and `dateTwo` as a `Number`.
-9
```


#### `Calendar.interval(dateOne, dateTwo)`

Returns the amount of days between `dateOne` and `dateTwo` as a `Number`.
Expand All @@ -82,13 +99,12 @@ Returns the amount of days between `dateOne` and `dateTwo` as a `Number`.
10
```


#### `Calendar.compare(leftDate, rightDate)`

Compares two date objects, returns:

- `-1` if `leftDate` < `rightDate`
- `0` if `leftDate` == `rightDate`
- `0` if `leftDate` == `rightDate`
- `1` if `leftDate` > `rightDate`

Useful for quick comparisons such as sorting an array of dates.
Expand All @@ -98,7 +114,6 @@ Useful for quick comparisons such as sorting an array of dates.
1
```


#### `Calendar.daysInMonth(year, month)`

Returns the amount of days in the given month as a `Number`.
Expand All @@ -108,7 +123,6 @@ Returns the amount of days in the given month as a `Number`.
31
```


#### `Calendar.isLeapYear(year)`

Returns whether the given year is a leap year, as a `Boolean`.
Expand All @@ -118,7 +132,6 @@ Returns whether the given year is a leap year, as a `Boolean`.
false
```


#### `Calendar.calculateWeekNumber(date)`

Returns the week number for the specified date.
Expand All @@ -128,12 +141,14 @@ Returns the week number for the specified date.
42
```


#### `Calendar.prototype.getCalendar(year, month)`

Returns an `Array` of dates with the days from the given month, always starting at the configured week day.
Returns an `Array` of dates with the days from the given month, always starting
at the configured week day.

If sibling months is disabled, paddings are added as `false` to align the week days, otherwise the respective days from the previous or next months are included.
If sibling months is disabled, paddings are added as `false` to align the week
days, otherwise the respective days from the previous or next months are
included.

```js
> var cal = new Calendar({ siblingMonths: true });
Expand All @@ -145,12 +160,10 @@ If sibling months is disabled, paddings are added as `false` to align the week d
{ day: 4, weekDay: 6, month: 6, year: 2015, siblingMonth: true } ]
```


#### `Calendar.prototype.setDate(date)`

Alias to `Calendar.prototype.setStartDate`.


#### `Calendar.prototype.setStartDate(date)`

Sets the current selected starting date.
Expand All @@ -159,7 +172,6 @@ Sets the current selected starting date.
> cal.setStartDate({ year: 2015, month: 0, day: 1 });
```


#### `Calendar.prototype.setEndDate(date)`

Sets the current selected ending date.
Expand All @@ -168,22 +180,22 @@ Sets the current selected ending date.
> cal.setEndDate({ year: 2015, month: 0, day: 31 });
```


#### `Calendar.prototype.isDateSelected(date)`

Checks wheter the given date is inside the selected dates interval, returns a `Boolean`.
Checks whether the given date is inside the selected dates interval, returns a
`Boolean`.

```js
> cal.isDateSelected({ year: 2015, month: 0, day: 10 });
true
```


## Important note on week numbers

Week numbers are calculated based on the ISO 8601 standard, which assumes calculations based on weeks starting on Mondays. Be extra careful displaying the week number if your calendar doesn't start on a Monday.

Week numbers are calculated based on the ISO 8601 standard, which assumes
calculations based on weeks starting on Mondays. Be extra careful displaying the
week number if your calendar doesn't start on a Monday.

## License

MIT, http://wesleydesouza.mit-license.org/
MIT, https://wes.dev/LICENSE.txt
1 change: 0 additions & 1 deletion dist/calendar-base.min.js

This file was deleted.

42 changes: 20 additions & 22 deletions examples/browser/index.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>Simple Calendar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<head>
<title>Simple Calendar</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1 class="calendar js-calendar-month"></h1>

<h1 class="calendar js-calendar-month"></h1>
<ul class="calendar js-calendar">
<li class="calendar-day -weekday">Mo</li>
<li class="calendar-day -weekday">Tu</li>
<li class="calendar-day -weekday">We</li>
<li class="calendar-day -weekday">Th</li>
<li class="calendar-day -weekday">Fr</li>
<li class="calendar-day -weekday">Sa</li>
<li class="calendar-day -weekday">Su</li>
</ul>

<ul class="calendar js-calendar">
<li class="calendar-day -weekday">Mo</li>
<li class="calendar-day -weekday">Tu</li>
<li class="calendar-day -weekday">We</li>
<li class="calendar-day -weekday">Th</li>
<li class="calendar-day -weekday">Fr</li>
<li class="calendar-day -weekday">Sa</li>
<li class="calendar-day -weekday">Su</li>
</ul>

<script src="../../dist/calendar-base.min.js"></script>
<script src="my-calendar.js"></script>

</body>
</html>
<script src="https://cdn.pika.dev/calendar-base@^1.0.0"></script>
<script src="./my-calendar.js"></script>
</body>
</html>
Loading

0 comments on commit 02a5b52

Please sign in to comment.