使用周号跳转到/显示日历中的特定周
Jump to/show specific week in calendar by using week number
是否有可能使用周号跳转到/显示特定的周?例如,如果我想显示第43周,有什么方法可以做到吗?
我知道如何使用goToDate
选项,然后将视图更改为周,但有可能使用周号吗?
我在如何在Javascript中将周数转换为日期中找到了相关函数。有了它,只需要通过年份和周数,它就会返回一个格式正确的日期对象:
var gotoweek = firstDayOfWeek( date.year(), date.weeks() );
$('#mycalendar').fullCalendar( 'gotoDate', gotoweek );
在下面的例子中,点击任何一天都会进入相对周数的周视图:
// Create a date object based on year and week number
// https://stackoverflow.com/a/19375264/1287812
function firstDayOfWeek( year, week ) {
// Jan 1 of 'year'
var d = new Date(year, 0, 1),
offset = d.getTimezoneOffset();
// ISO: week 1 is the one with the year's first Thursday
// so nearest Thursday: current date + 4 - current day number
// Sunday is converted from 0 to 7
d.setDate(d.getDate() + 4 - (d.getDay() || 7));
// 7 days * (week - overlapping first week)
d.setTime(d.getTime() + 7 * 24 * 60 * 60 * 1000 * (week + (year == d.getFullYear() ? -1 : 0)));
// daylight savings fix
d.setTime(d.getTime() + (d.getTimezoneOffset() - offset) * 60 * 1000);
// back to Monday (from Thursday)
d.setDate(d.getDate() - 3);
return d;
}
$('#mycalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month agendaWeek agendaDay'
},
weekNumbers: true,
dayClick: function(date, jsEvent, view) {
var gotoweek = firstDayOfWeek( date.year(), date.weeks() );
$('#mycalendar').fullCalendar( 'gotoDate', gotoweek );
$('#mycalendar').fullCalendar( 'changeView', 'agendaWeek' );
},
events: [{
title: 'Click me 1',
msg: 'I am clipped to the left which is annoying',
start: '2014-09-01 06:00:00',
end: '2014-09-01 08:00:00',
editable: false,
allDay: false
}, {
title: 'Click me 2',
msg: 'I am OK',
start: '2014-09-04 14:00:00',
end: '2014-09-04 15:00:00',
editable: false,
allDay: false
}]
});
#mycalendar {
margin: 30px;
height: 500px;
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<div id="mycalendar"></div>
相关文章:
- 如何在完整日历中的当天点击时显示活动详细信息
- 日历显示不正确
- php:两个日历没有显示
- 完整日历 (v2) 在每周视图槽的顶部显示弹出框
- 使用完整日历在网站上获取并显示来自Google日历事件的附加图像
- Angular Material DatePicker日历显示在Angular Modal后面
- jQuery-克隆的日期选择器日历未显示在日期选择器字段旁边
- 完整日历未显示在引导模式中
- 水平日历今天的日期以纯javascript突出显示
- 谷歌日历订阅源未显示事件
- Jqueryui日期选择器不显示日历
- 为什么浏览器不't显示我的日历
- 日历显示 24 小时制,我需要 12 小时制
- jQuery UI 日历显示加载事件
- 完整日历显示更多来自javascript的事件并显示这些事件
- 不能通过日历显示iCal提要
- 使用完整日历显示不同颜色的多个事件
- 我如何得到完整的日历显示日历在初始渲染
- 如何使用完整日历显示当前日期
- JavaScript日期选择器/日历-显示错误的当前日期