How to Build an Ionic 4 Calendar App



In this tutorial we build an Ionic 4 calendar component! Learn to build mobile apps with Ionic in my Ionic Academy: https://ionicacademy.com/

The training platform for everything Ionic. 40+ Ionic Courses, Ionic tutorials and private community to help you learn Ionic fast.

#############################

Want to read instead of watch? Here’s the full Ionic tutorial: https://devdactic.com/ionic-4-calendar

Want more tutorials? Here you go! https://devdactic.com/

Just getting started? Take my 7 Day Ionic Crash Course: https://ionicacademy.com/ionic-crash-course/

#############################

My Private Daily Vlog: https://www.youtube.com/channel/UCyo_g3MZNTubqz2UbpLgmXw

You can also find me
on https://twitter.com/schlimmson
on https://www.facebook.com/devdactic
on http://instagram.com/simongrimm_

#############################

22 thoughts on “How to Build an Ionic 4 Calendar App”

  1. Ionic CLI : 5.2.1
    Ionic Framework : @ionic/angular 4.6.0

    @angular-devkit/build-angular : 0.13.9

    @angular-devkit/schematics : 7.3.9

    @angular/cli : 7.3.9

    @ionic/angular-toolkit : 1.5.1

    Reply
  2. below error are appears while creating a new event please help me
    core.js:15724 ERROR TypeError: event_1.startTime.getTime is not a function at WeekViewComponent.push../node_modules/ionic2-calendar/weekview.js.WeekViewComponent.onDataLoaded (weekview.js:234)

    Reply
  3. Does startingDayWeek="1" not change the layout of the month view? Monday should be the first day, but doing this, nothing changes… (You say exactly the same, but it did not change in your video/project too.)

    Reply
  4. I'm getting this error " Property 'collapseCard' does not exist on type 'NotePage'. " Can you tell me what i'm doing wrong

    Reply
  5. hello sir my calendar is not working
    compiler.js:2430 Uncaught Error: Unexpected directive 'MonthViewComponent' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:2430)
    at compiler.js:18645
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25970)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at compileNgModuleFactory_PRE_R3_ (core.js:17619)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:17802)
    syntaxError @ compiler.js:2430
    (anonymous) @ compiler.js:18645
    push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:18620
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:26029
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:26010
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:25970
    push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
    compileNgModuleFactory_PRE_R3_ @ core.js:17619
    push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17802
    ./src/main.ts @ main.ts:11
    _webpack_require_ @ bootstrap:83
    0 @ main.ts:12
    _webpack_require_ @ bootstrap:83
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1

    Reply
  6. Thanks for the tutorial Simon, you're the best!
    Can you provide the Delete event and Edit Method? please!! ( ̄▽ ̄)ノ
    I really appreciate your help.

    Reply
  7. @Simon – The link is wrong for the text version of the tutorial, should be https://devdactic.com/ionic-4-calendar-app/

    Reply
  8. This is great, except if you are planning to use it with modals like me it won't work if you open the modal a second time after the initial load. I tried resetting everything, removing the component and re-adding to the dom, etc.

    Reply
  9. Hello Sir please help me. I create application using admob free & json API but my app not properly working. Hide my app header in mobile. Please provide solution. My app screen shot are given below link https://drive.google.com/file/d/1tvhzKedpzrWSt9G5Wqulr9S2Erh_Xh8n/view?usp=drivesdk

    Reply
  10. That component is sooo old ?. I discussed with the creator of that calendar and he already built a better calendar. And the design not the yellow of the egg. I refactored the design and completely changed the loading of events. At the end i built a little copy of "google" calendar with dynamic pagination (backend work too). The good thing: it works! The bad thing: it's build up in sooo much web-content, that in production it's slowing down performance with rendering (not the amount of data!). The problem is the loading. If that would be better, I would use it for my future projects or costumers. This calendar is better for costom datepickers for example, but definetly not for production! Use his newer calendar for production based projects! There you have for example events, that are flowing over the days in the month-view 😉

    Reply

Leave a Comment