angular-ui/angular-ui.github.com

How to 'extend' calendar directive?

nahue opened this issue · 9 comments

Can you show in the demo how to add event listeners such as eventClick and eventDrop?

The demo works great for really basic usage but it would be great if you show how to adapt it to our needs!

Just for shits and giggles, have you tried doing ui-event=" { eventClick : 'myFunction($event)' } " or ui-calendar="{events:{eventClick:myFunction}}"

didn't worked for me :( its not even showing errors of undefined function

Can you provide a fiddle or plunker demo? Sorry just very busy so the more you can help me help you the easier it is lol

I can go ahead and say that it wont work by just adding ui-event as a directive. I have tried extensively to hook the calendar up to the events and call them from an eval method, but with no success. There is a good demo that shows how to create an isolated controller for the calendar and attach that to the events of choice. here http://plnkr.co/edit/PfgzXM?p=preview

Here is a demo that shows where I tried to hook the eval method up to the dayClick event from inside the calendar. The method will not fire. I have tried to wrap the eval in apply, call an attribute that is just dayClick, use the ui-events directive. Usually when I call a method string from eval that method will fire on the scope.

If someone could chime in on this it would be great. http://plnkr.co/edit/WtzHTS?p=preview

@joshkurz I'm not sure what you're expecting the code to do. There is no reason to wrap an $eval() inside an $apply()

Secondly, you passed a reference to a function addEventOnClick not the execution of the function addEventOnClick()

What I'm wondering is is it necessary to wrap individual events like this? It feels like you're restricting (and hand-holding) functionality. What DOM element emits the events of FullCalendar? If you can figure that out, maybe using uiEvent would work fine there? Or alternatively take an events attribute instead?

Try not to focus on wrapping each and every option if it's an optional feature.

can you give an example of binding a eventClick event to the ui-calendar please ?

I must have goofed last night. I have had much better luck with the calendar tonight.

@ProLoser There is not any such element in the documentation. Since each individual callback is supposed to be expressed in the options when the calendar is initialized. For now I have found the best immediate solution to call scope methods from the calendar. I understand that we don't want to hold the calendars hand and wrap each of its callback functions, but it seems like the best solution for someone who wants to extend the calendar to support more advanced functionality today. http://plnkr.co/edit/tUUecL?p=preview

I really wanted to get the calendar to work with ui-event so I went into fullcalendar.js and triggered the custom events on a .ui-calendar object. This is promising, because it works with ui-event this way. The only fallback at the moment is the callback data is not being propagated through the fn(event,params) call in uiEvent. However the param data is being passed over from the calendar as seen in the console from the custom uiEvent console log on every event call.

http://plnkr.co/edit/V52Hgt?p=preview

Does it seem like a good idea to rewrite fullcalendar.js to work with ui-event?

It might be useful to expand uiEvent to support multiple parameters.

However unless you can get them to accept the patch we should find some
other way.

OK so after working with @ProLoser I discovered that I was implementing this all wrong. We don't need to use uiEvent or rewrite the calendar file. All we need to do is set the uiConfig options correct and presto. Here is a link to a much simpler version of the calendar, but with more functionality than ever before. http://jsfiddle.net/joshkurz/Ljq26/1/