How to build an Ionic Calendar App

Add a cool Calendar component into your Ionic app!
🔥 Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic...
#############################
Want to read instead of watch? Here's the full Ionic tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################

[@hivonzoooPL]

Hi, will it work with Ionic 3 projects?

[@rebarius]

I implemented everything and inserted an AJAX Request for GET and POST. I can post data via JSON to my MySQL Server, but when i try to GET more then one Event, your addEvent() won't work! I outsourced your "AddEvent()" to an LoadReservation() function and added json by json....but also: it won't insert ALL Events! Could you explain that? Or how would it look like, if you "PUSH" more then one event into the array: eventSource?

[@emmanuelkomenan9001]

Great tutorial Simon

[@yakikaze93]

HI Simon,Can you show how to display events from database into calendar?

[@MrJunio729]

Sorry Simon Grimm you have one more updated in which is doing with ionic4 or ionic3? or one where the native calendar of the device is shown completely for example sPlanner in Samsung

[@abnethussien9288]

what about reminder alarm?

[@anthonyjr.ballug184]

Hello Simon, Great Tut! buti is it possible to add a recurring event? e.g. every 15 of the month?

[@csanmora]

Can't bind to 'eventSource' since it isn't a known property of 'calendar'.. Can somebody help me

[@mustafauysal4931]

Can you solve your error? please share me.

[@farantariq4295]

keep up the good work . Always helped me :)

[@galaxies_dev]

Thanks Faran!

[@mrnaaaaaa]

muy bueno tutorial...una consulta. ¿como se puede cambiar el idioma?

[@mishisoo]

Hey, cool vid! I have one question though. The event-modal page i made doesn't contain event-modal.module.ts like yours does.How do I solve that? Thanks.

[@jankibhatt2799]

You need to create Ionic project in version 3. When you create new project in version 3, module.ts page is automatically generated by Ionic like other pages.

[@jankibhatt2799]

Hey Simon. Great Tutorial. But I am receiving error: Uncaught (in promise): invalid link: EventModalPage. I have already created and imported page to home.ts file. Any Idea why I am receiving this error?

[@robertlow1376]

If you are using lazy loading, you would need to import into the child module.ts too.

[@Enriqkendo]

Hello Simon, How Can I change the design in calendar?

[@robertlow1376]

Hi, can you guide me on how to edit the design

[@rebarius]

Guys you don't need to change the css. just have a deeper look into the github repository of the founder/collaborators. there you will find templates and how to change these ;)

[@floodyboy5307]

very nice tutorial 👍🏻 thanks

[@galaxies_dev]

Thanks :)

[@robertlow1376]

Hello, How can I load api data into the calendar?

[@jankibhatt2799]

Ok! So I found the solution. 1. We are using lazy loading which doesn't work in Ionic 2. I created new project in Ionic 3 and it worked completely fine. For the error I mentioned below: I was missing @IonicPage import in the .ts file. I must have deleted accidentally :) .

[@mklyx]

Can you specify a bit more on what you actually did to make it work? So far I still got the same error as you mentioned last time. Thanks!

[@lucyzhao2309]

I have checked package.json that tells me my version of ionic is already 3.5.3, but I still have the same problem as you had. Do you have any idea why?

[@jankibhatt2799]

This is Ionic 3 tutorial and I created calendar project in ionic 2 . So I just upgraded to ionic 3 and it started working.

[@ziedmiladi4320]

tuto Internationalization in ionic 2 or angular 2 ? thanks

[@penrock1000]

is it possible to load some set appointments from my backend directly into this calendar?

[@robertlow1376]

hi, do you have solution for this? mind sharing? thanks

[@subinbenny4561]

is there any to do it in ionic 4

[@rebarius]

My Review: I integrated the Ionic-2 Calendar, but there's too much disadvantages, rather then advantages to decide for this calendar! You can't individualize the View as easy as some other components from that. But I used it in a better way, I built a great datapicker with that. Much more suitable, then handle events ;)

[@galaxies_dev]

Yeah it has limitations, I agree. Using this in another big project and it's a lot of CSS customisation needed..

[@marryteo497]

Can you share your coding about the calendar ionic 3? =)

[@rebarius]

Update (01.05.2018): Now that I studied the docs and repo from the creators I can revoke my Comment: You can change everything! There are so good templates and the developers don't show how to change them, but if you detect them in the repo: you can massively change everything! Just a sidenote: google calendar is possible with that ;)

[@rebarius]

Simon Grimm thanks Simon! You teached me a lot through my Informatik-Studium ;D

[@terushkanaidoo5125]

Great tutorial. When you close and reopen app do the events still appear?

[@omark3862]

Did you solved the Problem? When i clode and reopen the ap all my events appear :/

[@jankibhatt2799]

For that you will have to store data somewhere. If you store calendar events and try to get them upon page/app load, you should be able to see them !

[@hungdo4907]

I get this error: Uncaught (in promise): Error: Template parse errors: 'calendar' is not a known element: 1. If 'calendar' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->] ")

[@robertlow1376]

If you are using lazy loading, you would need to import into the child module.ts too.

[@simeonjananan9241]

How to add different colours for the past events and up coming events in calendar view

[@jankibhatt2799]

Did u find solution? Please share if you did. I tried some CSS but didn't work for me :(

[@robertlow1376]

Hi, do you have the solution?

[@bjesussalcedo4019]

Genial! Saludos desde Venezuela

[@galaxies_dev]

Gracias desde Alemania!

[@pnbhousing4328]

what about ionic1

[@docsaudesaude9756]

Show Tutorial!! Thank you!!! How i change language for portuguese?

[@paulodesignn]

Eu tbm gostaria de saber... Vc descobriu como que faz?

[@JoseCarvajalMedia]

You just need to add this HTML

[@matheusjoveliano]

Da uma olhada: github.com/twinssbc/Ionic2-Calendar#localization ai você usa "pt-BR" \o/

[@mastertric]

jose, yo utilice tu forma para hacerlo en español pero no me funciona, dice "Cannot read property 'dayHeaders' of undefined" sabes porque sucede eso?

[@leahluecking3051]

Play