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!

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?

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!

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

Best regards

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.

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.

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?

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.

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

How can I use options from my controller?

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 :).

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

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?

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!

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.

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

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

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!

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

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.

we need to implement this...

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.

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

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

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.

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.

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

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.

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!

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.

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.

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.

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

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?

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.

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

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!

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

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

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

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?

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

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>

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.

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"
    },

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!

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.

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.