How to implement calendar in ionic

Ionic Framework ionic-v3
1

I want to implement customized calendar in ionic2

2

Hi @cooldp007,

May be this can help you in getting your solution.

Thanks,

1 Like
3

Hi, @addwebsolution

I got this error

No provider for Calendar!

4

Yes, because you need to add the Calendar in the providers list.

For more information https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

review this.

Thanks,

1 Like
5

You are right,
error solved

now i donā€™t know how to use in my ionic 2 project (It means what should i write in html and in component file?)

6

This will help you in getting calendar working in your project.

7

This all are done
but what type of content i write in html and component file? that is my issue

8

I use this plugin

And is fantastic :slight_smile:

If you want try it

2 Likes
9

Hi, @filippodicostanzo

Thank you for providing me a document for calendar

All error are solved

but i saw my page blank

How to show calendar in my page?

10

there is just simple tag to display calender in you page

<ion-calendar [(ngModel)]=ā€œdateā€
(onChange)=ā€œonChange($event)ā€
(monthChange)=ā€œmonthChange($event)ā€
[format]=ā€œformatā€>

11

@cooldp007

Here You can get demo from git just download and refer it.

2 Likes
12

Hi, @hirenkorat3

Not working

13

which version of angular you use ?

14

angular version 3.10.10

15

then it may not be work

16

you have to use angular 4 because it is angular 4 component.
so just update the angular to latest version and then try it will work

17

please give me html code that show calendar

18

HTML

<ion-card>
    <ion-card-content>
      <ion-card-title>
        basic
      </ion-card-title>
      <ion-calendar [(ngModel)]="date"
                    [format]="format">
      </ion-calendar>
      <p>{{date}}</p>
    </ion-card-content>
  </ion-card>

TS FILE

date: string;
format = ā€˜YYYY-MM-DDā€™;

just do this it will work 100% for me
let see what happens for you !

19

@hirenkorat3

Template parse errors:
Canā€™t bind to ā€˜formatā€™ since it isnā€™t a known property of ā€˜ion-calendarā€™.

  1. If ā€˜ion-calendarā€™ is an Angular component and it has ā€˜formatā€™ input, then verify that it is part of this module.
  2. If ā€˜ion-calendarā€™ is a Web Component then add ā€˜CUSTOM_ELEMENTS_SCHEMAā€™ to the ā€˜@NgModule.schemasā€™ of this component to suppress this message.
  3. To allow any property add ā€˜NO_ERRORS_SCHEMAā€™ to the ā€˜@NgModule.schemasā€™ of this component. (ā€œnTimeSelected($event)ā€ step=ā€œ30ā€>
    <ion-calendar [(ngModel)]=ā€œdateā€
    [ERROR ->][format]=ā€œformatā€>

    "): ng:///SearchModule/SearchPage.html@50:20
    ā€™ion-calendarā€™ is not a known element:
  4. If ā€˜ion-calendarā€™ is an Angular component, then verify that it is part of this module.
  5. If ā€˜ion-calendarā€™ is a Web Component then add ā€˜CUSTOM_ELEMENTS_SCHEMAā€™ to the ā€˜@NgModule.schemasā€™ of this component to suppress this message. (ā€œged)=ā€œonViewTitleChanged($event)ā€ (onTimeSelected)=ā€œonTimeSelected($event)ā€ step=ā€œ30ā€>
    [ERROR ->]<ion-calendar [(ngModel)]=ā€œdateā€
    [format]=ā€œformatā€>

    ā€): ng:///SearchModule/SearchPage.html@49:13
20

this is error of angular,you must have to upgrade your angular version.
if you want to test is then start new project and then in home page copy paste the html and ts file