How do I get the actual date the user clicked on with Fullcalendar

When a user clicks on an event, I am looking for a way to obtain the date that the user clicked on. eventClick() only returns the start date of the event, and dayClick() of course, does not fire since the user clicked on an event.

Or, I'm looking for a way for dayClick() to fire regardless if the user clicks on an empty calendar cell or on an e开发者_JAVA百科vent.

I know this is an old thread but it might help someone (works only on the month view)

eventClick: function(event, jsEvent, view) {
    // Get the case number in the row
    // pos X clicked on the row / total width of the row * 100 (to percent) / (percent of 7 days by week)
    var caseNumber = Math.floor((Math.abs(jsEvent.offsetX + jsEvent.currentTarget.offsetLeft) / $(this).parent().parent().width() * 100) / (100 / 7));
    // Get the table
    var table = $(this).parent().parent().parent().parent().children();
    $(table).each(function(){
        // Get the thead
        if($(this).is('thead')){
            var tds = $(this).children().children();
            var dateClicked = $(tds[caseNumber]).attr("data-date");
            alert(dateClicked);
        }
    });
},

Here you go- You will have to hack the calendar with a little bit of jquery to get this working. Its not great but all you need is this

Look at my fiddle also for working example

http://jsfiddle.net/ppumkin/xCHLn/

Code

eventClick: function(calEvent, jsEvent, view) {
           var mousex = jsEvent.pageX;
           var mousey = jsEvent.pageY;
           $('td').each(function(index) {
            var offset = $(this).offset();
            if ((offset.left + $(this).outerWidth()) > mousex && offset.left < mousex && (offset.top + $(this).outerHeight()) > mousey && offset.top < mousey) {

                if ($(this).hasClass('fc-other-month')){
                    //Its a day on another month
                    //a high minus number means previous month
                    //a low minus number means next month
                    day = '-' + $(this).find('.fc-day-number').html();
                 $(this).css('color', 'red');
                    }
                    else
                    {
                    //This is a day on the current month
                    day = $(this).find('.fc-day-number').html();
                         $(this).css('color', 'yellow');
                    }

             alert(day);
            }

"No - this goes to the START date of the event- He wants the DATE of the DAY where he clicked on the EVENT. Confusing hey? yea-- but very good idea he has. You answer is incorrect."

Sorry, but this goes to the Daydate

$('#mycalendar').fullCalendar(
             {
              header: {
                     left: 'prev,next today',
                     center: 'title',
                     right: 'month,agendaWeek,agendaDay'
                     },
             editable: true,
             eventRender: function(event, element, view)
                  {
                  element.bind('click', function()
                         {
                         var day = ($.fullCalendar.formatDate( event.start, 'dd' ));
                         var month = ($.fullCalendar.formatDate( event.start, 'MM' ));
                         var year = ($.fullCalendar.formatDate( event.start, 'yyyy' ));
                          alert(year+'-'+month+'-'+day);
                         });
                   },
             events:[
                     {
                     "id":"1",
                     "title":"Garden",
                     "allDay":true,
                     "start":"1304770357"
                     }
                     ]
             });

I think there is a better solution.

I solved the problem this way:

since the parameter date is a more or less javasxript object you can do this

 date.setDate(date.getDate() +1 );

I used the page coordinates returned with the jsEvent object along with a small plugin, and it works nicely for me. The plugin is https://github.com/gilmoreorless/jquery-nearest and I use it like:

eventClick: function(calEvent, jsEvent, view) {
        var clickedDate = $.nearest({x: jsEvent.pageX, y: jsEvent.pageY}, '.fc-day').attr('data-date');
        //clickedDate will hold date from data-date attribute ex. YYYY-MM-DD
}

I wish it was just built in to the calEvent object - it sure would make things a lot easier

I ran into this same problem and none of the solutions worked for me with fullcalendar 2.1.0. Here's what I ended up using:

$('#mycalendar').fullCalendar({
  eventClick: function(calEvent, jsEvent, view) {
    var posX = jsEvent.offsetX;
    $(jsEvent.currentTarget.offsetParent)
      .find("td[class~='fc-day-number']")
      .each(function(index) {
        if (posX >= this.offsetLeft - 3
            && posX <= (this.offsetLeft + this.offsetWidth - 3)) {
          var row = $(this).parents("div[class~='fc-row']").index(),
              col = index,
              date = view.cellToDate(row, col);
          alert('Clicked date = ' + date.toString());
          return false;
        }
      });
  },      
  events: [
    {
      title  : 'Long Event',
      start  : '2014-07-10',
      end    : '2014-09-25'
    }
  ]
});

I don´t know, wether I understand correctly.

I realize it with this:

eventRender: function(event, element, view)
    {
    element.bind('dblclick', function() 
           {
           var day = ($.fullCalendar.formatDate( event.start, 'dd' ));
           var month = ($.fullCalendar.formatDate( event.start, 'MM' ))-1;
           var year = ($.fullCalendar.formatDate( event.start, 'yyyy' ));
           $('#calendar').fullCalendar('changeView','agendaDay');
           $('#calendar').fullCalendar( 'gotoDate', year, month,day);
           }
     }

Hope, this is, what you mean.
Watch out: The -1 in var month, because event.start - MM returns the normal month number, but the function gotoDate starts at 0

For Version 3 of fullcalendar this is the best solution

$(document).ready(function() {
    /** initialize the calendar**/
    $('#calendar').fullCalendar({
        eventClick: function(data, jsEvent) {
            var mouseX = jsEvent.pageX;
            var mouseY = jsEvent.pageY;
            var day = '';
            $('.fc-week').each(function() {
                var offset = $(this).offset();
                var top = Math.floor( offset.top );
                var height = $(this).outerHeight() + top;

                if( top <= mouseY && mouseY < height ) {
                    $(this).find('.fc-day-top').each(function() {
                        offset = $(this).offset();
                        var left = Math.floor( offset.left );
                        var width = $(this).outerWidth() + left;

                        if( left <= mouseX && mouseX < width ) {
                            day = $(this).attr('data-date');
                        }
                    });
                }
            });
        }
    });
});

For FC v4 and v5, Following methods will get the time using the cell user clicked on in timeGridWeek and timeGridDay views. Co-ordinates are picked using the jsEvent.currentTarget element in the handleEventClick event as described in the diagram

The implementation is in Angular and does not uses jQuery. It is easily convertible to vanilla JS

Fullcalendar v4:

handleEventClick(e: EventClickArg) {
    const rect = e.jsEvent.currentTarget.getBoundingClientRect();
    const fcCellStartTime = (document.elementFromPoint(rect.left - window.pageXOffset, e.jsEvent.pageY - window.pageYOffset)
  .parentNode as HTMLTableRowElement).getAttribute('data-time');
    const selectedStartTime = moment(fcCellStartTime, 'HH:mm:ss');
}

For Fullcalendar v5

handleEventClick(clickInfo: EventClickArg) {
    const rect = (clickInfo.jsEvent.currentTarget as HTMLElement).getBoundingClientRect();
    let fcCellStartTime;
    const clickedElement = document.elementFromPoint(rect.left - window.pageXOffset, clickInfo.jsEvent.pageY - window.pageYOffset) as HTMLElement;
    // Cells with text will have data-time attribute in parent div
    if ((clickedElement.tagName) !== 'TD') {
        fcCellStartTime = (clickedElement.parentNode as HTMLDivElement).getAttribute("data-time");
    } else {// otherwise it is a blank hour cell and it will have data-time attrib
        fcCellStartTime = clickedElement.getAttribute("data-time");
    }
    const selectedStartTime = moment(fcCellStartTime, 'HH:mm:ss');
    console.log(selectedStartTime);
}