如何在TUI Calendar中配置每日视图仅显示9:00-18:00时段？

你当前的代码仅配置了周视图（week）的显示时段范围，每日视图（day view）需要单独配置对应参数才能生效。

只需在Calendar初始化配置中，新增day配置项并设置hourStart和hourEnd即可：

var Calendar = tui.Calendar;
var calendar = new Calendar('#calendar', {
   // 周视图时段配置
   week: {
       hourStart: 9,
       hourEnd: 18
   },
   // 新增每日视图时段配置
   day: {
       hourStart: 9,
       hourEnd: 18
   },
   defaultView: 'week',
   taskView: false,
   useCreationPopup: false,
   useDetailPopup: true,
   allDaySlot: false,
   droppable: false,
   template: {
     monthDayname: function(dayname) {
       return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
     }
   }
});

document.getElementById('my-today-button').addEventListener('click', function() {
  calendar.today();
});
document.getElementById('my-next-button').addEventListener('click', function() {
  calendar.next();
});
document.getElementById('my-prev-button').addEventListener('click', function() {
  calendar.prev();
});
document.getElementById('weekView').addEventListener('click', function() {
  calendar.changeView('week', true);
});
document.getElementById('monthView').addEventListener('click', function() {
  calendar.changeView('month', true);
});
// 若需切换每日视图，可添加如下事件监听（需页面存在对应ID的按钮）
document.getElementById('dayView').addEventListener('click', function() {
  calendar.changeView('day', true);
});

说明：

• 新增的day配置对象会专门控制每日视图的显示时段，设置完成后切换到每日视图时，就只会展示9:00至18:00的时间段。
• 如果页面没有切换到每日视图的按钮，可以参考代码末尾新增的事件监听逻辑，搭配页面上的对应按钮使用。

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