Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Callback before calendar view is changed

Tags:

fullcalendar

I added bootstrap popovers to the calendar events which open on click:

eventClick: (event, jsEvent, view) ->
  if event.ajaxUrl?
    elem = jQuery(@)
    elem.popover('destroy')

    jQuery.ajax({url: event.ajaxUrl})
    .done (result) ->
      elem.popover(
        placement: 'top'
        html: true
        trigger: 'manual'
        title: moment(event.start).format('dddd, DD. MMMM YYYY - HH:mm')
        content: result
        container: 'body')

      elem.popover('show')

My problem is, that these popovers stay open when I change the calendar view (e.g. change the month or to week/day layout). As the popovers are bound to the .fc-event divs/spans within the calendar, I need to access these DOM elements to run .popover('destroy').

Whenever a fullCalendar view is changed, the old DOM-Elements are replaced with the ones for the new view, so I would have to access them before the view is actually changed. Unfortunately there are only callbacks for event loading (loading which happens after the view is changed) and viewDisplay (same, but you get the new view).

To make sure I understood viewDisplay correctly, I added a small test to the calendar which always gives me "0" (the data-selector comes from jquery data selector)

viewDisplay: (view) ->
    alert(jQuery('.fc-event:data(popover)').size())

Is there a way to hook into the calendar process everytime the view is to be changed - but before the view is actually changed?

Edit

For now I'm simply destroying the popovers once the mouse is moved over any calendar button (as a bind to click would be executed after the view change), but this solution is just a workaround

jQuery('.fc-button').on 'mouseover', () ->
    jQuery('.fc-event:data(popover)').popover('destroy')
like image 371
stex Avatar asked Apr 13 '13 18:04

stex


2 Answers

V3

I think you are looking for http://fullcalendar.io/docs/display/viewRender/

From doc

viewRender

Triggered when a new date-range is rendered, or when the view type switches. function( view, element ) view is the View Object for the new view. element is a jQuery element for the container of the new view.

This callback will get triggered when the user changes the view, or when any of the date navigation methods are called.

This callback will trigger after the view has been fully rendered, but, before events have been rendered (see also: eventAfterAllRender).

UPDATE

V4 renamed from viewRender to datesRender https://fullcalendar.io/docs/v4/datesRender

V5 renamed from datesRender to datesSet https://fullcalendar.io/docs/datesSet

like image 188
MarCrazyness Avatar answered Nov 22 '22 13:11

MarCrazyness


In V4, viewRender was deprecated, check out the release notes, now they have:

"viewSkeletonRender" callback which is triggered when the new view is mounted, it receives a view object containing a lot of good stuff in it.

"viewSkeletonDestroy" callback which is triggered right before the old view is about to get unmounted.

--

Alternatively, thought may not answer the question directly, you can use the "datesRender" callback. I needed was to run a function when previous, next, or the view changed. (I had to compute the total number of hours of an event type based on the date range and the views)

like image 29
Antuan Avatar answered Nov 22 '22 13:11

Antuan