Skip to content

Commit

Permalink
Updating the README.md for legibility and understanding.
Browse files Browse the repository at this point in the history
  • Loading branch information
Grant Brits committed Dec 8, 2017
1 parent 30ad474 commit 790a079
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 56 deletions.
120 changes: 65 additions & 55 deletions README.md
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.**
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ionic3-calendar-en",
"version": "1.0.1",
"version": "1.0.2",
"description": "An event calendar component for the Ionic hybrid mobile development platform",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit 790a079

Please sign in to comment.