tui-calendar templates配置不生效 自定义详情弹窗按钮文案未生效

核心问题原因 #

你配置的popupEdit、popupDelete模板，是对应日程创建/编辑弹窗的按钮文案，并不是开启useDetailPopup后弹出的「日程详情弹窗」的生效配置。两类弹窗的自定义模板键名完全独立，键名和实际需求不匹配时，组件会直接使用默认内置文案，不会调用你编写的自定义函数。

分步修正方案 #

• 替换详情弹窗对应的正确模板键名
  把原来的templates配置调整为详情弹窗专用的配置项：

  var templates = {
    // 详情弹窗的编辑按钮
    detailPopupEditButton: function() {
      return 'Edit Me';
    },
    // 详情弹窗的删除按钮
    detailPopupDeleteButton: function() {
      return 'Delete Me';
    }
  }
  

  说明：popupEdit、popupDelete这两个键仅在用户点击编辑按钮、打开正式的日程编辑表单弹窗时才会生效，用于修改表单弹窗内的操作按钮文案，和首次点击日程弹出的轻量化详情弹窗无关。

• 修复代码中的隐藏运行时错误
  现有代码中calendar = new CalendarInfo()的写法存在问题，CalendarInfo不是tui-calendar内置的构造类，项目依赖中也没有引入对应实现，这行代码会直接抛出CalendarInfo is not defined的控制台错误，可能中断后续日历配置的执行逻辑。
  修正为普通对象定义即可，不需要额外调用构造函数：

  var CalendarList = [];
  var calendar = {
    id: 1,
    calendarId: String(1),
    name: 'Subject',
    color: '#ffffff', // 原配置的color值缺少#号，会导致日程文字颜色渲染异常
    bgColor: '#9e5fff'
  };
  CalendarList.push(calendar);
  _cal.setCalendars(CalendarList);
  

• 验证模板触发链路
  可以在自定义模板函数内添加打印语句，比如在detailPopupEditButton函数中加console.log('自定义编辑模板触发')，如果点击日程弹出详情弹窗时控制台没有对应输出，依次排查：
  • 确认当前引入的tui-calendar版本是否支持详情弹窗按钮自定义，很早的1.0.x早期版本不开放这部分配置，需要升级到稳定的1.5+或2.x版本
  • 不同大版本的tui-calendar对详情弹窗的模板键定义存在差异，需要匹配当前引入版本的官方定义
  • 确保templates配置在日历初始化时已经作为初始参数完整传入，不要在日历实例创建完成后才赋值模板对象

其他易踩注意事项 #

• 模板函数的返回值需要为字符串，不要返回undefined或未定义的内容
• 如果需要动态更新模板，要调用日历实例提供的setTemplates方法，不要直接修改初始化时传入的原对象
• 确保日历初始化的DOM节点已经在页面加载完成后挂载，你当前把初始化逻辑放在$(document).ready中的写法是符合要求的

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