javascript - Angular UI-Calendar external event renderer -

i'm new angular, , i'm using angular ui-calendar display bookings, events more detailed regular events. can see how can render these events directly in render function, isn't best way this, , want able have external renderer events, , able have renderer suitable different types of calendar view.

this have, , more basic be. in eventrender section want able call/include angular html template sole responsible rendering events.

eventrender : function(event, element) {                 element.attr({                     'tooltip' : event.title,                     'tooltip-append-to-body' : true                 });                 angular.foreach(event.bookings, function (booking, key){                     $(element)                       .append('<strong>' + booking.title + '</strong>')                       .append(' x').append(booking.numbercustomers)                       .append(' &dash; ').append(booking.contact)                       .append('<br />');                 });              } 

as per ui-calendar documentation eventrender method:

the function can return brand new element used rendering instead. all-day background events, must sure return .

this lets return different layouts different events in schedule.

first, add custom class each eventsource, this:

var event = {   ...   classname: 'booking-1' }; 

then, in eventrender method return html based on class attached event:

eventrender : function(event, element, view) {   if ( event.classname.indexof('booking-1') > -1 ) {     return '<span>1</span>';   } else if ( event.classname.indexof('booking-2') > -1 ) {     return '<span>2</span>';   } }