Demo:
Place the following in the desired page:
<ion-calendar
(onChange)="onChange($event)"
[events]="myEvents"
(onEventClicked)="eventClicked($event)"
[useSwipe]="true"
[todayText]="Today"
[showEventsList]="true"
[disablePastDates]="false"
[weekDaysToDisable]="[0,6]"
[daysToDisable]="[10,11,12]"
[inputDate]="myDate">
</ion-calendar>
Read about the options below.
-
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
<ion-calendar></ion-calendar>
in your desired view. -
Set the options and add the callback functions to your controller.
(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 */
-
- Date object you can use to set the initial date or to set the selected date programmatically.