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

问题描述 投票：0回答：10

当用户单击某个事件时，我正在寻找一种方法来获取用户单击的日期。 

eventClick()
仅返回事件的开始日期，并且 
dayClick()
当然，自用户单击事件后不会触发。

或者，我正在寻找一种方法，无论用户单击空日历单元格还是事件，都可以触发 

dayClick()
。

jquery fullcalendar
10个回答
5
投票

我知道这是一个旧线程，但它可能对某人有帮助（仅适用于月视图）

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

给你 - 你必须用一点 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);
            }
1
投票

“不 - 这是事件的开始日期 - 他想要他点击事件的日期。令人困惑嘿？是的 - 但他有很好的主意。你的答案不正确。”

抱歉，但这要到 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"
                     }
                     ]
             });
1
投票

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

我是这样解决问题的：

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

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

我使用了 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 对象中 - 它肯定会让事情变得更容易

0
投票

我遇到了同样的问题，并且所有解决方案都不适用于 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'
    }
  ]
});
0
投票

不知道我理解是否正确。

我通过这个意识到了这一点：

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

希望，这就是你的意思。
注意：var Month 中的 -1，因为 event.start - MM 返回正常的月份数字，但函数 gotoDate 从 0 开始

0
投票

对于 fullcalendar 版本 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');
                        }
                    });
                }
            });
        }
    });
});
0
投票

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

我对 Fullcalendar 5 的实现：

 var mouseX = info.jsEvent.pageX;
                var mouseY = info.jsEvent.pageY;
                var day = '';
                $('.fc-resourceTimelineWeek-view').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-timeline-slot').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');
                            }
                        });
                    }
                });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.