Angular @obliczeniowo/elementary - własny komponent kalendarza

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3285 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:

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