Définition de l'heure de début/fin dans Primeng Schedule

Question

Je voudrais adopter le composant Primeng Schedule https://www.primefaces.org/primeng/#/schedule et je cherche un exemple de dialogue d'éditeur de détails d'événement 'riche'. L'exemple contextuel Primeng 'Détails de l'événement' n'affiche que la date 'aaaa-MM-jj' pour un événement et je dois également pouvoir définir/modifier le début et la fin de l'événement.

Dans l'esprit de 'DRY', je crois que cela a dû être fait par d'autres avant moi! Quelqu'un peut-il me diriger vers un exemple où je peux voir un modèle de travail?

Je vois qu'il y a un ancien échantillon basé sur le composant de jquery de fullcalender sous-jacent qui pourrait être amélioré pour angulaire ici: https://www.alinous.org/web-developer/design-pattern/fullcalendar/. A défaut d'autre chose, je suppose que je pourrais commencer avec ça.

Answer 1

Ok - Je peux maintenant répondre à ma propre question.

Le composant p-calendrier incorporé dans l'exemple de code HTML p-dialog peut être mis à jour pour y remédier en ajoutant l'attribut showTime et en définissant sa valeur sur "true".

La source de l'échantillon HTML https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/schedule/scheduledemo.html peut être modifié pour afficher un sélecteur de temps:

Pour commencer le changement ceci:

<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> 

à ceci:

<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>