最初在全日历中加载上个月或给定的开始和结束日期

Question

>我在我的页面中使用了全日历。我已经导入了必要的软件包。当我加载页面时，它在全日历视图中显示当前月份日历。但是我想最初在完整的日历视图中显示上个月或给定的开始和结束日期。谁能帮我做到这一点。

(function() {
    var cal, calendarDate, d, m, y;
    this.setDraggableEvents = function() {
      return $("#events .external-event").each(function() {
        var eventObject;
        eventObject = {
          title: $.trim($(this).text())
        };
        $(this).data("eventObject", eventObject);
        return $(this).draggable({
          zIndex: 999,
          revert: true,
          revertDuration: 0
        });
      });
    };
    calendarDate = new Date();
    d = calendarDate.getDate();
    m = calendarDate.getMonth();
    y = calendarDate.getFullYear();
    cal = $(".full-calendar-demo").fullCalendar({
      header: {
        center: "title",
        left: "month,agendaWeek,agendaDay,listWeek",
        right: "prev,today,next"
      },
      buttonIcons: {
        prev: "fa-chevron-left",
        next: "fa-chevron-right"
      },
      buttonText: {
        today: "Today",
        agendaDay: "Day",
        agendaWeek: "Week",
        month: "Month",
        listWeek: "List"
      },
      droppable: true,
      editable: true,
      selectable: true,
      select: function(start, end, allDay) {
        return bootbox.prompt("Event title", function(title) {
          if (title !== null) {
            cal.fullCalendar("renderEvent", {
              title: title,
              start: start,
              end: end,
              allDay: allDay
            }, true);
            return cal.fullCalendar('unselect');
          }
        });
      },
      eventClick: function(calEvent, jsEvent, view) {
        return bootbox.dialog({
          message: $("<form class='form'><label>Change event name</label></form><input id='new-event-title' class='form-control' type='text' value='" + calEvent.title + "' /> "),
          buttons: {
            "delete": {
              label: "<i class='fa fa-trash-o'></i> Delete Event",
              className: "pull-left",
              callback: function() {
                return cal.fullCalendar("removeEvents", function(ev) {
                  return ev._id === calEvent._id;
                });
              }
            },
            success: {
              label: "<i class='fa fa-floppy-o'></i> Save",
              className: "btn-success",
              callback: function() {
                calEvent.title = $("#new-event-title").val();
                return cal.fullCalendar('updateEvent', calEvent);
              }
            }
          }
        });
      },
      drop: function(date, allDay) {
        var copiedEventObject, eventClass, originalEventObject;
        originalEventObject = $(this).data("eventObject");
        originalEventObject.id = Math.floor(Math.random() * 99999);
        eventClass = $(this).attr('data-event-class');
        console.log(originalEventObject);
        copiedEventObject = $.extend({}, originalEventObject);
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;
        if (eventClass) {
          copiedEventObject["className"] = [eventClass];
        }
        $(".full-calendar-demo").fullCalendar("renderEvent", copiedEventObject, true);
        if ($("#calendar-remove-after-drop").is(":checked")) {
          return $(this).remove();
        }
      },
      events: [
        {
          id: "event1",
          title: "All Day Event",
          start: moment().startOf('month').format('YYYY-MM-DD'),
          className: 'event-orange'
        }, {
          id: "event2",
          title: "Long Event",
          start: moment().subtract(5, 'day').format('YYYY-MM-DD'),
          end: moment().subtract(1, 'day').format('YYYY-MM-DD'),
          className: "event-red"
        },
      ]
    });
  });

请查看上面的代码并帮助我做到这一点。

Answer 1

使用 defaultDate 指定开始日期。

// Use moment to get the date 1 month ago (Fullcalendar uses moment, you already 
// have it available)
var startDate = moment().subtract(1, 'month');
$('#calendar').fullCalendar({
    defaultDate: startDate
});