⚡ Ionic Angular Calendar

• 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.

📄 Table of contents

• ⚡ Ionic Angular Calendar
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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.

📷 Screenshots

📶 Technologies

• Ionic v6
• Ionic/angular v6
• Angular v15
• ionic2-calendar v0.6.9
• Angular/Fire v7 for Google Firebase Database connection.

💾 Setup

• 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.

💻 Code Examples

• 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);
  }

🆒 Features

• 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 & To-do list

• 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.

👏 Inspiration

• Jameson Saunders of JamiBot, Youtube video ‘Ionic 4 Custom Calendar Tutorial’
• Ionic2-Calendar github repo
• demo project.

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]