https://github.com/alexandretok/easy-ionic2-calendar
https://github.com/alexandretok/easy-ionic2-calendar
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/alexandretok/easy-ionic2-calendar
- Owner: alexandretok
- Created: 2017-02-07T02:07:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-12T12:43:25.000Z (over 8 years ago)
- Last Synced: 2024-11-13T00:33:13.629Z (over 1 year ago)
- Language: TypeScript
- Size: 4.11 MB
- Stars: 16
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ionic2-components - Calendar
- Awesome-Ionic - Calendar
- awesome-ionic - Calendar
- Awesome - Calendar
README
### An easy calendar for your Ionic 2 App (also works with Ionic 3)
Demo:
[Live Demo](https://rawgit.com/alexandretok/easy-ionic2-calendar/master/demo/lab.html)
#### How to use:
Place the following in the desired page:
Read about the options below.
#### Installation process:
* Clone the project and copy the ion-calendar folder to your project's components folder (src/components).
* Import the component on your `app.module.ts`:
```
import { IonCalendarComponent } from '../components/ion-calendar/ion-calendar';
```
* Insert it on the declarations array:
```
declarations: [
MyApp,
HomePage,
IonCalendarComponent
],
```
* Add `` in your desired view.
* Set the options and add the callback functions to your controller.
#### Options:
* `(onChange)="yourOnDateChangeCallback($event)"`
* This callback is triggered everytime the current selected date is changed.
* It passes the new date as the parameter.
* `(onEventClicked)="yourOnEventClickedCallback($event)"`
* This callback is triggered everytime an event is clicked (from the list below the calendar).
* It passes the clicked event as the parameter.
* `[events]="yourEventsArray"`
* `yourEventsArray` should be an array of objects with the following properties:
* starts: Date object representing the date and time that the events starts.
* ends: Date object representing the date and time that the events ends.
* title: String with the title to be shown in the events list.
* `[showEventsList]="true"`
* Wheter or not to show the events list on the bottom of the calendar
* `[disablePastDates]="false"`
* Wheter or not to show past dates as disabled (disables user click on those dates)
* `[weekDaysToDisable]="[0,6]"`
* You can use this to disable certain weekdays, in this example we are disabling Sundays (0) and Saturdays (6). Users will not be able to click these days.
* `[daysToDisable]="[10,11,12]"`
* You can use this to disable certain days of the month. In this example, days 10, 11 and 12 of the current month will be disabled.
* `[useSwipe]="false"`
* You can use this to prevent swiping through the months
* `[todayText]="Today"`
* You can use this to translate the today's button content to other languages
* `[inputDate]="yourDateObject"`
* Date object you can use to set the initial date or to set the selected date programmatically.
* When you want to set the selected date programmatically, remember to always create a new reference(a new Date object).
Example:
```
this.yourDateObject.setDate(5); /* This will NOT work and the view is not going to update correctly */
var tmpDate = new Date();
tmpDate.setDate(5);
this.yourDateObject = tmpDate; /* This will work and date will be updated on the calendar view */
```