Angular @obliczeniowo/elementary - własny komponent kalendarza

Stronę tą wyświetlono już: 1659 razy

Kolejny komponent Angula-rowy komponent mojego autorstwa będący kalendarzem o łudząco podobnym (przynajmniej po części) wyglądzie do tego z Windows-a 10. Oto ten komponent:

Działa już zmiana miesiąca za pomocą strzałek oraz dodawanie wydarzeń do kalendarza.

Utworzenie komponentu kalendarza wygląda następująco:

Listing 1

<app-month-control #monthControl style="width: 320px"></app-month-control>
<app-calendar [monthControl]="monthControl" [eventsList]="eventsList ? eventsList : null"></app-calendar>
<app-events-list #eventsList>
<app-calendar-event *ngFor="let event of eventsListData" [eventSettings]="event" ngProjectAs="eventslist">
<h3 ngProjectAs="title" [style.backgroundColor]="event.color" style="display: inherit" fxFlex> {{ event.title }} </h3>
<div ngProjectAs="body" fxFlex="100" style="min-height: 50px; padding: 5px">{{ event.body }} </div>
</app-calendar-event>
</app-events-list>

Znacznik app-month-control wstawia komponent odpowiedzialny za przełączanie miesiąca oraz wyświetlanie miesiąca i roku. Za pomocą referencji przekazywany zostaje do wnętrza komponentu CalendarComponent (selektor app-calendar. Do kalendarza można podpiąć listę wydarzeń, które również są generowane zewnętrznie w komponencie CalendarEventComponent. Ten komponent jest również jest podpinany do kalendarza za pomocą referencji. Wewnątrz znacznika listy zdarzeń app-events-list są iteracyjnie tworzone elementy komponentu app-calendar-event.

Propozycje książek