angular-calendar-scheduler小时列不显示分钟的问题解决需求

问题分析 #

你的周视图小时列仅显示小时数，无法展示时分格式（如6:00、6:15），核心原因集中在三个配置细节上：

• showSegmentHour属性关闭导致分段时间标签不显示
• 未明确指定小时格式化规则
• Locale配置不一致且未注册目标语言的本地化数据

解决方案 #

1. 开启分段小时显示 #

你当前视图中设置了[showSegmentHour]="false"，该属性控制是否显示每个小时分段的时间标签。当hourSegments设为4（即每15分钟一个分段）时，关闭该属性只会显示整小时标签。将其改为true即可显示每个分段的时分：

<calendar-scheduler-view
  <!-- 其他属性保持不变 -->
  [showSegmentHour]="true"
>
</calendar-scheduler-view>

2. 指定小时格式化格式 #

添加hourFormat输入属性，强制设置时分显示格式，确保无论locale如何都能展示完整的时分：

<calendar-scheduler-view
  <!-- 其他属性保持不变 -->
  [hourFormat]="'HH:mm'"
>
</calendar-scheduler-view>

若需要12小时制（如6:00 AM），可改为'hh:mm A'。

3. 统一Locale配置并注册本地化数据 #

你的组件中设置了locale = 'pt-BR'，但核心模块仅注册了英文本地化数据，且LOCALE_ID设为'en-US'，这会导致时间格式化异常：

• 导入并注册葡萄牙语（巴西）的本地化数据：

// 导入Angular和Moment的pt-BR本地化资源
import localePt from '@angular/common/locales/pt';
import 'moment/locale/pt-br';
import { registerLocaleData } from '@angular/common';

// 注册本地化数据
registerLocaleData(localePt);
registerLocaleData(localeEn); // 保留英文数据（若需兼容多语言）

• 同步核心模块的LOCALE_ID配置：

@NgModule({
  // 其他配置不变
  providers: [
    // 替换原LOCALE_ID配置
    { provide: LOCALE_ID, useValue: 'pt-BR' },
    // 其他providers保持不变
  ],
})
export class LibrariesCoreUtilsModule {}

4. 触发视图刷新 #

修改配置后，通过refresh Subject触发视图更新：

this.refresh.next(null);

内容的提问来源于stack exchange，提问作者Flávio Costa