Some config options do not work

[chrismcleod]

eventDataTransform and eventRender options are supported by fullcalendar. When you add these to the uiConfig with the appropriate functions, they have no effect.

[joshkurz]

can you create an example please? If you are not using the current head then please do so. This could be an $apply related issue.

[chrismcleod]

I am using the master branch. Example:

var calendar = angular.module('calendar', ['ui.calendar']);
  calendar.controller('CalendarController', ['$scope', '$http', function($scope, $http) {
    $scope.uiConfig = {
      calendar: {
        selectable: false,
        editable: true,
        height: 800,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
        },
        eventRender: $scope.renderEvent,
        eventDataTransform: $scope.transformData,
        eventClick: $scope.clickEvent,
        dayClick: $scope.clickDay
      }
    };
    $scope.events = function(start, end, callback) {
      $http({
        method: 'GET',
        url: '/admin/task_schedules/calendar.json',
        responseType: 'json',
        params: {
          start: Math.round(start.getTime() / 1000),
          end: Math.round(end.getTime() / 1000)
        },
      }).success(function(res) {
        $scope.events = res;
        callback($scope.events);
      });
    };
    $scope.transformData = function(events) {
      var new_events = [];
      angular.forEach(events, function(event) {
        new_events.push({
          id: event.id,
          title: event.task.description,
          start: event.start_date,
          end: event.end_date,
          task_schedule: event
        });
      });
      return new_events;
    };
    $scope.renderEvent = function(event, element) {
      element.find('.fc-event-title').css({textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', width: 'inherit', display: 'block'});
      element.attr('title', event.title);
    };
    $scope.clickEvent = function(event, jsEvent, view) {
      // allow editing or deleting
    };
    $scope.clickDay = function(date, allDay, jsEvent, view) {
      // allow creating
    };
    $scope.eventSources = [$scope.events];
  }]);

eventDataTransform and eventRender callbacks are never used.

[joshkurz]

I just updated the main demo to have a tooltip render on the calendar's events. http://angular-ui.github.io/ui-calendar/ I am not sure why your example is not working for you. The solution I used in the demo is essentially the same as what you are doing here. https://github.com/angular-ui/ui-calendar/commit/cb0ec8d1c414004ddcb9ae08ffbd9c1b2185f7d1, so not sure what the specific issue is.

[chrismcleod]

Possibly because my events are loaded using the $http service?

[johnschult]

$scope.renderEvent = function(event, element) {...};

Needs to be declared before using it... it is undefined otherwise.

$scope.uiConfig = {
  calendar: {
    eventRender: $scope.renderEvent
  }
};

[diegomesata]

Hello, How do you get that tooltips are shown on foreground? My tooltips are shown behind other events

[joshkurz]

Been waiting for someone to bring that up. Open a new issue for it please. On May 19, 2014 12:27 PM, "Diego Mesa" notifications@github.com wrote:

Hello, How do you get that tooltips are shown on foreground? My tooltips are shown behind other events

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-calendar/issues/102#issuecomment-43525949 .

[dwelch2344]

Was this ever resolved? I see the link to the working demo in a branch, but looks like that isn't on the master demo.

FWIW, I can't get this to work either. I'm not loading the events async either, though I am programmatically popping them on and off the event source.

[rddolan]

The problem is that initializing the jquery API is not well controlled. It looks like some attempts were made to optimize event rendering.

Try putting breakpoints in calendar.js in the following functions:

  this.sourceFingerprint = function(source) { ...
  this.allEvents = function() { ...

Also notice that the event watcher updates have been removed for performance reasons...

  eventsWatcher.subscribe(scope, function() {
    if (sourcesChanged === true) {
      sourcesChanged = false;
      // return false to prevent onAdded/Removed/Changed handlers from firing in this case
      return false;
    }
  });

It seems like the jQuery library was designed to handle url sources. Of course, in Angular, we like maintaining our own source collections.. So, trying to combine the two behaviors resulted in some issues.

I have an application that loads events after the page load is completed. So, when I placed breakpoints in those functions above the result was that the directive / controller code thought my event list was empty.

Updating the list calls the $watch above; but the rendering code in the jQuery API that is handling the re-rendering is very inefficient for some reason (just try returning true).

My workaround was to add another hook to my parent controller to just re-initialize the calendar programmatically.

    // Calendar.js $watch to initialize
    scope.$watch(getOptions, function(newO,oldO){
        scope.destroy();
        scope.init();
    });

    // My method
    scope.calendarApi.initialize = function () {
        scope.destroy();
        scope.init();
    }

Then call this from my controller after my events load. It seems to work ok - $timeout is needed to take care of timing the event array load and initialize call.

Hope this helps!

[jparmar]

Hellow, I am facing the same issue ($scope.renderEvent is not being called), hence looking for any good solution.

also, can anyone please confirm me that demo site "http://angular-ui.github.io/ui-calendar/" uses FullCalendar v2.1.1. I doubt my issue is because of the FullCalendar version miss match.

[antoinepairet]

@jparmar the option to use is eventRender and not renderEvent. I am using this successfully with both FC 2.1.1 and 2.3.2

[jparmar]

yes antoinepairet,

I am using config { calendar : {eventRender: $scope.renderEvent} }

sorry for the confusion in my last comment.

[antoinepairet]

@jparmar Please setup a plunkr with a minimum example reproducing the issue

[M0nter0]

It's really difficult to reproduce the same situation due the amount of dependencies that are being updated continuously. I did a plunkr to reproduce it, but I only made it running without problem inspecting the Sources in the demo to get the same versions. For example, @diegomesata, that behaviour appears with new versions of bootstrap.css. With 2.3.1 is working fine, but I also had the same situation with newest versions. You can easily test it changing the imported file version in the plunker