8

我正在使用 Arshaw 的 FullCalendar，并且希望在页面加载后模拟用户单击单元格。我正在尝试这样做，因此我可能会转到一个 URL，例如，/Calendar/AddEvent日历将自动打开一个对话框，其中包含我的添加事件表单。

进行以下设置：（此处为小提琴）

HTML 

<div>
    <div id="calendar" data-year="2013" data-month="04" ></div>
</div>

jQuery

$('#calendar').fullCalendar({
        firstDay: 1,
        selectable: true,
        dayClick: function (start, allDay, jsEvent, view) {
                    alert('You clicked me!');
        }
    });

默认情况下，今天的单元格具有.fc-today我尝试通过执行以下操作来利用的类：

$('.fc-today').trigger('click');

这似乎不起作用。无论如何我可以做类似的事情

$('#calendar').fullCalendar('dayClick', date)

任何帮助表示赞赏。

4

3 回答 3

4

我在我的用例中也遇到了这个问题，这是我在挖掘完整日历源代码后发现的对我有用的方法。您需要手动创建一个mousedown和mouseup事件（技术上mouseup是可选的，但您可以使用它来重置 的“单击”状态td），其中包含您要“单击”的元素的 X 和 Y 位置的坐标。参数也很重要which，需要将其设置为1才能通过isPrimaryMouseButton检查。

考虑到这一点，代码看起来像这样（注意我更改了$('#click')使用mousedown事件，以便它只运行一次）：

$('#click').on('mousedown', function () { 
    var today = $('td.fc-today');
    var down = new $.Event("mousedown");
    var up = new $.Event("mouseup");
    down.which = up.which = 1;
    down.pageX = up.pageX = today.offset().left;
    down.pageY = up.pageY = today.offset().top;
    today.trigger(down);
    today.trigger(up); //this is optional if you just want the dayClick event, but running this allows you to reset the 'clicked' state of the <td>
});

这是一个工作小提琴：http: //jsfiddle.net/vyxte25r/

于 2015-12-10T03:16:55.633 回答
0

您可以在类中使用jquerytrigger事件：divtdfc-today

 $('td.fc-today div').trigger('click');
于 2013-04-05T07:15:08.100 回答
0

修改凯文的答案对我有用。我需要让 dayClick 事件可以通过键盘访问。使用 dayRender 方法将事件监听器添加到每个单元格允许我们轻松处理每一天的 dayClick 事件。以下是我的实现方式：

dayRender: function(date, cell) {
  // Allow keyboard to access and interact with calendar days
  $(cell).attr("tabindex", "0").on("keydown", function(e) {
    if (e.which === 32 || e.which === 13) {
      var day = $(this);
      var down = new $.Event("mousedown");
      var up = new $.Event("mouseup");
      var eventParams = { which: 1, pageX: day.offset().left, pageY: day.offset().top };

      day.trigger($.extend(true, {}, down, eventParams));
      day.trigger($.extend(true, {}, up, eventParams));
    }
  });
}

相关文档：https ://fullcalendar.io/docs/display/dayRender/

于 2017-04-20T21:15:13.707 回答