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

“不 - 这是事件的开始日期 - 他想要点击事件的DAY日期。困惑嘿？是的 - 但他非常好主意。你的回答是不正确的。” / p>

抱歉，这是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"
                     }
                     ]
             });

Answer 4

我认为有更好的解决方案。

我用这种方式解决了问题：

因为参数 date 是一个或多或少的javasxript对象，你可以这样做

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

Answer 5

我使用了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 6

我不知道，我是否理解正确。

我意识到这一点：

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开始

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

对于全日历版本3，这是最好的解决方案

$(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 9

对于FC v4和v5，以下方法将使用在timeGridWeek和timeGridDay视图中单击的单元格用户来获取时间。如图所示，使用handleEventClick事件中的jsEvent.currentTarget元素来选择坐标。

该实现是在Angular中，不使用jQuery。它可以轻松转换为香草JS

全日历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');
}

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

如何获取用户使用Fullcalendar单击的实际日期

9 个答案: