Question

我正在使用fullcalendar。有视图可以列出所有事件。点击它将转到日历视图的活动。我有一些反复发生的事件在名单上。现在，当我点击一个重复出现的事件时，我想要它转到日历日视图并显示当前日期之后的第一个事件以及当天的事件。

希望我已经解释得很好。这可能吗？

...等待

先谢谢。

Answer 1

您是否尝试将defaultDate设置为日历中的第一个事件？ Docs from fullcalendar.io here

以下是完整的示例：

请参阅此处演示示例：https://output.jsbin.com/veceri

https://jsbin.com/veceri/edit?html,js

<强> HTML：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>  <link rel="stylesheet" type="text/css" href="//fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
  <script type="text/javascript" src="//fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
  <script type="text/javascript" src="//fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>

<强> JavaScript的：

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var events_array = [
    {
        title: 'All Day Event',
        start: new Date(2012, 7, 3)
    },
    {
        title: 'Long Event',
        start: new Date(2012, 7, 1)
    },
    {
        title: 'Long Event2',
        start: new Date(2017, 6, 1)
    },
    {
        title: 'Long Event1',
        start: new Date(2017, 6, 5)
    }
    ]
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: events_array
    });

    var dateObj = new Date();
    var month = dateObj.getUTCMonth() + 1; //months from 1-12
    var day = dateObj.getUTCDate();
    var year = dateObj.getUTCFullYear();

    events_array.sort(function(x, y){
        return new Date(year, month, day).getTime() -  new Date(x.start).getTime();
    });

    $('#calendar').fullCalendar('gotoDate', events_array[0].start);

});

在fullcalendar上显示当前日期之后的第一个事件

1 个答案: