Angular @obliczeniowo/elementary - własny komponent kalendarza

Stronę tą wyświetlono już: 1448 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
  1. <app-month-control #monthControl style="width: 320px"></app-month-control>
  2. <app-calendar [monthControl]="monthControl" [eventsList]="eventsList ? eventsList : null"></app-calendar>
  3. <app-events-list #eventsList>
  4. <app-calendar-event *ngFor="let event of eventsListData" [eventSettings]="event" ngProjectAs="eventslist">
  5. <h3 ngProjectAs="title" [style.backgroundColor]="event.color" style="display: inherit" fxFlex> {{ event.title }} </h3>
  6. <div ngProjectAs="body" fxFlex="100" style="min-height: 50px; padding: 5px">{{ event.body }} </div>
  7. </app-calendar-event>
  8. </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

Komentarze