# Calendar control for ionic

**URL:** <https://forum.ionicframework.com/t/calendar-control-for-ionic/1536>\
**Category:** ionic-v1\
**Created:** [March 3, 2014, 1:39pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536 "2014-03-03T13:39:53Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Myv2ss](https://avatars.discourse-cdn.com/v4/letter/m/48db29/32.png) [@Myv2ss](https://forum.ionicframework.com/u/Myv2ss)\
**Post date:** [March 3, 2014, 1:39pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/1 "2014-03-03T13:39:54Z")

</div>

I am creating a mobile app using ionic framework and angularjs. I am looking for a good lightweight event calendar control. I thought of using angular ui-calendar but it has dependency on jquery and bootstrap. I am looking for something that does not have query dependency to keep it lightweight.  
Any good suggestion is greatly appreciated.  
Thanks,  
Vikas

---

<div class="post-metadata">

**Author:** ![peter](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peter/32/63949_2.png) [@peter](https://forum.ionicframework.com/u/peter)\
**Post date:** [March 3, 2014, 4:17pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/2 "2014-03-03T16:17:37Z")

</div>

Hey!

Depending on what you need there are some builtin calendar controls for iOS html forms. These topics that discussed date picking in the past and should hopefully be of some help 🙂  
[http://forum.ionicframework.com/t/date-picker-for-ionic/](http://forum.ionicframework.com/t/date-picker-for-ionic/)  
[http://forum.ionicframework.com/t/form-date-picker/](http://forum.ionicframework.com/t/form-date-picker/)

---

<div class="post-metadata">

**Author:** ![Myv2ss](https://avatars.discourse-cdn.com/v4/letter/m/48db29/32.png) [@Myv2ss](https://forum.ionicframework.com/u/Myv2ss)\
**Post date:** [March 4, 2014, 12:31pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/3 "2014-03-04T12:31:32Z")

</div>

Thanks for quick respose. But These are only date pickers…I am looking for event calendar and making it part of the application. I came across with cordova calendar plugin [https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin) but this does not allow me make calendar part of my application. With this plugin I can access the native calendar to set events but this native calendar is not part of my app and more over it can be accessed outside of the app.

Thanks,  
vikas

---

<div class="post-metadata">

**Author:** ![sixman9](https://avatars.discourse-cdn.com/v4/letter/s/b3f665/32.png) [@sixman9](https://forum.ionicframework.com/u/sixman9)\
**Post date:** [May 22, 2014, 8:59am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/4 "2014-05-22T08:59:51Z")

</div>

I’m very new to Ionic/AngularJS/Phonegap but I would also like to integrate a visual calendar interface into a mobile app myself.

I’d also come across Eddy Verbruggen’s promising native calendar plugin (forgiving its Android version functionality fragmentation) and I’d LOVE to integrate that plugin’s ability to write to the native IOS/Android calendar with an Angular-driven in-app calendar UI. To that end I’m listing the following Angular-based calendar directive:

## [**----\>[Angular] UI Calendar directive\<----**](http://angular-ui.github.io/ui-calendar)

along with following usage tips:

[http://stackoverflow.com/questions/22470844/how-do-i-get-the-calendar-object-with-angularjs-ui-calendar-using-the-controlle](http://stackoverflow.com/questions/22470844/how-do-i-get-the-calendar-object-with-angularjs-ui-calendar-using-the-controlle)

[http://stackoverflow.com/questions/21107481/getting-angular-ui-calendar-to-work-with-ui-bootstrap-tooltips](http://stackoverflow.com/questions/21107481/getting-angular-ui-calendar-to-work-with-ui-bootstrap-tooltips)

Please let us know how you get on, should you integrate this calendar into an Ionic app 😉

---

<div class="post-metadata">

**Author:** ![edgar](https://avatars.discourse-cdn.com/v4/letter/e/b487fb/32.png) [@edgar](https://forum.ionicframework.com/u/edgar)\
**Post date:** [July 30, 2014, 5:30am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/5 "2014-07-30T05:30:34Z")

</div>

Yes, I’m looking for sample solution for the Android version of creating an event.  
Can the community share a sample of their solution?  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![syerram2](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@syerram2](https://forum.ionicframework.com/u/syerram2)\
**Post date:** [August 19, 2014, 6:45pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/6 "2014-08-19T18:45:20Z")

</div>

> [@sixman9](#):
>
> Please let us know how you get on, should you integrate this calendar into an Ionic app

I’m working on an app that will need a full calendar within the app - I’m debating adding in a full calendar or just adding a plug that talks to the existing phone calendar. ideally I need the ability read/write/sync calendar events with the existing phone calendar. Thoughts on a solution?

---

<div class="post-metadata">

**Author:** ![FireBrand](https://avatars.discourse-cdn.com/v4/letter/f/e8c25b/32.png) [@FireBrand](https://forum.ionicframework.com/u/FireBrand)\
**Post date:** [September 6, 2014, 11:03am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/7 "2014-09-06T11:03:00Z")

</div>

Hi, im using the actual Datepicker by [http://angular-ui.github.io/bootstrap/#/datepicker](http://angular-ui.github.io/bootstrap/#/datepicker)  
but what im lacking with it is the ability to show multiple events on the calendar( just to hange the color of the day button…) if anyone has a thought about it that would be cool…

---

<div class="post-metadata">

**Author:** ![aghotankar](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@aghotankar](https://forum.ionicframework.com/u/aghotankar)\
**Post date:** [September 7, 2014, 8:55pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/8 "2014-09-07T20:55:56Z")

</div>

Any update regarding having a calendar component in ionic???

---

<div class="post-metadata">

**Author:** ![rbarriuso](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rbarriuso/32/9038_2.png) [@rbarriuso](https://forum.ionicframework.com/u/rbarriuso)\
**Post date:** [October 18, 2014, 4:48pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/9 "2014-10-18T16:48:25Z")

</div>

I’m also interested in this topic.  
Did anybody find a calendar widget for Angular with no jQuery dependecies?.

Thanks.

---

<div class="post-metadata">

**Author:** ![jimibi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jimibi/32/7945_2.png) [@jimibi](https://forum.ionicframework.com/u/jimibi)\
**Post date:** [October 28, 2014, 9:35am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/10 "2014-10-28T09:35:27Z")

</div>

Take a look to [https://github.com/jimibi/angular-pickadate](https://github.com/jimibi/angular-pickadate) fork of  
[https://github.com/restorando/angular-pickadate](https://github.com/restorando/angular-pickadate).  
It’s jQuery free and use angular. Actuallually just one event and today is possible, but it’is very easy to modify it.

---

<div class="post-metadata">

**Author:** ![Urigo](https://avatars.discourse-cdn.com/v4/letter/u/b19c9b/32.png) [@Urigo](https://forum.ionicframework.com/u/Urigo)\
**Post date:** [November 16, 2014, 8:44pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/11 "2014-11-16T20:44:49Z")

</div>

Hi,  
I’ve created a fork and pull requested ui-bootstrap to include the functionality @FireBrand was talking about:

> <https://github.com/angular-ui/bootstrap/pull/2619>

When using that it is very easy to add specific class to day by any logic you want.  
I’m using it in one of my apps and it works great, I hope they will merge it soon…

Would love to hear your thoughts

---

<div class="post-metadata">

**Author:** ![efranco](https://avatars.discourse-cdn.com/v4/letter/e/5f9b8f/32.png) [@efranco](https://forum.ionicframework.com/u/efranco)\
**Post date:** [February 27, 2015, 7:00am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/12 "2015-02-27T07:00:45Z")

</div>

This works directly of the box!  
I have downloaded and tested several date pickers and this one just works, especially adding it as a modal.

This one looks to be most recent:

> [@jimibi](#):
>
> [GitHub - restorando/angular-pickadate: A simple and fluid inline datepicker for AngularJS with no extra dependencies.](https://github.com/restorando/angular-pickadate).

---

<div class="post-metadata">

**Author:** ![BMX700](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@BMX700](https://forum.ionicframework.com/u/BMX700)\
**Post date:** [May 7, 2015, 6:01pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/13 "2015-05-07T18:01:12Z")

</div>

Hey vikas,  
I am also looking for a calendar to be part of my app. Did you find a solution? Any suggestions/samples will be appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![Bradax](https://avatars.discourse-cdn.com/v4/letter/b/e95f7d/32.png) [@Bradax](https://forum.ionicframework.com/u/Bradax)\
**Post date:** [May 15, 2015, 8:55am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/14 "2015-05-15T08:55:39Z")

</div>

Hi there, I’m also looking for a JQuery free app to display in-app calendar generating “Month” view. preferrable with a timeline.

Any responses from Ionic?

---

<div class="post-metadata">

**Author:** ![bpshonyak](https://avatars.discourse-cdn.com/v4/letter/b/e95f7d/32.png) [@bpshonyak](https://forum.ionicframework.com/u/bpshonyak)\
**Post date:** [July 30, 2015, 5:00pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/16 "2015-07-30T17:00:46Z")

</div>

This is extremely late but this is an amazing angular js calendar I found!

> **[russiann/flex-calendar](https://github.com/russiann/flex-calendar)**
>
> flex-calendar - 📅 An Elegant Calendar built with Angular.js

Example:

> **[FlexCalendar](https://codepen.io/Russian60/pen/MwOoqR)**
>
> An Elegant Calendar Built With Angular.js...

---

<div class="post-metadata">

**Author:** ![twinssbc](https://avatars.discourse-cdn.com/v4/letter/t/9de0a6/32.png) [@twinssbc](https://forum.ionicframework.com/u/twinssbc)\
**Post date:** [November 29, 2015, 1:08pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/17 "2015-11-29T13:08:38Z")

</div>

Just created one, feel free to have a try.

> **[twinssbc/Ionic-Calendar](https://github.com/twinssbc/Ionic-Calendar)**
>
> Ionic-Calendar - A calendar directive for Ionic framework

---

<div class="post-metadata">

**Author:** ![barbadillojomel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/barbadillojomel/32/13112_2.png) [@barbadillojomel](https://forum.ionicframework.com/u/barbadillojomel)\
**Post date:** [December 9, 2015, 3:23am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/18 "2015-12-09T03:23:37Z")

</div>

I’ve been using [https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin](https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin) for my project. When i started to fetch dates from the server and put it on the calendar plugins, I become confused. Any help will be appreciated. Other calendar plugins?

---

<div class="post-metadata">

**Author:** ![Doctorwebbrasil](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/doctorwebbrasil/32/95845_2.png) [@Doctorwebbrasil](https://forum.ionicframework.com/u/Doctorwebbrasil)\
**Post date:** [January 20, 2016, 7:20pm UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/19 "2016-01-20T19:20:47Z")

</div>

Guys, I’m in the same boat! Did you found any solution?

---

<div class="post-metadata">

**Author:** ![kovlex](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kovlex/32/72583_2.png) [@kovlex](https://forum.ionicframework.com/u/kovlex)\
**Post date:** [May 29, 2017, 8:15am UTC](https://forum.ionicframework.com/t/calendar-control-for-ionic/1536/20 "2017-05-29T08:15:28Z")

</div>

There is a customizable calendar control for Ionic v1, v2 and v3 with no jQuery dependency.  
Check it out: [Responsive Calendar in the Ionic Market](https://market.ionic.io/plugins/mobiscroll-responsive-calendar).
