右键单击打开的单元格时，在完整日历中获取日期值

Question

我创建了一个jsfiddle来显示我的问题。 基本上，我想让全日历在"agendaweek"视图中呈现日历，并允许用户右键单击打开的单元格并将日期/时间检索到可用于进一步功能的 JS 变量中。 鼠标左键单击有效，但右键单击不在"议程周"视图中。 对我来说最重要的是能够在右键单击时检索该打开单元格的单击日期/时间。 我已经搜索了网络，并看到了很多弹出上下文菜单的示例，但没有一个在完整日历中实际起作用，可以将右键单击的日期/时间检索到 JS 变量中。 如果有人能告诉我这是怎么做到的，我将不胜感激。 谢谢！

https://jsfiddle.net/gouldtv/1j01ztdm/

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        dayClick: function (date, allDay, jsEvent, view) {
             var formattedDate = date.toString().replace(" GMT+0000",""); 
            alert("see, I can get " + formattedDate + " if I _left click_, but try doing this with a right click");
        },
        defaultView: 'agendaWeek',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
    });
});

Answer 1

我并不是说这是您所期望的正确答案，但它可能会让您对如何进一步操纵有所了解。只需在下面添加行，即可在右键单击完整日历时获取坐标。

function CustomContext() {    
    var e = window.event;        
    var x=e.clientX;        
    var y=e.clientY;
    if (e.which === 3 || e.button === 2) {
         alert('Right Click happend at ' + x +' ' + y);
    }    
}
$("#calendar").mousedown(CustomContext);

尝试操纵坐标，我认为如果您在谷歌中深入挖掘，您可以创建自己的上下文，或者您可以根据坐标获取日期和时间

Answer 2

这

很俗气，但通过修改 fullcalendar.js，您可以在呈现行元素时将日期时间插入到行元素的属性中。 然后，您可以挂钩右键单击并从单击的元素中选取属性。

在 fullcalendar.js 中，修改 slatRowHtml（） 以插入日期时间：

html += '<tr event-time="' + slotDate.format() + '" ' .....

然后绑定到鼠标关闭事件并筛选右键单击（其中 == 3）：

$"(#calendar").find(".fc-agendaDay-view .fc-time-grid tr").bind("mousedown", function (e) {
    if (e.which == 3) {
        alert($(this).attr("event-time"));
    }
});

注意：我只为agendaDay视图实现了这个，但我相信你也可以弄清楚如何为agendaWeek做到这一点。

https://jsfiddle.net/hammerbeam/96hdqoa5/