页眉中带有 p-selectButton 的 p 日历

Question

我正在做某种仪表板，我需要使用 p-日历过滤一些内容。我想让这个组件看起来像另一个组件：

正如您所看到的，第一个中的问题是元素 p-selectButton，它占用了太多空间。我真的不需要它更小，我只是希望它适合在线。日历组件变宽并不重要，我认为这比减少 selectButton 组件更好。

这是我的代码：

<p-calendar [view]='calendarView'>
  <ng-template pTemplate='header'>
    <p-selectButton [options]='timeViewOpions' [(ngModel)]='timeView' [multiple]='false' optionLabel='name'
                    optionValue='value' (onChange)='onTimeViewChange()'></p-selectButton>
  </ng-template>
</p-calendar>

如果你能以某种方式帮助我实现它的功能，那就太好了。主要问题是 p-SelectButton 的显示，但如果您能帮助我解决该功能，那就太好了！非常感谢你

Answer 1

解决方案是添加 styleClass flex

<p-calendar [view]='calendarView'>
  <ng-template pTemplate='header'>
    <p-selectButton [options]='timeViewOpions' [(ngModel)]='timeView' [multiple]='false' optionLabel='name'
                    optionValue='value' (onChange)='onTimeViewChange()' styleClass='flex'></p-selectButton>
  </ng-template>
</p-calendar>