Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 event.

like image 952
rickster Avatar asked May 06 '11 19:05

rickster


2 Answers

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);
        }
    });
},
like image 172
svooz Avatar answered Sep 20 '22 18:09

svooz


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);
            }
like image 45
Piotr Kula Avatar answered Sep 19 '22 18:09

Piotr Kula