feat(weekView): add support for minute level precision on week view events

Author: Matt Lewis

demos/demo-app.module.ts

@@ -41,6 +41,7 @@ import * as refreshingTheView from './demo-modules/refreshing-the-view';
 import * as customTemplates from './demo-modules/custom-templates';
 import * as groupMonthViewEvents from './demo-modules/group-month-view-events';
 import * as contextMenu from './demo-modules/context-menu';
+import * as weekViewMinutePrecision from './demo-modules/week-view-minute-precision';
 
 @NgModule({
   declarations: [DemoAppComponent],
@@ -78,6 +79,7 @@ import * as contextMenu from './demo-modules/context-menu';
     customTemplates.DemoModule,
     groupMonthViewEvents.DemoModule,
     contextMenu.DemoModule,
+    weekViewMinutePrecision.DemoModule,
     RouterModule.forRoot([{
       path: 'kitchen-sink',
       component: kitchenSink.DemoComponent,
@@ -252,6 +254,12 @@ import * as contextMenu from './demo-modules/context-menu';
       data: {
         label: 'Context menu'
       }
+    }, {
+      path: 'week-view-minute-precision',
+      component: weekViewMinutePrecision.DemoComponent,
+      data: {
+        label: 'Week view minute precision'
+      }
     }, {
       path: '**',
       redirectTo: 'kitchen-sink'

demos/demo-modules/week-view-minute-precision/component.ts

@@ -0,0 +1,32 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CalendarEvent } from 'angular-calendar';
+import { addDays, addHours, startOfDay } from 'date-fns';
+import { colors } from '../demo-utils/colors';
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'template.html',
+})
+export class DemoComponent {
+
+  viewDate: Date = new Date();
+
+  events: CalendarEvent[] = [{
+    start: addHours(startOfDay(new Date()), 5),
+    end: addHours(startOfDay(new Date()), 17),
+    title: 'Event 1',
+    color: colors.red
+  }, {
+    start: addHours(startOfDay(addDays(new Date(), 1)), 2),
+    end: addHours(startOfDay(addDays(new Date(), 1)), 18),
+    title: 'Event 2',
+    color: colors.blue
+  }, {
+    start: addHours(startOfDay(new Date()), 8),
+    title: 'Event 3',
+    color: colors.blue
+  }];
+
+}
+

demos/demo-modules/week-view-minute-precision/index.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './component';

demos/demo-modules/week-view-minute-precision/module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CalendarModule } from 'angular-calendar';
+import { DemoUtilsModule } from '../demo-utils/module';
+import { DemoComponent } from './component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CalendarModule.forRoot(),
+    DemoUtilsModule
+  ],
+  declarations: [
+    DemoComponent
+  ],
+  exports: [
+    DemoComponent
+  ]
+})
+export class DemoModule {}

demos/demo-modules/week-view-minute-precision/template.html

@@ -0,0 +1,5 @@
+<mwl-calendar-week-view
+  precision="minutes"
+  [viewDate]="viewDate"
+  [events]="events">
+</mwl-calendar-week-view>

package.json

@@ -142,7 +142,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^1.0.1",
     "angular-resizable-element": "^1.0.0",
-    "calendar-utils": "0.0.45",
+    "calendar-utils": "0.0.46",
     "date-fns": "^1.15.1",
     "positioning": "^1.0.4"
   }

src/components/week/calendarWeekView.component.ts

@@ -127,6 +127,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() eventTemplate: TemplateRef<any>;
 
+  /**
+   * The precision to display events.
+   * `days` will round event start and end dates to the nearest day and `minutes` will not do this rounding
+   */
+  @Input() precision: 'days' | 'minutes' = 'days';
+
   /**
    * Called when a header week day is clicked
    */
@@ -320,7 +326,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       events: this.events,
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
-      excluded: this.excludeDays
+      excluded: this.excludeDays,
+      precision: this.precision
     });
   }
 

yarn.lock

@@ -762,9 +762,9 @@ cachedir@^1.1.0:
   dependencies:
     os-homedir "^1.0.1"
 
-[email protected].45:
-  version "0.0.45"
-  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.45.tgz#ebe2e29250367c5eeb420340c6b1ebbad7a5e078"
+[email protected].46:
+  version "0.0.46"
+  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.46.tgz#4d5cc1c6b3dd375b03395556eb6d34ff845bf82e"
 
 [email protected]:
   version "1.0.0"