如何按指定日期或日期范围加载TOAST UI Calendar

嘿，这个问题我之前帮好几个开发者解决过，TOAST UI Calendar默认确实会加载今日日期，但调整起来很简单，分两种常见场景给你说清楚：

一、初始化时指定单个初始显示日期 #

在创建Calendar实例的时候，直接通过defaultDate配置项传入你想要的日期（格式必须是YYYY-MM-DD），日历就会默认跳转到这个日期对应的视图：

// 基础JS版本示例
const calendar = new tui.Calendar('#calendar', {
  defaultDate: '2024-05-15', // 替换成你需要的初始日期
  views: ['day', 'week', 'month'], // 启用的视图类型
  // 其他你的自定义配置（比如模板、日程数据源等）
});

如果是用React/Vue的封装组件，配置逻辑一样，只是写法略有不同：

// React版本示例
import Calendar from '@toast-ui/react-calendar';

function CustomCalendar() {
  return (
    <Calendar
      defaultDate="2024-05-15"
      views={['day', 'week', 'month']}
      // 其他组件props
    />
  );
}

二、加载指定日期范围的日程并同步视图 #

如果你需要加载某个日期区间内的日程，同时让日历自动显示这个范围，可以结合setDate和fetchEvents方法：

const calendar = new tui.Calendar('#calendar', {
  defaultDate: '2024-05-01', // 先把视图锚定到范围的起始日期附近
  views: ['month'],
});

// 加载2024年5月整月的日程
calendar.fetchEvents(
  '2024-05-01', // 范围起始日期
  '2024-05-31'  // 范围结束日期
);

// 如果需要强制跳转到范围的某一天，再调用setDate
calendar.setDate('2024-05-10');

小提示 #

• 日期格式必须严格遵循YYYY-MM-DD，否则组件会识别失败，还是默认加载今日
• 如果是周视图，设置defaultDate为目标周的任意一天，日历就会自动显示该周的完整视图
• 动态切换日期范围时，随时调用calendar.setDate('目标日期')就能更新视图显示

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