Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Calendar plugin Tutorial

Introduction

In this tutorial, we will show how to build an Ionic 4 app, where you can use Cordova Calendar plugin. This plugin allows viewing and adding events to the Calendar of the mobile device.

👍

Important notice

Be informed that when creating an app with Cordova plugins it is important that the needed plugin be imported before you proceed with the app UI or create it from a backup.

Downloads and Resources

You can also try it yourself by creating from the backup. In this case, follow the steps:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create.

Also, if you are interested in the detailed tutorial, please follow the steps below.

Part 1. Importing Plugin

Before the plugin can be used in your app, you need to import it to Appery.io. You can find plugin sources by following this GitHub link: Cordova Calendar plugin GitHub page.

Information on how the plugin can be imported to Appery.io can be found here:
Custom Cordova Plugins: Importing Cordova plugins from GitHub.

When the plugin is imported, we can proceed with creating the app.

Part 2. Creating App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 > Ionic 4 Blank for the application type, enter calendarApp for the app name, and click Create.

Creating a new app

Adding Dependencies

  1. Inside the app, navigate to Project > App Settings > Cordova plugins. Here, go to the Imported Cordova Plugins tab, enable the Calendar plugin and click the SAVE button at the top:
  1. Now, switch to Project > App settings > Npm modules and add a new Dependency: @ionic-native/calendar of version ^5.22.0:
  1. Unfold the Pages folder and choose the app page.
  2. Click the MODULE tab of the app page. In the Imports section, type in import { Calendar } from '@ionic-native/calendar/ngx';
  1. Then, scroll down to the NgModule Settings > Providers section and type Calendar into the text field:
  1. Save the app changes by clicking the SAVE button.

Creating App UI

  1. Navigate to Pages > [Screen1]doc:ionic-4-ui-components#page-screens) and select the DESIGN tab.
  2. Now, under the PROPERTIES tab, set the Page Footer property to False.
  3. Then, select the ToolbarTitle1 component and change it's Text property to Yoga Class Schedule:
  1. Now, go to Screen1 CODE tab. Under the Custom includes section, add a dependency with { Calendar } for Name and @ionic-native/calendar/ngx for its Path:
  1. Then, scroll down and define some necessary variables:
  • variable calendar of Calendar type. The Add DI checkbox should be checked.
  • variable eventList of any type with [] default value.

With all the needed variables added, the CODE tab should look like this:

Initializing App with Default Data

As we are creating the list of sample events, let's create an auxiliary function to generate event dates.

  1. In the CODE > Functions section, create a new generateDate method. It should take 3 arguments: currentDate, days and hours, and should return the date that is calculated as current date + specified number of days + specified number of hours. In the code editor, type in the following code:
const MILLISECONDS_IN_HOUR = 3600000, HOURS_IN_DAY = 24;
const date = new Date();
const dateShift = (days * HOURS_IN_DAY + hours) * MILLISECONDS_IN_HOUR;

date.setTime(currentDate.getTime() + dateShift);
return date;

Creating generateDate method

Defining the method logic

Then, let's add some sample data. In our app, we'll show a list of events that can be added to the user calendar.

  1. To do it, create one more method with constructor name and type in the following code to initialize the eventList variable with some data. For generating dates, we'll get the current date and apply the previously created generateDate method:
const currDate = new Date();

this.eventList = [
    {
        title: 'Yoga class for beginners',
        location: 'Pinetree park',
        message: 'Suitable for everyone',
        startDate: this.generateDate(currDate, 1, 2),
        endDate: this.generateDate(currDate, 1, 3),
    }, {
        title: 'Yoga for stress management',
        location: 'Central studio',
        message: 'For stress relief and overall health',
        startDate: this.generateDate(currDate, 3, 0),
        endDate: this.generateDate(currDate, 3, 1),
    }, {
        title: 'Online yoga class',
        location: 'Online',
        message: 'Bringing the studio to your own home',
        startDate: this.generateDate(currDate, 5, 3),
        endDate: this.generateDate(currDate, 5, 4),
    }
];

Then, let's switch to the DESIGN tab and proceed with creating the app UI.

  1. First, we need to create a button that will open the calendar app installed on your device. Drag & drop a Button component to the app Toolbar from the PALETTE on the left.
  2. Select the created Button component, then, under the PROPERTIES tab, set the Button Type property to Bar Button, the Slot property to End and empty the value of the Text property. Expand the Icon property, from the dropdown, select primary for Color and set its Slot to Icon Only; then click the No icon button and select the calendar icon for Style:
  1. Expand the EVENTS panel from the bottom. For the Button1 component, select Click for event, for the action, select Run TypeScript, then enter the code below and save:
const currentDate = new Date();
this.calendar.openCalendar(currentDate);
  1. Here is how it should look like:

Creating Calendar Events

Now, we need to create a card for each event in the created list of yoga classes.

  1. Under the DESIGN tab, drag & drop a Card component to the screen. Under the PROPERTIES tab, add a new property with *ngFor name and let item of eventList value. This will create a card for each event in our events list:
  1. Inside the card, select the CardItemTitle1 component and set its Title Text property to {{item.title}}:
  1. Drag & drop a Button component to Card1 and set the following properties for it:
  • Expand: Not selected
  • Fill: Outline
  • Text: Add event to calendar
  • (click): addEvent(item):
  1. Then, drag & drop two Text components into the Card1, placing them before the button.
  2. For the first text component, Text1, set the following properties:
  • Container: ion-card-subtitle
  • Text: {{item.location}}
  1. And for the second text component, Text2, set the same properties with the following values:
  • Container: p
  • Text: {{item.startDate | date}}

Save all the changes. Now the UI is ready and should look like this:

Let's go back to the CODE tab and finish defining the app logic.

  1. Here, we need to create one more function with addEvent for its name and ev for its argument. It will be executed when a user clicks the Add event to calendar button and will open the native calendar's event creation screen. So, in its code editor, type the following code:
let options = [ev.title, ev.location, ev.message, ev.startDate, ev.endDate];

this.calendar.createEventInteractively(...options).catch((error) => {
    console.log(error);
});

App Testing

Now, you're ready to test the app. Note that you need to test it on a device as the plugin won’t work inside the browser. When the app starts, the plugin will automatically ask for permissions.

Here's how the app should work. You can click the calendar icon in the toolbar to open the calendar app, or to click the Add event to calendar button for a specific event, as shown in the screenshots below:

App work on Android, Google calendar

App work on iOS, default Calendar app

Updated 4 months ago

Ionic 4 Calendar plugin Tutorial


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.