如何设置FullCalendar初始化时默认显示下月日历？

嗨，这个需求用FullCalendar官方提供的defaultDate配置项就能完美解决，这也是最简洁直观的最优方案，比你现在手动拆分日期的写法更高效～

核心思路 #

你已经正确计算出了下月1号的日期对象，其实不需要再把它拆分成日、月、年的单独变量，直接将这个日期对象赋值给FullCalendar初始化配置里的defaultDate参数，日历就会自动默认显示该日期所在的月份。

修改后的完整代码 #

$(document).ready(function() { 
  var now = new Date(); 
  // 直接计算出下月1号的日期对象
  var defaultDisplayDate = new Date(now.getFullYear(), now.getMonth() + 1, 1); 

  $('#calendar123').fullCalendar({ 
    displayEventTime: false, 
    // 新增defaultDate配置，设置初始显示的日期
    defaultDate: defaultDisplayDate,
    header: { 
      left: 'prev,next', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
    }, 
    buttonText: { 
      prev: "", 
      next: "", 
      today: 'Today', 
      month: 'Month', 
      week: 'Week', 
      day: 'Day' 
    }, 
    events: [{ 
      title: 'Team Out', 
      // 直接复用已计算好的日期对象，无需拆分
      start: defaultDisplayDate, 
      backgroundColor: ('#01BC8C') 
    }], 
    editable: true, 
    eventLimit: true, 
    droppable: true 
  }); 
});

为什么这是最优方式？ #

• 语义清晰：defaultDate是FullCalendar专门为设置初始显示日期设计的配置项，其他开发者一看就能明白代码意图
• 代码简洁：省去了手动拆分日期为d、m、y变量的步骤，减少冗余代码
• 避免潜在问题：不用手动处理日期索引的细节（比如月份是从0开始的规则），直接传递日期对象更可靠

内容的提问来源于stack exchange，提问作者debrata