完整日历 - 读取键盘箭头键并派生与单击日期单元格相同的行为
Full Calendar- read keyboard arrow keys and derive same behavior as click on a date cell
我正在尝试读取键盘箭头键并得出与单击日期单元格相同的行为。
非工作代码被注释掉,gotodate
工作,但简单地实现或减少日期一或七不会导致日期突出显示。
我想将目标日期单元格放在焦点上,突出显示它,并从我离开的单元格中删除突出显示。 我相信我不理解或无法解释dayClick函数。
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end){
//var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar ('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventLimit: true, // allow "more" link when too many events
events: {
url: 'php/get-events.php',
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#my-prev-button').click(function() {
$('#calendar').fullCalendar('prev');
});
$('#my-next-button').click(function() {
$('#calendar').fullCalendar('next');
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
}
});
$(document).keydown(function(e) {
switch(e.keyCode) {
case 33: // page up
$('#calendar').fullCalendar('prev');
break;
case 34: // page down
$('#calendar').fullCalendar('next');
break;
case 37: // left
// alert('left key pressed');
$('#calendar').fullCalendar('gotoDate', '2015-01-19');
$(this).css('background-color', 'red');
break;
case 38: alert('up key pressed');
//$('#calendar').fullCalendar('incrementDate', 'days:-7');
break;
case 39:
//$('#calendar').fullCalendar('incrementDate', 'days:1');
$('#calendar').fullCalendar('gotoDate','2015-03-19');
$(this).css('background-color', 'red');
break;
case 40: alert('down key pressed');
//$('#calendar').fullCalendar('incrementDate', 'days:7');
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
});
IncrementDate 需要第二个参数的 moment.duration() 对象,而不是构建时刻的字符串。您可以在此处了解如何构建持续时间对象
我认为如果你改变应该可以工作
//$('#calendar').fullCalendar('incrementDate', 'days:7');
自
$('#calendar').fullCalendar('incrementDate', moment.duration(7, 'days'));
相关文章:
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 如果值是日期,则清除相邻单元格的单元格值
- 自动将jqgrid滚动到具有存储数据的单元格的当前日期列和闪烁效果
- 返回两个日期时间单元格之间的差值
- 日历仅对具有日期的单元格进行操作
- 使用jQuery日期选择器编辑单元格时出现AngularJS ngGrid问题
- Kendo ui Grid:标准的HTML5输入日期时间可以用作单元格编辑器吗
- 完整日历 - 读取键盘箭头键并派生与单击日期单元格相同的行为
- jQuery 基于事件类型的单元格的日期选取器背景颜色
- 检查日期并使用谷歌脚本编辑谷歌表格中的相邻单元格
- 从谷歌电子表格检索单元格日期到HTML服务
- Google Apps 脚本 - 根据单元格中的日期发送电子邮件
- 将表格单元格中的日期模式与 jQuery 匹配
- SlickGrid:单元格中具有两个日期字段的复合编辑器
- 如何向 Javascript 表添加一行,其中包含包含 jQuery 中的日期选择器函数的单元格
- 按英国日期对 jQuery 数据表进行排序,忽略空单元格
- 如何对具有空单元格的日期列进行排序
- 如何打印单元格内从1到totalDays的所有日期
- 单元格中日期和日期的单独对齐样式
- JQuery Datepicker -针对特定单元格/日期类型的不同悬停行为