Calender component

Ionic Framework ionic-v3
1

Hello Guys

Any news on calender component for ionic 2. Started using ionic 2 for creating mobile apps, but one of the key component missing is calender. Is it in pipeline or is it never going to be shipped with ionic 2. Please can someone provide an update on this.

Thanks
Vijay

1 Like
2

what do you mean with ā€œcalendarā€ --> access to the phone calendar? get and set events/appointments? for those tasks you can use the native cordova calendar plugin.
e.g. http://ionicframework.com/docs/v2/native/calendar/

If you want a date picker --> http://ionicframework.com/docs/v2/components/#datetime

3

Hello

Thank you for the reply.

Sorry for the confusion on what I am looking for. I am looking for something similar to nativescript ui calender. I feel that this is something that would be quite useful, at least for my use cases.

Thanks
Vijay

1 Like
4

Hmm, this is a great idea for a component! I donā€™t think we have any plans to to add this (at the moment).
But if you want to open an issue for this, it could make a great addition. Either that or a great community component

5

Nice component, it will require some community effort indeed and coordination between interested ones to match that non-free example.

1 Like
6

A good place to start to be honest would be the datetime or toast component. They all build off the viewController in V2ā€™s core that allows for the animation and presentation. Then it could be wrapped like

ion-list
  ion-cal
7

@mhartington Thank you for the reply. Will explore like how you have recommended.

8

Hi @vijquick you build the component? I need the sameā€¦

9

NativeScript is another front-end framework working with angular 2. And that calendar is a component available in nativescript and hopefully soon in Ionic 2. :sweat_smile:

10

Thanks!

I will try native script.

11

Try @ionic2-extra calendar. It works with rc0 too

12

How do you use it? Iā€™ve seen their npm page but not been able to make it work. And their github page gives an 404 error. I thought the project was dead.

Iā€™m doing an import in the ts file:
import { ION_CALENDAR_DIRECTIVES, IonCalendar } from '@ionic2-extra/calendar';

And trying this code in the html file:

  <form (submit)="onSubmit()">
    <div>
      <ion-calendar [(ngModel)]="datePeriod"></ion-calendar>
    </div>
  </form>

And this is the error Iā€™m getting:

ā€˜ion-calendarā€™ is not a known element:

  1. If ā€˜ion-calendarā€™ is an Angular component, 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.
13

Hi, do you import CUSTOM_ELEMENTS_SCHEMA in your app.module.ts ??
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ā€˜@angular/coreā€™;

14

I was able to get this working, by adding this to app.module.ts

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ION_CALENDAR_DIRECTIVES, IonCalendar } from '@ionic2-extra/calendar';

and then after providers in @NgModule I added

schemas: [CUSTOM_ELEMENTS_SCHEMA]

in my calendar.ts file I added

import { ION_CALENDAR_DIRECTIVES, IonCalendar } from '@ionic2-extra/calendar';

Edit: You also need IonCalendar inside declarations as well

1 Like
15

@codeartisan Is this a date picker or an actual calendar? I need a calendar where i can show some events. Is that possible with ionic2-extra/calendar??

16

@severus_me this is an actual calendar. Iā€™m using this as an addition to the ā€œupcoming eventsā€ views in my app. With the calendar you can jump between months and years, and display content on each date

17

can you post a example of a ION_CALENDAR_DIRECTIVES + ionCalendar implementation ?

I got this console error:

Error: Uncaught (in promise): Error: Template parse errors:

ā€˜ion-calendarā€™ is not a known element:

  1. If ā€˜ion-calendarā€™ is an Angular component, 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. ("

           [ERROR ->]<ion-calendar [(ngModel)]="startDate"></ion-calendar>

   </div>

    startDate is my current date.

    in my class.ts:

    import { ION_CALENDAR_DIRECTIVES, IonCalendar } from '@ionic2-extra/calendar';

    and i dont have any reference in my constructor to ionCalendar.

    "@angular/common": "2.1.1"
 "@ionic/app-scripts": "0.0.39
18

You can try angular-calendar or ng-bootstrap datepicker or ng2-bootstrap datepicker

1 Like
19


Hope to help you

2 Likes
20

Hey guys I wrote a small tutorial about how to include angular-calendar into ionic 2,

Using Angular Calendar, Optimizing for Ionic2

Hope this helps