- App to show an Ionic calendar with events stored in Firebase. This is another great tutorial from Jameson Saunders of JamiBot, Youtube video 'Ionic 4 Custom Calendar Tutorial' that I have updated.
- Uses the ionic2-calendar package to display events input by the user.
- This app is set up to use a Google Firebase backend to store calender entries.
- Ionic v6
- Ionic/angular v6
- Angular v15
- ionic2-calendar v0.6.9
- Angular/Fire v7 for Google Firebase Database connection.
- Create a Google Firebase database and add access credentials to environment.ts
- To start the server on localhost://8100 type: 'ionic serve'
- To start the server on a mobile using Ionic devapp and connected via wifi, type: 'ionic serve --devapp'
- The Ionic DevApp was installed on an Android device from the Google Play app store.
- function to add a new event - including start and end time. Title is derived from seconds and is intended to create semi-random data.
addNewEvent() {
const start = this.selectedDate;
const end = this.selectedDate;
end.setMinutes(end.getMinutes() + 60);
const event = {
title: 'Event #' + start.getMinutes(),
startTime: start,
endTime: end,
allDay: false
};
this.db.collection('events').add(event);
}- Google Firebase storage of calendar events. Data is retrieved from Firebase in the constructor function at the beginning of the page lifecycle.
- Calender date format can be changed using options from the ionic2-calender.
- Status: Working
- To-do: A lot more complexity can be added to this calendar app. The option to change the view from day to week to month would be useful - as shown in the demo project.
- Jameson Saunders of JamiBot, Youtube video 'Ionic 4 Custom Calendar Tutorial'
- Ionic2-Calendar github repo
- demo project.
- N/A
- Repo created by ABateman, email: [email protected]