twinssbc / ionic-calendar

A calendar directive for Ionic framework

Ionic-Calendar directive

Ionic calendar directive

This repository only supports Ionic v1.

Please visit https://github.com/twinssbc/Ionic2-Calendar which supports higher version of Ionic.

Demo

http://twinssbc.github.io/Ionic-Calendar/demo/

Usage

Bower Install: bower install ionic-calendar

Load the necessary dependent files:

<link rel="stylesheet" href="http://code.ionicframework.com/1.1.1/css/ionic.min.css"/>
<link rel="stylesheet" href="<bower lib installation path>/ionic-calendar/dist/css/calendar.min.css"/>
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
<script src="<bower lib installation path>/ionic-calendar/dist/js/calendar-tpls.min.js"></script>

Add the calendar module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.rCalendar'])

Add the directive in the html page

<calendar calendar-mode="mode" event-source="eventSource">

To change calendar selected date, simply use ng-model

$scope.selectedDate = new Date();
<calendar calendar-mode="mode" event-source="eventSource" ng-model="selectedDate"></calendar>

Options

• formatDay
  The format of the date displayed in the month view.
  Default value: 'dd'
• formatDayHeader
  The format of the header displayed in the month view.
  Default value: 'EEE'
• formatDayTitle
  The format of the title displayed in the day view.
  Default value: 'MMMM dd, yyyy'
• formatWeekTitle
  The format of the title displayed in the week view.
  Default value: 'MMMM yyyy, Week w'
• formatMonthTitle
  The format of the title displayed in the month view.
  Default value: 'MMMM yyyy'
• formatWeekViewHeader
  The format of the header displayed in the week view.
  Default value: 'EEE d'
• formatHourColumn
  The format of the hour column displayed in the week and day view.
  Default value: 'ha'
• calendarMode
  The initial mode of the calendar.
  Default value: 'month'
• showEventDetail
  If set to true, when selecting the date in the month view, the events happened on that day will be shown below.
  Default value: true
• startingDayMonth
  Control month view starting from which day.
  Default value: 0
• startingDayWeek
  Control week view starting from which day.
  Default value: 0
• allDayLabel
  The text displayed in the allDay column header.
  Default value: ‘all day’
• noEventsLabel
  The text displayed when there’s no event on the selected date in month view.
  Default value: ‘No Events’
• eventSource
  The data source of the calendar, when the eventSource is set, the view will be updated accordingly.
  Default value: null
  The format of the eventSource is described in the EventSource section
• queryMode
  If queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view
  If queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.
  Users will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.
  Default value: 'local'
• step
  It can be set to 15 or 30, so that the event can be displayed at more accurate position in weekview or dayview.
• autoSelect
  If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view.
  Default value: true

View Customization Options

• monthviewDisplayEventTemplateUrl
  The template url to provide customized view for event displayed in the monthview
  Default value: 'templates/rcalendar/monthviewDisplayEvent.html'

        <calendar ... monthview-display-event-template-url="monthviewDisplayEventTemplateUrl"></calendar>
        
        $scope.monthviewDisplayEventTemplateUrl = 'myTemplate.html';

• monthviewEventDetailTemplateUrl
  The template url to provide customized view for event detail section in the monthview
  Default value: 'templates/rcalendar/monthviewEventDetail.html'

        <calendar ... monthview-event-detail-template-url="monthviewEventDetailTemplateUrl"></calendar>
        
        $scope.monthviewEventDetailTemplateUrl = 'myTemplate.html';

• weekviewAllDayEventTemplateUrl
  The template url to provide customized view for all day event in the weekview
  Default value: 'templates/rcalendar/displayEvent.html'

        <calendar ... weekview-all-day-event-template-url="weekviewAllDayEventTemplateUrl"></calendar>
        
        $scope.weekviewAllDayEventTemplateUrl = 'myTemplate.html';

• weekviewNormalEventTemplateUrl
  The template url to provide customized view for normal event in the weekview
  Default value: 'templates/rcalendar/displayEvent.html'

        <calendar ... weekview-normal-event-template-url="weekviewNormalEventTemplateUrl"></calendar>
        
        $scope.weekviewNormalEventTemplateUrl = 'myTemplate.html';

• dayviewAllDayEventTemplateUrl
  The template url to provide customized view for all day event in the dayview
  Default value: 'templates/rcalendar/displayEvent.html'

        <calendar ... dayview-all-day-event-template-url="dayviewAllDayEventTemplateUrl"></calendar>
        
        $scope.dayviewAllDayEventTemplateUrl = 'myTemplate.html';

• dayviewNormalEventTemplateUrl
  The template url to provide customized view for normal event in the dayview
  Default value: 'templates/rcalendar/displayEvent.html'

        <calendar ... dayview-normal-event-template-url="dayviewNormalEventTemplateUrl"></calendar>
        
        $scope.dayviewNormalEventTemplateUrl = 'myTemplate.html';

Callback Options

• rangeChanged
  The callback function triggered when the range or mode is changed if the queryMode is set to 'remote'

    $scope.rangeChanged = function (startTime, endTime) {
        Events.query({startTime: startTime, endTime: endTime}, function(events){
            $scope.eventSource=events;
        });
    };
  

• eventSelected
  The callback function triggered when an event is clicked

    <calendar ... event-selected="onEventSelected(event)"></calendar>    
  
    $scope.onEventSelected = function (event) {
        console.log(event.title);
    };
  

• timeSelected
  The callback function triggered when a date is selected in the monthview. If there's no event at the selected time, the events parameter will be either undefined or empty array

    <calendar ... time-selected="onTimeSelected(selectedTime, events, disabled)”></calendar>
    
    $scope.onTimeSelected = function (selectedTime, events, disabled) {
        console.log('Selected time: ' + selectedTime + ', hasEvents: ' + (events !== undefined && events.length !== 0) + ‘, disabled: ’ + disabled);
    };
  

• titleChanged
  The callback function triggered when the view title is changed

    <calendar ... title-changed="onViewTitleChanged(title)”></calendar>
    
    $scope.onViewTitleChanged = function (title) {
        $scope.viewTitle = title;
    };
  

• isDateDisabled The callback function to determine if the date should be disabled

    <calendar ... is-date-disabled="isDateDisabled(date)”></calendar>
    
    $scope.isDateDisabled = function (date) {
        var currentDate = new Date();
        currentDate.setHours(0,0,0);
        return date <= currentDate;
    };
  

EventSource

EventSource is an array of event object which contains at least below fields:

• title

• startTime
  If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
  For example, if an allDay event starting from 2014-05-09, then startTime is

    var startTime = new Date(Date.UTC(2014, 4, 8));
  

• endTime
  If allDay is set to true, the startTime has to be as a UTC date which time is set to 0:00 AM, because in an allDay event, only the date is considered, the exact time or timezone doesn't matter.
  For example, if an allDay event ending to 2014-05-10, then endTime is

    var endTime = new Date(Date.UTC(2014, 4, 9));
  

• allDay
  Indicates the event is allDay event or regular event

Note In the current version, the calendar controller only watches for the eventSource reference as it's the least expensive. That means only you manually reassign the eventSource value, the controller get notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend. In case you want to manually insert/remove/update the element in the eventSource array, you can call broadcast the 'eventSourceChanged' event to notify the controller manually.

Events

• changeDate
  When receiving this event, the calendar will move the current view to previous or next range.
  Parameter: direction
  1 - Forward
  -1 - Backward

    $scope.$broadcast('changeDate', 1);
  

• eventSourceChanged
  This event is only needed when you manually modify the element in the eventSource array.
  Parameter: value
  The whole event source object

    $scope.$broadcast('eventSourceChanged',$scope.eventSource);
  

i18n support

When including the angular locale script, the viewTitle and header of the calendar will be translated to local language automatically.

    <script src="http://code.angularjs.org/1.4.3/i18n/angular-locale_xx.js"></script>

ionic-calendar's Issues

queryMode is undefined even after overwriting the default value to 'remote'

Hi, The queryMode did not work, i tried using query-mode='remote' attribute in the calendar directive, when i debug the self.queryMode it shows undefined always and hence fallbacks to local.

<calendar query-mode="remote"></calendar>

Issue with starting-Day-Week="1"

Hi,
I found an Issue where I couldn't find a solution myself.
If I set the starting-Day-Week Parameter to 1 and have a Sunday as selected Date the week view jumps to the wrong week. So for example
If you select the 19th June 2016 in the month view you get a week view from the 20th to the 26th of June.
Plunker with the parameter set
I had a look at the dateRange in the Controller and that all looks fine, so I hope you have a hint what I am missing.

Thanks
Lars

How to slide to next and previous month, from outside the calendar.

I want to add controls (>> << to the header) to slide to next and previous month for the desktop user.
For the month on the year, if the 1st date falls on Sunday, there is no way to go to the previous month for the desktop user.

How can I open the calendar day view to a particular date?

I have a list view of events. When someone selects a event in the list I want to open the day view to the date of that event.

Calendar doesn't work inside a ng-show container

Hi fellows,

Unfortunately the component doesn't work if is wrapped by a container with ng-show directive. But if I remove the directive it works fine.

Month dot indicators and how to customize the month's list items

Hello,

Great component, definitely fills the void in the calendar components around.

Firstly, in month view, is there anyway to show some dots for each day that has any events?

Secondly, for the events list in month view, can I control any other information to show for each event item?

Thank you!

Json feed

How can I feed the calendar with an external Json file with events?
Thanks in advance

Is there absolutely anyway to have scroll="true" present on ion-content? For Day view

I noticed that the scroll="true" causes the day view to collapsed in height, is there anyway around this? The page I have the calendar control on uses collection repeat which requires scroll to be true.

Thank you.

Issue where the events aren't showing if using ng-if and query-mode remote

So if we have something like this:

queryMode is set to 'remote'.

For some reason when I toggle the conditions, the calendar is not displaying the events.

This happens if the view loads initially showing the ion-list only, then you swtich to the advanced calendar view, none of the events show up.

I've tried doing a $scope.$broadcast('eventSourceChanged', mySource); whenever I change the modes, but it doesn't seem to be doing anything.

Understanding your code better - List and Year views

Hello again!
I'm trying to customize your Week view, and create a List and Year views on top of your calendar.
I'd like to have a better understanding of your code in order to take a good advantage of it.

=> List view: I'm trying to get all events in a single page, and order those by days.

=> Week view: same as above, but using the sliding option to navigate between weeks.

=> Year view: I want to display 12 months in a single page, and use the sliding option to navigate between years.

It would help me so much to have your input about that and understand if and how those can be implemented using your calendar.

Again, thank you so much for everything!

Pre-render events in previous/next view

Sorry to bother you again ;).

When switching to the previous or next view, it takes a short time to render the events. I'm thinking the user experience would be greatly improved if the events are already there when switching views. Do you agree?

As the slides are already in the DOM it could be easy to build. I've already looked into it a little bit, and it seems that you're filtering the eventSource for events that are in the current view. I've tried expanding this range to include the previous and next view but I can't get it to work.

Can you help me with this?

And let's be clear on this: I have no problem contributing, so maybe you only have to point me in the right direction and I can build it. I'm the one needing it after all :).

[request] Ionic2 Support

Is there any hacky way to use this directive on Ionic 2 ?

Changing current date via ng-model of calendar doesn't work (a.k.a. "Today button doesn't work")

For example, take the official demo:
http://twinssbc.github.io/Ionic-Calendar/demo/#/tab/home

1. load the demo as it is, in month view.
2. change the month - e.g. slide to left or right (once or multiple times, it doesn't matter)
3. press "Today" button. This basically does $scope.calendar.currentDate = new Date(); in the controller the calendar.currentDate is bound to <calendar> element via ng-model="calendar.currentDate" attribute on the <calendar> element.
4. the title of the calendar changes correctly to current month and year, but the actual view is not updated - numbers of days are in the wrong positions in the calendar
5. now try clicking on any day in the calendar area. The calendar slides to left or right, which is also unexpected behaviour.

My browser info: Chromium Version 45.0.2454.101 Built on Ubuntu 14.04, running on LinuxMint 17.2 (64-bit)

Any ideas?

showEventDetail does not appear to be working

Hi,

Attempting to set the option attribute like so: show-event-detail="false" does not appear to be taking effect, unless I'm missing something with the setting of this attribute.
This seems to be because at line 29 in calendar-tpls.js in your attribute option loop:

self[key] = angular.isDefined($attrs[key]) ? (index < 10 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : calendarConfig[key];

$interpolate will return a string value, and so self['showEventDetail'] is set to the string "false", a truthy value.

[Request] Recurring Events

I haven't found anything that mention the ability to create recurring events is this feature available in the current version?
If not how difficult it would be to implement? Maybe I could try looking over your code and doing myself(and send a PR later).
Or even if you could give some idea of how to implement this behavior in angular controller or service would be nice too.
Cheers.

timeSelected event is receiving the wrong date time in day view

It looks like the time/date that's passed into the timeSelected event is the same event no matter which ever hour you click on it, I had a look at the template and it is correctly passing the tm.time but for some reason it looks more like it's the current date time as opposed to the selected hour's date time

Under the day view, I have an issue with the "all day" div tag floating over the div segment for "12am"

This is all I have and its being rendered in a "ion-side-menu-content", which also contains a ion-nav-bar.

<ion-view view-title="Title"> <ion-content class="padding" scroll="false"> <calendar ng-model="schedule.calendar.currentDate" calendar-mode="schedule.calendar.mode" event-source="schedule.calendar.eventSource" step="30"></calendar> </ion-content> </ion-view>

Is it possible that the all day part can be an option which the user can remove. Removing that would solve the issue, but there are no documentation on how to remove that

Add sync of scroll position across slides

Hi,

I've just added two nice features to my fork which you might want to know about:

1. It adds syncing of scroll position across slides in the weekview. When you change weeks the position stays the same.
2. It also adds a scrollY setting which allows to set an initial scroll position. This allows to start the view at for example 8 am instead of 0 am.

You can look at the code here:
Manduro@2d6f026

As I've also made some other changes to your plugin I can't make a nice pull request. Plus I'm only using the weekview so I haven't implemented it for day view where it could also be useful.

Events spanning multiple days

Hi,

I've noticed events that span multiple days are not rendered correctly. Is this correct? Do you think this is something that can be easily added?

Ionic Grid System - col & row

Hi,
Thank you for sharing this awesome work!
I see that you are using tables in your html.
I played with your code and implemented the ionic grid system instead.
I think it is simpler and way more flexible. Thus, rows and columns are evenly distributed.
Do you think you could update your work and use the ionic grid system? I can help you with it if you want.
In order to customize your calendar in a flexible way, I think it can be very useful.
Kind regards,
Antoine

Slide Scroll Left-Right what for up-down?

Here in Calendar everything is sliding from left-right or right -left in M D W views...
but what I have to do Scroll Up-Down and Down-Up?
What I need to change?

Week/day view events take up the whole hour

Hi again :)

Currently, when an event starts at e.g. 9.30 AM and end at 10.15 AM. It is displayed for 9.00-11.00 AM. Could we add the functionality to have it start and end at the correct times? I think that would be a great addition.

Cheers!

Color Events

Hi!,
Thanks for your work, very good.
This version can add colors to events?. any solution?

Best regards

How to move to the next month using button instead of Slide .....

How to move to the next month using button

<ion-slide-box class="monthview-slide" on-slide-changed="slideChanged($index)" show-pager="true" does-continue="true"\n" +

I'm Trying to use Button but dint working ...

"<button type='button' class='btn btn-default btn-sm' ng-click="slideChanged($index+1)" >Next

Ionic 1.2

Ionic 1.2 was released in the past week, with many changes and a new slide box component (as quoted below). I will probably check compatibility in a week or two and will try to integrate the new component as well.

New Slide Box

One of the most requested improvements in Ionic was a better Slide Box component for UIs that let the user swipe between a set of slides.

Today, we are releasing a new Slide Box based on the amazing Swiper widget. This is, by far, the most > feature rich and widely used slider component out there, and it’s no surprise that many Ionic users > requested us to support it officially. It also happens to be the new slider and markup that Ionic 2 uses, so you’ll be future proof!

With 1.2, we still support the old slider, but it’s deprecated and will be removed in a future release.

To use the new slider, use the <ion-slides> tag:

<ion-slides options="options" slider="slider">
  <ion-slide-page>
  </ion-slide-page>
</ion-slides>

The options argument is passed directly to Swiper and follows the official API options. Set a $scope.$watch on slider to get full access to the Swiper object to control the internal API.

method to select date from code?

Is there a method to change the date on calendar from code? i'd like to add a button that will return the user to current date
or maybe you can add support for such option?
thanks

i18n - Translations

we need to implement this...

viewTitle don't show onload

I put the CalendarDemoCtrl from the demo to my controller but when I load my app the viewTitle with current month don't show, if I change month viewTitle appers.

How to install the Ionic-Calendar in a working App

Hello!
You did a very nice Calendar!
So my question is how may I install it on another working template.
I'm using the Ionic-Material template, and would like to add this Calendar to it.
So I already have an app.js with the routs, and already have the its own controllers.
I think it could be simple to do, but I don’t know how.
Please, can you give me a tip?
Thanks!

Malformed bower file

Thanks for releasing your Ionic version.

I've noticed a missing comma in the bower file. This causes bower to throw an error on installation. Easy fix: add a comma behind the ionic dependency ;)

    "dependencies": {
        "angular": "~1.2",
        "ionic": "~1.1.1"
        "bootstrap": "~3.0.3"
    },

disabled dates

Is there a way to add disabled date ? So user can't click on it , like weekends

showWeeks option

Hi, I couldn't find the showWeeks option in the calendar-tpls.js file. I wonder if it is still going to be implemented as per the README? thanks.

Bootstrap dependency

Could you please explain what the dependency on Bootstrap is needed for? It seems to me that most of the time when you're using Ionic, you wouldn't want to include Bootstrap as well.

Maybe we can remove this dependency?

startingDayWeek not working

When im using the startingDayWeek to set monday to be the first day of the week (starting-day-week="1") it breaks the code. When swiping the week view it changes month at the same time, and it sets starting day to be wednesday when using the value 1.

Is this an issue or have i just misunderstood something about the option?

Missing Headers

Hello I may be new to this so please guide me.

I tried integrating the calendar into my app, however in the header there is no options to change the view nor does it show the date. It just shows the month mode.

Am I missing some part of the code?

Translate option.

Hi, how can i translate the title of days and month in the calendar-mode month from English to another languages?. I am trying to translate in the fullcalendar lib but can't do this right. Can someone help me with a simple example?

Thank you!

Start and end hours on week view and day view

It would be great if there's an option to set the calendar start and end hours.
i.e.: Instead of drawing 24 hours, you could only show from 8am to 6pm.

how to create event using only start date.

please any one help me to create the event having same start date and end date.
actually i have to create event only in a particular date and that will end in also that day, But when i provide same date in both start date and in end date the event is not binding to calendar.please help me urgent

Feature: clicking empty spot to create new event

A common UX practice for calendars is to create a new event when clicking an empty spot in the week or day view.

The way I could see this implemented is to add an option called something like timeslotSelected: function(startTime). When a user clicks (or long-presses on touch) an empty spot in the week or day view this function is called and is passed the time of the spot where was clicked.

This would be a pretty cool addition to this plugin!

Extra data inside calendar

Sometimes is useful send extra data to something and I did a little improvement over calendar to handle it.

dunice@3314298

Check the following printscreen where it shows how useful it can be:

I just extended the template in my code and sent the data over the improvements.

Options usage

How can I use options from my controller?

Syntax Issue?

https://docs.angularjs.org/error/$parse/syntax?p0=:&p1=not%20a%20primary%20expression&p2=1&p3=::view.dates%5B0%5D.label&p4=::view.dates%5B0%5D.label

Is the error i am getting?

Syntax Error: Token ':' not a primary expression at column 1 of the expression [::view.dates[0].label] starting at [::view.dates[0].label].

Week View only showing all day row

When i switch to the week view it is only showing the "allday" row and not the other times is there a parameter i have to change? I am using unmodified versions of the source code

Week View Daylight Savings

Hi,

Currently I'm having a problem where the events displayed on the week the daylight savings occur, the time change hour is added onto events as soon as the daylight savings occur for all events.

This causes an slight hr problem for events in that week with + or - the daylight savings hour.

Would you know the best solution for this?

I've looked into the code and fixed it using a few checks but its really dirty.

Repeat calendar in the same view

Is it possible to repeat the calendar in the same view?

I have the following use case:

<div ng-repeat="flight in flights">
    <calendar ng-model="calendar.currentDate" calendar-mode="calendar.mode" event-source="calendar.eventSource" range-changed="reloadSource(startTime, endTime)" event-selected="onEventSelected(event)" title-changed="onViewTitleChanged(title)" time-selected="onTimeSelected(selectedTime)" extras="flight.fares" query-mode="remote"></calendar>
</div>

If one calendar is changed, like swiping, the others are also changed.

Templates

Hello,

I'm using the Calendar demo, there is a way a use calendar.tpls.js?, i.e. use templates.html directly. Make changes in view of calendar.tpls.js is tedious.

Thanks you

Time format

Hi, first of all, thanks for your awesome work!

In the week and day modes, the time on the left column appears like 8am, 9pm etc.
But here in Brazil we use 8 and 21, respectively.

Is there a way to show the time based on locale?
I'm using the Brazilian locale and month and day names are automatically translated.

how to automatic refresh the calednar

how to automatic refresh the calendar after data bind from firebase database.
Actually i have bind the data to the calendar but events are not able to show in calendar after bind but after a change event its showing so how to automatically refresh the after data bind.

Can we add indicators of the events in calendar..so that all the events will be indicated, if so.. can you please explain how to implement

Step in week view

Hi, I've noticed the following code on week view:

ctrl.mode = {
    step: {days: 7}
};

I tried to change it to 3 to show only 3 days of the week, but no success.
Can you look into it?
Thanks!