Question

我想采用Primeng Schedule组件https://www.primefaces.org/primeng/#/schedule，我正在寻找一个“丰富的”事件详细信息编辑器对话框的示例。 Primeng'事件详细信息'弹出式示例仅显示事件的日期'yyyy-MM-dd'，我还需要能够设置/编辑事件的开始和结束时间。

本着“干”的精神，我相信这一定是在我之前做过的！任何人都能指出一个我可以看到工作模型的例子吗？

我看到有一个基于底层fullcalender jquery组件的旧样本，可以在这里升级为angular： https://www.alinous.org/web-developer/design-pattern/fullcalendar/。失败了所有其他我想我可以从那开始。

Answer 1

好的 - 我现在可以回答我自己的问题了。

可以通过添加showTime属性并将其值设置为“true”来更新p对话框HTML示例代码中的嵌入式p-calendar组件以适应这种情况。

可以修改示例HTML https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/schedule/scheduledemo.html的来源以显示时间选择器：

要开始改变这个：

<div class="ui-grid-row">
    <div class="ui-grid-col-4"><label for="start">Start</label></div>
    <div class="ui-grid-col-8"><p-calendar [(ngModel)]="event.start" dateFormat="yy-mm-dd" dataType="string"></p-calendar></div>
</div>

对此：

<div class="ui-grid-row">
    <div class="ui-grid-col-4"><label for="start">Start</label></div>
    <div class="ui-grid-col-8"><p-calendar [(ngModel)]="event.start" dateFormat="yy-mm-dd" showTime="true" dataType="string"></p-calendar></div>
</div>

在Primeng Schedule中设置开始/结束时间

1 个答案: