CODEWITHSUNDEEP
angularjsfullcalendar
Schwertfisch
Schwertfisch

Reputation: 143

Render from angularjs directive via eventRender Fullcalendar

Is there a way to dynamically Render a template from angularjs directive via eventRender Fullcalendar ?

What I want to achieve is something like below:

eventRender: function(event, element, view) {

  var template = '<my-directive></my-directive>';

  element.find('.fc-event').append(template);

  scope.$apply();
}

Following Documentation

The eventRender callback function can modify element.

For example, it can change its appearance via jQuery’s .css().

On eventRender insert the css classes with

eventRender: function (event, element) {

    element.addClass(event.class)
}

Documentation on this topic is not broad in the subject.

It doesn't give any example of changing the template via Angularjs directives and doesn't tell if there is any limitaion for template to keep it treated by FullCalendar as event.

MyCodePen

EDITED_Code_Pen

Upvotes: 3

Views: 1088

Answers (1)

Schwertfisch
Schwertfisch

Reputation: 143

1- add $compile to your controller

2- in eventRender make as bellow :

eventRender: function(event, element, view) {


     var compiled = $compile('<div your-directive></div>')($scope);

     element.find('.fc-content').replaceWith(compiled);

 },

workingCodePen

Upvotes: 2

Related Questions