create a new component for showing list of NWD

app/views/admin/settings/working_days_settings/show.html.erb

@@ -62,5 +62,7 @@ See COPYRIGHT and LICENSE files for more details.
             label: false %>
     </div>
   </section>
+            <%= angular_component_tag 'op-list-calendar'
+          %>
   <%= styled_button_tag t(:button_save), class: '-highlight -with-icon icon-checkmark' %>
 <% end %>

frontend/package.json

@@ -98,14 +98,15 @@
     "@appsignal/plugin-breadcrumbs-console": "^1.1.24",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.21",
     "@datorama/akita": "^6.2.0",
-    "@fullcalendar/angular": "5.10.1",
-    "@fullcalendar/common": "^5.10.1",
-    "@fullcalendar/core": "5.10.1",
-    "@fullcalendar/daygrid": "5.10.1",
-    "@fullcalendar/interaction": "5.10.1",
-    "@fullcalendar/resource-common": "^5.10.1",
-    "@fullcalendar/resource-timeline": "5.10.1",
-    "@fullcalendar/timegrid": "5.10.1",
+    "@fullcalendar/angular": "^5.11.3",
+    "@fullcalendar/common": "^5.11.3",
+    "@fullcalendar/core": "^5.11.3",
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/list": "^5.11.3",
+    "@fullcalendar/resource-common": "^5.11.3",
+    "@fullcalendar/resource-timeline": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
     "@kolkov/ngx-gallery": "^1.0.11",
     "@ng-select/ng-option-highlight": "0.0.5",
     "@ng-select/ng-select": "^4.0.4",

frontend/src/app/core/setup/global-dynamic-components.const.ts

@@ -162,6 +162,9 @@ import {
   EnterprisePageComponent,
   enterprisePageSelector,
 } from 'core-app/shared/components/enterprise-page/enterprise-page.component';
+import {
+  OpListCalendarComponent,
+  listCalendarSelector,} from 'core-app/shared/components/op-list-calendar/op-list-calendar.component'
 import {
   EEActiveSavedTrialComponent,
   enterpriseActiveSavedTrialSelector,
@@ -238,6 +241,7 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [
   { selector: globalSearchSelector, cls: GlobalSearchInputComponent },
   { selector: collapsibleSectionAugmentSelector, cls: CollapsibleSectionComponent },
   { selector: enterpriseBannerSelector, cls: EnterpriseBannerComponent },
+  { selector: listCalendarSelector, cls: OpListCalendarComponent },
   { selector: enterprisePageSelector, cls: EnterprisePageComponent },
   { selector: noResultsSelector, cls: NoResultsComponent },
   { selector: enterpriseBaseSelector, cls: EnterpriseBaseComponent },

frontend/src/app/shared/components/op-list-calendar/op-list-calendar.component.html

@@ -0,0 +1,12 @@
+<div
+  class="op-list-calendar"
+  data-qa-selector="op-list-calendar"
+>
+
+  <full-calendar
+  #ucCalendar
+    *ngIf="calendarOptions"
+    [options]="calendarOptions"
+    class="op-team-planner--calendar fc-scroller"
+  ></full-calendar>
+</div>

frontend/src/app/shared/components/op-list-calendar/op-list-calendar.component.ts

@@ -0,0 +1,98 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Injector,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { BannersService } from 'core-app/core/enterprise/banners.service';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { OpModalService } from '../modal/modal.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
+import {
+  CalendarOptions,
+  DayCellMountArg,
+  DayHeaderMountArg,
+  Duration,
+  EventApi,
+  EventInput,
+} from '@fullcalendar/core';
+import listPlugin from '@fullcalendar/list';
+import { CollectionResource } from 'core-app/features/hal/resources/collection-resource';
+import { TimeEntryResource } from 'core-app/features/hal/resources/time-entry-resource';
+import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
+import { FullCalendarComponent } from '@fullcalendar/angular';
+import { DayResourceService }  from 'core-app/core/state/days/day.service';
+import { IDay } from 'core-app/core/state/days/day.model';
+
+export const listCalendarSelector = 'op-list-calendar';
+
+@Component({
+  selector: listCalendarSelector,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./op-list-calendar.component.sass'],
+  templateUrl: './op-list-calendar.component.html',
+})
+export class OpListCalendarComponent implements OnInit {
+
+  @ViewChild(FullCalendarComponent) ucCalendar:FullCalendarComponent;
+  
+  protected memoizedTimeEntries:{ start:Date, end:Date, entries:Promise<CollectionResource<TimeEntryResource>> };
+  calendarOptions:CalendarOptions = {
+    
+    plugins: [ listPlugin ],
+    initialView: 'listYear',
+    editable: false,
+    fixedWeekCount: false,
+    height: 550,
+    headerToolbar: {
+      right: 'prev,next',
+      center: '',
+      left: 'title',
+    },
+  
+    events: this.calendarEventsFunction.bind(this),
+  };
+  nonWorkingDays : IDay[];
+  constructor(
+    readonly elementRef:ElementRef,
+    protected I18n:I18nService,
+    protected bannersService:BannersService,
+    protected opModalService:OpModalService,
+    readonly injector:Injector,
+    readonly pathHelper:PathHelperService,
+    readonly apiV3Service:ApiV3Service,
+    readonly dayService:DayResourceService,
+  ) {
+    populateInputsFromDataset(this);
+  }
+
+  ngOnInit():void {
+  
+  }
+
+  public calendarEventsFunction(
+    successCallback:(events:EventInput[]) => void,
+    failureCallback:(error:unknown) => void,
+  ):void|PromiseLike<EventInput[]> {
+    const today = moment().startOf('day').toDate();
+    this.dayService.requireNonWorkingYear$(today).toPromise()
+      .then((collection) => {
+        
+        successCallback(this.mapToCalendarEvents(collection));
+      })
+      .catch(failureCallback);
+  }
+
+
+  private mapToCalendarEvents(nonWorkingDays:IDay[]) {
+    return nonWorkingDays.map((NWD:IDay) => {
+      return {
+        title: NWD.name,
+        start: NWD.date,
+      };
+    }).filter((event) => !!event) as EventInput[];
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -86,8 +86,10 @@ import { OpSidemenuComponent } from './components/sidemenu/sidemenu.component';
 import { OpProjectIncludeComponent } from './components/project-include/project-include.component';
 import { OpProjectIncludeListComponent } from './components/project-include/list/project-include-list.component';
 import { OpLoadingProjectListComponent } from './components/searchable-project-list/loading-project-list.component';
+import { OpListCalendarComponent } from './components/op-list-calendar/op-list-calendar.component';
 import { ViewsResourceService } from 'core-app/core/state/views/views.service';
 import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
+import { FullCalendarModule } from '@fullcalendar/angular';
 
 export function bootstrapModule(injector:Injector):void {
   // Ensure error reporter is run
@@ -135,6 +137,7 @@ export function bootstrapModule(injector:Injector):void {
     FocusModule,
     IconModule,
     AttributeHelpTextModule,
+    FullCalendarModule,
   ],
   exports: [
     // Re-export all commonly used
@@ -196,6 +199,8 @@ export function bootstrapModule(injector:Injector):void {
     OpLoadingProjectListComponent,
 
     ViewSelectComponent,
+
+    OpListCalendarComponent,
   ],
   providers: [
     StaticQueriesService,
@@ -250,6 +255,8 @@ export function bootstrapModule(injector:Injector):void {
     OpProjectIncludeComponent,
     OpProjectIncludeListComponent,
     OpLoadingProjectListComponent,
+
+    OpListCalendarComponent,
   ],
 })
 export class OPSharedModule {