How to implement calendar in ionic


#1

I want to implement customized calendar in ionic2


#2

Hi @cooldp007,

May be this can help you in getting your solution.

Thanks,


#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,


#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


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


I need a Datepicker!
#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