forked from gbrits/ionic-calendar
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updating the README.md for legibility and understanding.
- Loading branch information
Grant Brits
committed
Dec 8, 2017
1 parent
30ad474
commit 790a079
Showing
2 changed files
with
66 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,83 +1,93 @@ | ||
# ionic-calendar | ||
# Ionic Calendar (English) | ||
|
||
![image](https://raw.githubusercontent.com/gbrits/ionic-calendar/master/calendar.png?raw=true) | ||
A straight forward calendar module that has the optional capability to expand to *clickable days* and trackable *events*, with unobtrusive boiler-plating. | ||
|
||
## Usage | ||
## Ionic Support | ||
|
||
- npm install ionic3-calendar-en --save (in ionic project folder) | ||
- in app.module.ts | ||
This module was tested to Ionic v3.19.0. | ||
|
||
``` javascript | ||
import { CalendarModule } from 'ionic3-calendar-en'; | ||
### Installing | ||
|
||
Go ahead and install via NPM | ||
|
||
@NgModule({ | ||
... | ||
imports: [ | ||
... | ||
CalendarModule, | ||
... | ||
] | ||
... | ||
}) | ||
``` | ||
npm install ionic3-calendar-en --save | ||
``` | ||
|
||
- Basic usage: | ||
Within your **app.module.ts** file, make sure to add the import. | ||
|
||
``` javascript | ||
<ion-calendar #calendar></ion-calendar> | ||
```javascript | ||
import { CalendarModule } from 'ionic3-calendar-en'; | ||
@NgModule({ | ||
... | ||
imports: [ | ||
... | ||
CalendarModule, | ||
... | ||
] | ||
... | ||
}) | ||
``` | ||
|
||
- Create a jump button to go to today | ||
## Usage / Getting started | ||
|
||
Basic usage is as follows: | ||
|
||
``` javascript | ||
<button ion-button clear (click)="calendar.today()">Today</button> | ||
```javascript | ||
<ion-calendar #calendar></ion-calendar> | ||
``` | ||
|
||
- In order to retrieve information about the tapped day, console logs by default. | ||
To make days clickable, and emit back information about the day selected, include the onDaySelect binding. | ||
|
||
``` javascript | ||
```javascript | ||
<ion-calendar #calendar (onDaySelect)="onDaySelect($event)"></ion-calendar> | ||
``` | ||
|
||
- Add in events (an array of objects, year, month, date - integers for each) - for example: | ||
``` javascript | ||
this.currentEvents = [ | ||
{ | ||
year: 2017, | ||
month: 11, | ||
date: 25 | ||
}, | ||
{ | ||
year: 2017, | ||
month: 11, | ||
date: 26 | ||
} | ||
]; | ||
``` | ||
- Usage: | ||
``` javascript | ||
<ion-calendar #calendar [events]="currentEvents" (onDaySelect)="onDaySelect($event)" (onMonthSelect)="onMonthSelect($event)"></ion-calendar> | ||
You can add a button to jump to today, for ease of navigation: | ||
|
||
```javascript | ||
<button ion-button (click)="calendar.today()">Jump to Today</button> | ||
``` | ||
- You will need the `onMonthSelect` emitter to establish what dates to look for in your event listing API, it exposes a simple callback of the year and month per switch back and forth. | ||
|
||
``` javascript | ||
<ion-calendar #calendar (onDaySelect)="onDaySelect($event)"></ion-calendar> | ||
### Events | ||
|
||
Adding events to the calendar, as seen in the screenshot atop, those tiny notification blips can appear on a given day, if your backend API responds with the right date makeup for the given month. I suggest you write something that provides data for the former and the latter month, for the sake of edge days on a given month. | ||
|
||
Accepted format of data: | ||
|
||
```javascript | ||
this.currentEvents = [ | ||
{ | ||
year: 2017, | ||
month: 11, | ||
date: 25 | ||
}, | ||
{ | ||
year: 2017, | ||
month: 11, | ||
date: 26 | ||
} | ||
]; | ||
``` | ||
|
||
- Restart Ionic Serve or Ionic Lab, first time. | ||
The consequent invocation of these events would be done like so: | ||
|
||
## Update | ||
```javascript | ||
<ion-calendar #calendar [events]="currentEvents" (onDaySelect)="onDaySelect($event)" (onMonthSelect)="onMonthSelect($event)"></ion-calendar> | ||
``` | ||
|
||
- 8th December 2017 | ||
### Changelog | ||
|
||
* Added Events capability | ||
> 8th December 2017 | ||
>> Added Events capability | ||
- 5th December 2017 | ||
> 5th December 2017 | ||
>> Added English comments to code | ||
>> Added English month names instead of numerals on FE | ||
>> Minor colour adjustments for legibility | ||
* Added English comments to code | ||
* Added English month names instead of numerals on FE | ||
* Minor color adjustments for legibility | ||
## Authors | ||
|
||
## Credits | ||
* **Laker Liu** - *Initial work* - [Ionic3-Calendar](https://github.com/laker007/ionic3-calendar) | ||
|
||
- Original by @laker007 at https://github.com/laker007/ionic3-calendar | ||
**It's not what you start in life, it's what you finish.** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters