CODEWITHSUNDEEP
javascriptfullcalendarfrontend
bcherny
bcherny

Reputation: 3172

Fullcalendar: detect click in week or day view

I'm currently detecting double click events in month view. This works well:

dayRender: (date, element) => {
  element.bind('dblclick', ...)
}

What I'm looking for is a way to do the same when the user is in day view or week view. I want to be able to detect a click event, and get the date and time they clicked on (note that time is relevant in day/week view, but not month view).

Any ideas?

Upvotes: 0

Views: 3897

Answers (1)

bcherny
bcherny

Reputation: 3172

For anyone that finds this in the future, here's the hacky solution I came up with:

Because fullcalendar doesn't render a <div> per time slot (eg. a single div representing 1pm-1:30pm on 1/2/2015), and instead visually represents a single time slot as the intersection of a row and a column, we need a way to figure out the time from a given click. Day info is already attached to each column (day) DOM element in the form of a data-date attribute. What I did was I forked fullcalendar, and added time info to each row (time slot) with a new data-time attribute.

Then, I listened on the double click event onViewRender, figured out the elements the user clicked on, and from those was able to derive both the date and the time slot:

viewRender: (view, element) ->

  if view.type in ['agendaDay', 'agendaWeek']
    element.on 'dblclick', (event) ->

      els = document
        .elementsFromPoint event.pageX, event.pageY
        .filter (e) -> (e.hasAttribute 'data-date') or (e.hasAttribute 'data-time')
      date = (_.find els, (e) -> e.hasAttribute 'data-date').getAttribute 'data-date'
      time = (_.find els, (e) -> e.hasAttribute 'data-time').getAttribute 'data-time'

      return unless date and time

      startTime = moment "#{ date } #{ time }"
      endTime = (moment startTime).add 30, 'minutes' # clone + increment

This is a really hacky solution, and mixes all sorts of concerns. However, until fullcalendar adds support for a timeClick event, this works pretty well.

Hope this helps someone else!

Upvotes: 1

Related Questions