feat: support custom date point style #INFR-5801 (#287)

* feat: support custom date point style #INFR-5801 * fix: change secondary-text-today and primary-text-today to today
worktile · Dec 20, 2022 · 3642100 · 3642100
1 parent c77f9ef
commit 3642100
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/example/src/app/gantt-custom-view/custom-day-view.ts b/example/src/app/gantt-custom-view/custom-day-view.ts
@@ -77,6 +77,12 @@ export class GanttViewCustom extends GanttView {
                     isToday: start.isToday()
                 }
             );
+            if (isWeekend) {
+                point.style = { fill: '#ff9f73' };
+            }
+            if (start.isToday()) {
+                point.style = { fill: '#ff9f73' };
+            }
             points.push(point);
         }
         if (!this.options.showWeekend) {
@@ -106,6 +112,12 @@ export class GanttViewCustom extends GanttView {
                     isToday: start.isToday()
                 }
             );
+            if (isWeekend) {
+                point.style = { fill: '#ff9f73' };
+            }
+            if (start.isToday()) {
+                point.style = { fill: '#ff9f73' };
+            }
             points.push(point);
         }
 

diff --git a/packages/gantt/src/class/date-point.ts b/packages/gantt/src/class/date-point.ts
@@ -9,6 +9,7 @@ export class GanttDatePoint {
         public additions?: {
             isWeekend: boolean;
             isToday: boolean;
-        }
+        },
+        public style?: Partial<CSSStyleDeclaration>
     ) {}
 }
diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html
@@ -5,11 +5,25 @@
 
 <svg class="gantt-calendar-overlay-main" [attr.width]="view.width" [attr.height]="headerHeight">
   <g>
-    <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">
+    <text
+      class="primary-text"
+      [ngStyle]="point.style"
+      [class.today]="point.additions?.isToday"
+      *ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
+      [attr.x]="point.x"
+      [attr.y]="point.y"
+    >
       {{ point.text }}
     </text>
     <ng-container *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy">
-      <text class="secondary-text" [class.secondary-text-weekend]="point.additions?.isWeekend" [attr.x]="point.x" [attr.y]="point.y">
+      <text
+        class="secondary-text"
+        [ngStyle]="point.style"
+        [class.today]="point.additions?.isToday"
+        [class.secondary-text-weekend]="point.additions?.isWeekend"
+        [attr.x]="point.x"
+        [attr.y]="point.y"
+      >
         {{ point.text }}
       </text>
     </ng-container>