How to insert and delete an event into the calendar?

Do you think this could be portable for use with angular material framework ?

Is it possible to pass an object to the controller by clicking on an empty cell in the weekview, containing the start and end-hour + date?

Hai @twinssbc

How to hide the next navigation icon for disabling future date????

Best
nishadotcom

I have created an event in the previous month, current month and next month. When I load the calendar, in the current month view, I can see one dark blue day and 2 light blue days (for the events in the previous an next month). When I go to the previous or next month the all day event is not displayed (the day is not dark blue, it remains white). And when I click on the day it displays "No Events" You can see this event in week and day views.

Hai @twinssbc

I like to call a method on Previous and Next icon click.

E.g:

I have a controller in body tag. Name is my_controller.

I have declared a method here.

I like to call the method while click on the Next or previous icon.

Please suggest.

Best
nishadotcom

Hi @twinssbc ,
When i was in week view i am little confused what is the current date(user perspective) .
How to do it.I Do see in month view as we highlighted current date.

Can you provide a license for this project?

In the code https://github.com/twinssbc/AngularJS-ResponsiveCalendar/blob/master/src/rcalendar/calendar.js#L196-L201:

angular.forEach(cells[index].events, function (e) {
  if (!e.overlapNumber) {
    e.overlapNumber = overlapNumber;
    eventQueue.push(e);
  }
});

Is it possible to replace the anonymous function in the loop with closure? jshint warns that Don't make functions within a loop.

It seems that with angular.forEach we don't get the looping variable. We might have to use for loop instead to get the looping variable to generate closure.

Is it possible to change the starting day in 'Week' view from Sunday to Monday?

Thanks.

Hi,

I am currently using this module to create my own calendar variant. While doing that I discovered a little bug. The times in the weekview are not showing right. Somehow it keep incrementing the time.getHours(). And sinds I am using that I had to fix it.

This is what I did:

old code (line 528 calendar.js):

function createDateObjects(startTime) {
var times = [],
row,
time = new Date(startTime.getTime());

            for (var hour = 0; hour < 24; hour++) {
                row = [];
                for (var day = 0; day < 7; day++) {
                    time.setHours(time.getHours() + hour);
                    time.setDate(time.getDate() + day);
                    row.push({
                        time: new Date(time.getTime())
                    });

                    console.log(day, time.getDate());
                }
                times.push(row);
            }

            return times;
        }

New code:

function createDateObjects(startTime) {
var times = [],
row,
time = new Date(startTime.getTime());

            var timeHours = time.getHours();
            var timeDay = time.getDate();

            for (var hour = 0; hour < 24; hour++) {
                row = [];
                for (var day = 0; day < 7; day++) {
                    time.setHours(timeHours + hour);
                    time.setDate(timeDay + day);
                    row.push({
                        time: new Date(time.getTime())
                    });

                    console.log(day, time.getDate());
                }
                times.push(row);
            }

            return times;
        }

I hope this helps!

I'm a little confused as to how the eventSource array gets displayed.

Using the 'Week' view I can push in my events I have retrieved from an API.
These display correctly, however if I then try to splice the eventSource array or push additional objects into the array, the array is updated but the view isn't. Changing the view to next / prev week causes it to display events correctly.

How can I get the view to refresh with current events in eventSource?

Thanks.

This is my event source

$scope.eventSource = [
{
title: 'All Day - 1',
startTime: new Date(2016,2,1),
endTime: new Date(2016,2,2),
allDay: true
},
{
title: 'All Day - 2' ,
startTime: new Date(2016,2,1),
endTime: new Date(2016,2,2),
allDay: true
},
{
title: 'All Day - 3' ,
startTime: new Date(2016,2,2),
endTime: new Date(2016,2,2),
allDay: true
}];

The events are displayed one day prior when it comes to calendar, do we need to specify time zone also?

Hai @twinssbc

I update $scope.eventSource when I click on Next / Previous button.

$scope.eventSource has been updated too but the events are not displaying in the calendar.

Please suggest.

Best
nishadotcom

Deleted - Found solution

I believe it will be good to namespace CalendarController. It caused a conflict with another controller in my app named as CalendarController. While I should have namespaced it as well, I guess it would be good to do this in this code as a best practice.

Thank you for this great library!

Are their particular components of Bootstrap CSS that are used in this? If I can make a custom build of the Bootstrap CSS file I would like to. I'm having issues with full Bootstrap CSS overwriting styles in my application's CSS.

I have an event with a startTime set to Wed May 18 2016 00:00:00 GMT+1000 (AUS Eastern Standard Time) and the endTime set to Wed May 18 2016 23:59:00 GMT+1000 (AUS Eastern Standard Time).
When the calendar loads, the all day event is showing on May 17 and 18. I have tried this with the allday flag set to true and false and I get the same result

How i set the options.
I'm trying: $scope.calendar = {showEventDetail:true};
but don´t work.

Thanks for putting this together; it gave me a great starting point on a small angular app I am working on.

Just some suggested features (a.k.a things I am working through now)

1. User friendly hour rows on day/week view (instead of 0-23 index)
2. Day/week view auto scroll to first event on load (instead of showing 6-12 empty rows for early morning)
3. CLNDR.js Integration (http://kylestetz.github.io/CLNDR/) - I could be wrong about this but I saw that CLNDR.js "plays nice" with angular and has a pretty large following. Thought that you could maybe leverage that project's abstracted business logic!?

If I move forward with your solution, I will be sure to send a pull request with my anything I add.

Cheers!

My Idea is to add Dynamic content (partial HTML file) whenever i perform click action on particular Date.Its like a Google Calendar create event or task Quick popup.How Do I achieve this .Any help appreciated

month.html

   <tbody>
     <tr ng-repeat="row in rows track by $index">
        <td ng-show="showWeeks" class="calendar-week-column ">
           <small><em>{{ weekNumbers[$index] }}</em></small>
        </td>
        <td ng-repeat="dt in row track by dt.date" class="monthview-dateCell"  ng-click="select(dt.date)">
           <div ng-class="{'text-muted':dt.secondary}" ng-click="empty()">
              {{dt.label}}
           </div>
           <div ng-if="!dt.events" ng-click="emptySelected()"  >&nbsp;</div>
           <div class="eventin"  ng-repeat="event in dt.events | filter:search| limitTo:3" ng-if="dt.events"   ng-class="{'text-center':true, 'monthview-current': dt.current&&!dt.selected&&!dt.hasEvent,'monthview-secondary-with-event': dt.secondary&&dt.hasEvent, 'monthview-primary-with-event':!dt.secondary&&dt.hasEvent&&!dt.selected, 'monthview-selected': dt.selected}" >
              <div  ng-click="eventSelected({event:dt.events})">
                 <div ng-if="dt.hasEvent" class="monthview-eventdetail-timecolumn">
                    {{event.title}}
                 </div>
              </div>
           </div>
           <div class="dynamicHtmlClass">
          </div>
        </td>
     </tr>
  </tbody>

In Calendar.js
I tried in following ways
Not worked.

scope.select = function (selectedDate) {
 scope.partialHtml = '<div><button >Event</button><button >Task</button><button >Followup</button></div>';
 element.find('.dynamicHtmlClass').html(scope.partialHtml);
}

Applied to All 'td'

  scope.select = function (selectedDate) {
    scope.partialHtml = '<div><button >Event</button><button >Task</button>
     <button >Followup</button></div>';
   element.find('td').html(scope.partialHtml);
  }

Hi,

Thanks for making this super easy to use library.

Could you please make it bower installable?

Thanks,
Edmond

Hi,

I need to create two calendars, showing current month & current month + 1 (for example, september and october 2015).

These calendar would be linked together; if I click the "Next" button on one calendar, the other one will also advance to the next month, like:

Calendar 1: September 2016
Calendar 2: October 2016

I click "Next" on calendar 1, then they'll be:

Calendar 1: October 2016
Calendar 2: November 2016

What is the best way to do this?

Thanks.

hello i try to integrate this with an ionic app , the calendar shows well but the event not showing , here is my code :

Controller :

app.controller('testCtrl', function($scope, $stateParams,ReservationService,$ionicContentBanner) {
$scope.events = [];//createRandomEvents();
// Rest api Call 
ReservationService.getById(33,setbookings);

function setbookings(data){
    $scope.groups = data.data; 
    _.each($scope.groups, function(group) {
        add_event(group);
    })
    console.log('bookings '+JSON.stringify(_.groupBy($scope.groups, "bookdate")));

}

function add_event(group){
    $scope.events.push({
        title: group.pick_point +'<i class="icon ion-ios-arrow-thin-right" style="font-size:16px;vertical-align: middle;">'+ group.drop_point,
        startTime: new Date(group.pick_datetime),
        endTime: '',
        allDay: false
        });
}});

the view :
ion-content ng-controller="testCtrl" ng-init="loadEvents()">
calendar calendar-mode="month" event-source="events" >
/ion-content>

any help please

In month view of January it shows wrong week number

If I select March 26 and then go to next month then it automatically selects April 26. Is there anyway to stop this from happening? I do not want to select April 26.

9:00 - 12:00 range 1
12:00 - 15:00 range 2
15:00 - 18:00 range 3

something like this...

Thankyou.

Is it possible to click on a date in monthview and have it navigate to the weekview of that day? Or the dayview for that date?

Hello

I have a few questions about the system.

• Add text to sunday that it´s closed.
• Add in week, that the time is showing 07.00 - 16.30 and every event is 15 min.

Check the image, hope you understand what i mean.

Hello,

I'm wondering if there is anyway to change the the hour-mode in weekview to 24-hours format.

Thanks in advance

I create an delete event function, all is ok and the event is delete from backend but the calendar didn't refresh. to see the change i must refresh the page....how can i archieve this without refreshing page...
Merci

I did see this issue #48
but I always get

Fatal error: Unable to find local grunt.

I downloaded it with git clone and not bower so all files are present (even gruntfile.js)

I've never used grunt before, and I'm kind of stuck.

Is it possible to switch to day view from month view by clicking on a day with events ?.On click of a date in month view I need to switch to day view and show its events there.I am new to angular ,and unable to figure out how to do it.

In your calendar's month view, I would like have graphs (directive) for each day cell. How could I go about this? Thanks in advance.

Pretty cool, it's in a need of localization though.
I will be glad to help btw.

This is one of the event data
This is All day event that starts at "Sat, Aug 2, 2014 11:59 PM" and ends at "Sat, Aug 2, 2014 12:00 AM"
Current :This event displayed in Aug 1 and Aug 2 cells
Expected :This event should be displayed in Aug 2 cell

   {
      allDayEvent: "Y"
      description: "Desc"
      endDate: "Sat, Aug 2, 2014 11:59 PM"
      location: "Chennai"
      startDate: "Sat, Aug 2, 2014 12:00 AM"
      statusName: "Not Started"
      subject: "aug 2 Event"
    }

I've been given a requirement not to have the day (in month view) highlight blue if there is only one event on a day and that event contains "Unavailable" in the title. Is this something that would easily be done? I can't figure out in your code, how I should do it.

I was using the calendar directive like below

<uib-tabset>
        <uib-tab heading="availability">
<calendar ng-model="currentDate" calendar-mode="mode" event-source="eventSource"
                          event-selected="onEventSelected(event)"
                          time-selected="onTimeSelected(selectedTime)"></calendar>
        </uib-tab>
                          </uib-tabset>

the event-selected and time-selected functions were not firing. In a stand alone it was firing.

Here is my HTML:
<calendar ng-model="currentDate" calendar-mode="calendarMode" event-source="bookingSource" query-mode="remote" range-changed="rangeChanged(startTime, endTime)" event-selected="onEventSelected(event, $event)"></calendar>

and here is what I have in my controller:
$scope.rangeChanged = function (startTime, endTime) { Events.query({ startTime: startTime, endTime: endTime }, function (events) { console.log("THIS IS A TEST"); $scope.eventSource = events; }); };

When I run my code, the "THIS IS A TEST" log message does not appear, which tells me the rangeChanged function is not fired. Am I doing something wrong?

What is the best way to achieve that?

I'd like to add a datepicker and be able to go to a specified date. Any idea how I can implement this?
Thanks.

Is it possible to display the events directly on the calendar instead of I need to hover it or click the circle icon to view the events? I need it badly but cannot figure out how to do it.

Hi @twinssbc
I Want add custom implementation to the existing calendar,there week and day views were hourly based.I want change it to half an hour based like a google calendar.
How do I achieve, Could you please give a clue?

I am getting the following error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=GCCICR&p1=Error%3A%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)

I was added a "ui.responsiveCalendar" in my App.My App not loaded.
I Could not find "ui.responsiveCalendar" in calendar.js
How to resolve this

Hello,

Is there anyway to limit the calendar to only show 60 days in the future from the current date?

Current if the events in the eventSource is not sorted, events on the same day are not displayed in chronological orders within the event details views.

We need to add sorting to the array after this code segment (https://github.com/twinssbc/AngularJS-ResponsiveCalendar/blob/master/src/rcalendar/calendar.js#L422-L429)

              rows[rowIndex][dayIndex].hasEvent = true;
              eventSet = rows[rowIndex][dayIndex].events;
              if (eventSet) {
                eventSet.push(event);
              } else {
                eventSet = [];
                eventSet.push(event);
                rows[rowIndex][dayIndex].events = eventSet;
              }

Code to add

              rows[rowIndex][dayIndex].events.sort(
                function(event1, event2) {
                  return (event1.startTime.getTime() - event2.startTime.getTime());
                }
              );

Hi @twinssbc ,

Thanks for the directive, it's really helpful.

I need to create a callback when the next / prev button is clicked. Something similar with this: #40.

As suggested there, I tried using the "range-changed" attribute, but I'm still unable to get my callback function triggered.

My HTML:

<calendar
    calendar-mode="month"    
    range-changed="rangeChanged(startTime, endTime)"
 ></calendar>

My Javascript:

$scope.rangeChanged = function (startTime, endTime) {
    console.log(startTime, endTime); // should print something, but empty
}

Any help would be appreciated. Thanks.

Awesome job on this. I'm new the Angular but I believe I've poked around enough to get the ajax request working that'll retrieve events from a mysql database via php script and return the events in json format. I'd appreciate any help.

I have another block of content, a carousel slider, that I can not get to render if it is placed below where the week.html markup gets rendered. If I move it above where week.html gets rendered, the carousel and calendar week view render fine and don't interfere with each other.