Event and Resource/RowHeader Template Customization with AngularJs

After some more digging, it looks like maybe the best option is to use DOM mutation observers to detect when an event or resource/header element is removed from the dom and using onBeforeRowHeaderRender to determine when to compile and link for the resource/header. And then using onAfterEventRender for the events. It appears that when using progressiveRowRendering and dynamicEventRendering 'Progressive' these fire at the appropriate times. When scrolling vertically the header event fires and as events are added to the dom (sometimes removed via the cache sweeping) they always fire the after event render event.

Another option that looks like it might work is watching the instance properties divEvents and divResScroll, but guessing that is deemed internal really, would be fragile, and annoying to determine deltas from.

I am open to any other suggestions or confirmations on those being reasonable events to bind to.

Using DOM mutation observers should work fine as the number of observed object remains relatively low when progressive rendering is used (and it's enabled by default).

If it doesn't work as expected please let me know. Technically it's not difficult to add onAfterRender/onBeforeRemove events for other objects as well (row headers, time headers). However, the rendering and removing operations are extremely time-sensitive and exposing these handlers would cause serious performance problems if not used carefully. So we'd like to avoid that if possible.

Thanks Dan, no need to add more events as I don't think it would be reasonable to manage the life cycles off some of the changes that occur. One situation that I have run across that makes it difficult to manage is floatingEvents and the dom changes that occur from it.

I think my next attempt will be setting the html on the events and row headers during the onBeforeXRender events with some sort of indicators so a correct scope to link to could be created. Then watching the scheduler dom for flagged elements to exist and do the angularjs work outside of the scheduler hooks.

Performance is somewhat of a concern, if using angularjs and dom observers turns out to be too slow. The next option I have in mind would be to put jquery bindings in and pushing any interaction event handling into the angular digest cycle.

Just one more suggestion - I understand that plain HTML may not be sufficient in some scenarios.

All of the main Scheduler elements (events, time headers, row headers, cells) support active areas that might be a good substitute for custom AngularJS templates - you can arrange them as you wish (size, location, styling) and you can also handle onClick for them.

I'm not sure if this would cover all your needs but you can take a look at this options if you haven't already. This solution wouldn't require any time-consuming operations like compiling AngularJS templates in real time.