Externally triggering FullCalendar's 'dayClick' method?
I'm using Arshaw's FullCalendar and I'm looking to simulate a user clicking on a cell once the page has loaded. I'm trying to do this so I could potentially go to a URL such as /Calendar/AddEvent and the calendar will automatically open a dialog with my add event form in.
Take the following set up: (Fiddle here)
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!');
}
});
By default, the cell for today has the class .fc-today which I've tried to take advantage of by doing the following:
$('.fc-today').trigger('click');
This doesn't seem to work though. Is there anyway I could do something like
$('#calendar').fullCalendar('dayClick', date)
Any help is appreciated.
I ran into this issue in my usecase as well, and this is what I found works for me, after digging around in the fullcalendar source code. You need to manually create a mousedown and mouseup event (technically the mouseup is optional, but you can use it to reset the 'clicked' state of the td ), which contains the coordinates of the X and Y position of the element you want to "click". Also important is the which parameter, which needs to be set to 1 so that it passes the isPrimaryMouseButton check.
With this in mind, the code would look like this (note I changed the $('#click') to use a mousedown event so that it only runs once):
$('#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>
});
Here is a working fiddle: http://jsfiddle.net/vyxte25r/
您可以使用fc-today类在td内的div上使用jquery trigger事件：
$('td.fc-today div').trigger('click');
Modifying Kevin's answer a bit worked for me. I needed to make the dayClick event accessible by keyboard. Adding the event listener to each cell using the dayRender method allows us to easily handle the dayClick event for each day. Here's how I accomplished it:
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));
}
});
}
Relevant documentation: https://fullcalendar.io/docs/display/dayRender/
链接地址: http://www.djcxy.com/p/70634.html上一篇: 事务中出错后回滚