如何在渲染Calebdar后滚动到当前一天

Question

我正在使用fullcalendar.io。

日历代码：

if ($(window).width() < 768) {
    columnFormat = 'ddd';
    defaultView = 'listMonth';
    left = 'prev,next';
    right = 'month,listMonth';
} else {
    columnFormat = 'dddd';
    defaultView = 'month';
    left = 'prev';
    right = 'next';
}
$('#calendar').fullCalendar({
    header: {
        left: left,
        center: 'title',
        right: right
    },
    timeFormat: 'H:mm',
    columnFormat: columnFormat,
    defaultView: defaultView,
    events: {
        url: MyAjax.ajaxurl,
        type: 'POST',
        data: {
            action: 'events_list',
            security: MyAjax.security,
        },
    },
    eventClick: function (event, jsEvent, view) {
        if (event.url) {
            window.open(event.url, "_blank");
            return false;
        }
    },
});

请帮助我做。

示例：https：//jewlife.by/

Answer 1

穆罕默德的答案对Fullcalendar的大多数观点都很好，但是可惜的是listMonth视图不支持这种方法跳至当月的特定一天。

相反，您需要通过编程方式滚动到当天。类似以下功能可以正常工作：

// Initialise the calendar
$("#calendar").fullCalendar({
    eventAfterAllRender: function (view) {
        if (view.name === "listMonth") {
            var viewStartDate = $("#calendar").fullCalendar("getDate");
            var target = $(".fc-listMonth-view .fc-list-heading[data-date=" + viewStartDate.format("YYYY-MM-DD") + "]");
            if (target.length) {
                $(".fc-listMonth-view .fc-scroller").scrollTop(target.position().top);
            }
        }
    },
    // Other initial settings here
});

按照FullCalendar v3.9.0。

Answer 2

如果要导航到日历加载后的日期（通过单击按钮，它将日历移至任意日期），则应使用goToDate()。

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

注意： date可以是`矩对象，也可以是构造器接受的任何东西。

，或者如果您喜欢在特定日期加载日历，则应在初始化日历时使用defaultDate选项。

您可以在这里了解更多

$(document).ready(function() {
  var calendar = $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    },
    defaultDate: '2017-11-12',
    defaultView: 'listMonth',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [{
        title: 'Old Day Event',
        start: '2014-05-01'
      }, {
        title: 'All Day Event',
        start: '2017-11-01'
      },
      {
        title: 'Long Event',
        start: '2017-11-07',
        end: '2017-11-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2017-11-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2017-11-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2017-11-11',
        end: '2017-11-13'
      },
      {
        title: 'Meeting',
        start: '2017-11-12T10:30:00',
        end: '2017-11-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2017-11-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2017-11-12T14:30:00'
      },
      {
        title: 'Happy Hour',
        start: '2017-11-12T17:30:00'
      },
      {
        title: 'Dinner',
        start: '2017-11-12T20:00:00'
      },
      {
        title: 'Birthday Party',
        start: '2017-11-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2017-11-28'
      }
    ]
  });
  var local = $.fullCalendar.moment('2014-05-01T12:00:00');
  calendar.fullCalendar('gotoDate', local);
});

#goto {}

<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.print.min.css" rel="stylesheet" />
<p>calendar is navigated to previous date November in 2014 after loading on 2017 by default </p>
<div id='calendar'></div>