Improve typings

projects/ngx-resource-calendar/src/lib/models/calendar-event.model.ts

@@ -1,7 +1,16 @@
 export class CalendarEventModel<T> {
+  // Event model's original data.
   data: T;
+
+  // Display height in pixels.
   height: number;
+
+  // Y-position on the calendar.
   position: number;
+
+  // Display width in pixels.
   width: string;
+
+  // Left margin.
   left: string;
 }

projects/ngx-resource-calendar/src/lib/models/date-with-resources.model.ts

@@ -0,0 +1,10 @@
+import { DayModel } from './day.model';
+import { InternalResourceModel } from './internal-resource.model';
+
+export interface DateWithEventsModel {
+  // Target date.
+  data: DayModel;
+
+  // Date's resources.
+  resources: InternalResourceModel[];
+}

projects/ngx-resource-calendar/src/lib/models/internal-resource.model.ts

@@ -0,0 +1,8 @@
+import { ResourceModel } from './resource.model';
+import { CalendarEventModel } from './calendar-event.model';
+import { EventModel } from './event.model';
+
+export interface InternalResourceModel extends ResourceModel {
+  data: ResourceModel;
+  events: CalendarEventModel<EventModel>[];
+}

projects/ngx-resource-calendar/src/lib/models/resource.model.ts

@@ -1,6 +1,7 @@
 import { SlotModel } from './slot.model';
+import { CalendarEventModel } from './calendar-event.model';
 
 export class ResourceModel {
   resourceNumber: number | string;
-  slots: SlotModel[];
+  slots: SlotModel[] | CalendarEventModel<SlotModel>[];
 }

projects/ngx-resource-calendar/src/lib/resource-calendar.component.html

@@ -0,0 +1,118 @@
+<div class="header">
+  <div class="hour-row info-block">
+    <ng-template
+      [ngTemplateOutlet]="infoTemplate || defaultInfoTemplate"
+    ></ng-template>
+  </div>
+  <div class="day-row" *ngFor="let date of datesWithEvents">
+    <ng-template
+      [ngTemplateOutlet]="dayTemplate || defaultDayTemplate"
+      [ngTemplateOutletContext]="{ day: date.data }"
+    ></ng-template>
+    <div class="resources">
+      <div
+        class="resource"
+        [style.max-width.%]="100 / date.resources.length"
+        *ngFor="let resource of date.resources"
+      >
+        <ng-template
+          [ngTemplateOutlet]="resourceTemplate || defaultResourceTemplate"
+          [ngTemplateOutletContext]="{ resource: resource.data }"
+        ></ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="calendar">
+  <div class="hour-row">
+    <div *ngFor="let hour of hours">
+      <div class="hour-slot">
+        <div
+          class="hour-sub-slot"
+          [style.height.px]="height"
+          *ngFor="let time of hour.slots"
+        >
+          <ng-template
+            [ngTemplateOutlet]="hourTemplate || defaultHourTemplate"
+            [ngTemplateOutletContext]="{ time }"
+          ></ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div *ngFor="let date of datesWithEvents" class="day-row resources">
+    <ng-template
+      [ngTemplateOutlet]="currentTimeTemplate || defaultCurrentTimeTemplate"
+      [ngTemplateOutletContext]="{ day: date.data }"
+    ></ng-template>
+    <div
+      class="resource"
+      [style.max-width.%]="100 / date.resources.length"
+      *ngFor="let resource of date.resources"
+    >
+      <div *ngFor="let hour of hours">
+        <div class="hour-slot">
+          <div
+            class="hour-sub-slot"
+            [style.height.px]="height"
+            *ngFor="let time of hour.slots"
+          ></div>
+        </div>
+      </div>
+
+      <div
+        *ngFor="let event of resource.events"
+        [style.top.px]="event.position"
+        [style.height.px]="event.height"
+        [style.left]="event.left"
+        [style.width]="event.width"
+        class="event"
+      >
+        <ng-template
+          [ngTemplateOutlet]="eventTemplate || defaultEventTemplate"
+          [ngTemplateOutletContext]="{
+                event: event.data,
+                resource: resource.data,
+                day: date.data
+              }"
+        ></ng-template>
+      </div>
+
+      <div
+        *ngFor="let slot of resource.slots"
+        class="slot"
+        [style.top.px]="slot.position"
+        [style.height.px]="slot.height"
+        [style.left]="slot.left"
+        [style.width]="slot.width"
+      >
+        <ng-template
+          [ngTemplateOutlet]="slotTemplate || defaultSlotTemplate"
+          [ngTemplateOutletContext]="{
+                slot: slot.data,
+                resource: resource.data,
+                day: date.data
+              }"
+        ></ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #defaultInfoTemplate></ng-template>
+<ng-template #defaultDayTemplate let-day="day">{{
+    day.day | date: 'shortDate'
+  }}</ng-template>
+<ng-template #defaultResourceTemplate let-resource="resource">{{
+    resource.resourceNumber
+  }}</ng-template>
+<ng-template #defaultHourTemplate let-time="time">{{
+    time | date: 'shortTime'
+  }}</ng-template>
+<ng-template #defaultCurrentTimeTemplate let-day="day"></ng-template>
+<ng-template #defaultEventTemplate let-event="event">{{
+    event.resourceNumber
+  }}</ng-template>
+<ng-template #defaultSlotTemplate let-slot="slot">{{
+    slot.startTime | date: 'shortTime'
+  }}</ng-template>

projects/ngx-resource-calendar/src/lib/resource-calendar.component.scss

@@ -0,0 +1,57 @@
+.header {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+
+.calendar {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+
+.resources {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: stretch flex-start;
+  align-items: stretch;
+}
+
+.resource {
+  flex: 1 1 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.hour-sub-slot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.hour-row {
+  width: 10%;
+  min-width: 50px;
+}
+
+.day-row {
+  position: relative;
+  width: 90%;
+}
+
+.slot {
+  position: absolute;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.event {
+  position: absolute;
+  z-index: 2;
+  overflow: hidden;
+}