Как узнать фактическую дату, по которой пользователь щелкнул в Fullcalendar

Question

Когда пользователь нажимает на событие, я ищу способ получить дату, на которую пользователь нажал.eventClick() возвращает только дату начала события, и, конечно, dayClick() не срабатывает, так как пользователь нажал на событие.

Или я ищу способ для dayClick()срабатывает независимо от того, нажимает ли пользователь на пустую ячейку календаря или на событие.

Answer 1

Я знаю, что это старая ветка, но она может кому-то помочь (работает только при просмотре месяца)

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);
        }
    });
},

Answer 2

Вот, пожалуйста, вам придется взломать календарь с небольшим количеством jquery, чтобы это заработало.Это не здорово, но все, что вам нужно, это

Посмотрите на мою скрипку и для рабочего примера

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

Код

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);
            }

Answer 3

Я использовал координаты страницы, возвращенные объектом jsEvent, вместе с небольшим плагином, и он прекрасно работает для меня.Плагин https://github.com/gilmoreorless/jquery-nearest, и я использую его следующим образом:

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
}

Хотелось бы, чтобы он был просто встроен в объект calEvent - он наверняка облегчит задачу

Answer 4

Я думаю, что есть лучшее решение.

Я решил проблему следующим образом:

, так как параметр date - это более или менее объект javasxript, который вы можете сделатьэто

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

Answer 5

"Нет - это относится к дате начала события. Он хочет ДАТУ ДНЯ, когда он щелкнул СОБЫТИЕ. Смущает, эй? Да ... но у него очень хорошая идея. Вы отвечаете неправильно."

Извините, но это касается даты дня

$('#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"
                     }
                     ]
             });

Answer 6

Для версии 3 fullcalendar это лучшее решение

$(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');
                        }
                    });
                }
            });
        }
    });
});

Answer 7

Я столкнулся с этой же проблемой, и ни одно из решений не сработало для меня с fullcalendar 2.1.0.Вот что я в итоге использовал:

$('#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'
    }
  ]
});

Answer 8

Не знаю, правильно ли я понимаю.

Я понимаю это следующим образом:

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);
           }
     }

Надеюсь, это то, что вы имеете в виду.
Осторожно: -1 в месяце переменной, потому что event.start - MM возвращает нормальный номер месяца, но функция gotoDate начинается с 0