Angular-calendar: Event names don't appear on custom Calendar template

[vdtejeda]

Bug description / Feature request:

Thanks for the calendar but, when bundling for production with AoT, the event names don't show up on a custom template of the calendar.

It looks like the events are there, but the text is not displayed. What's odd is that the text appear when ran locally with ng-serve and disappears when ran with ng-serve --prod --aot.

For bugs only, a link to minimally working plunker that reproduces the issue (you can fork a starter from any of the demos)

Since this is an AoT compatibility issue, i was unable to reproduce the issue in plunker. However, I made a repo that reproduces the issue when ran with ng-serve --prod --aot.

I really like the calendar and i'm currently using it in my project but I need to resolve this issue in order move forward. Any help with this is greatly appreciated.

Versions

Angular: 2.4

Angular-cli: 1.0.0-rc.2

Calendar library: ^0.8.0

Browser name and version: Google Chrome Version 57.0.2987.133 (64-bit)

[mattlewis92]

First of all, thanks for taking the time to make a repo that reproduces the issue, it makes my life so much easier! It's also nice to see some creative ways of styling the calendar which was exactly how I'd intended this library to be used 😄

Your issue is caused by the way you set event titles via the CSS rule content: attr(ng-reflect-contents). When you AoT compile an angular app none of these reflection attributes are set as they are compiled away:

Fortunately support for custom templates landed in 0.9.0 so there is now a proper API you can use for setting the month cell template without having to use creative CSS rules to get the behaviour you desire. You can see an example of how to set a custom month view template here. Hope that helps! 😄

[vdtejeda]

Awesome!! That's very helpful, Thank you!!