Question

我创建了一个jsfiddle来显示我的问题。基本上我想让fullcalender在“agendaweek”视图中呈现一个日历，并允许用户右键单击一个打开的单元格并将日期/时间检索到JS变量中，我可以将其用于进一步的功能。鼠标左键单击工作，但右键单击不在“agendaWeek”视图中。对我来说最重要的是能够在右键单击时检索该打开单元格的单击日期/时间。我已经浏览了网页并看到了很多弹出上下文菜单的例子，但是在fullcalendar中实际上没有任何东西能够将右键单击的日期/时间检索到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() + '" ' .....

然后绑定到mousedown事件并过滤以右键单击（= = 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/

右键单击打开的单元格时，将日期值返回fullcalendar

2 个答案: