docs(examples): add example of how to drag to create week view events

Closes #719

Author: mattlewis92

src/app/demo-app.module.ts

@@ -273,6 +273,14 @@ import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/mod
             label: 'Day view scheduler'
           }
         },
+        {
+          path: 'drag-to-create-events',
+          loadChildren:
+            './demo-modules/drag-to-create-events/module#DemoModule',
+          data: {
+            label: 'Drag to create events'
+          }
+        },
         {
           path: '**',
           redirectTo: 'kitchen-sink'

src/app/demo-modules/drag-to-create-events/component.ts

@@ -0,0 +1,119 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ViewEncapsulation
+} from '@angular/core';
+import {
+  CalendarEvent,
+  CalendarEventTitleFormatter,
+  CalendarView
+} from 'angular-calendar';
+import { DayViewHourSegment } from 'calendar-utils';
+import { fromEvent } from 'rxjs';
+import { finalize, takeUntil } from 'rxjs/operators';
+import { addDays, addMinutes, endOfWeek } from 'date-fns';
+
+function floorToNearest(amount: number, precision: number) {
+  return Math.floor(amount / precision) * precision;
+}
+
+function ceilToNearest(amount: number, precision: number) {
+  return Math.ceil(amount / precision) * precision;
+}
+
+export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
+  weekTooltip(event: CalendarEvent, title: string) {
+    if (!event.meta.tmpEvent) {
+      return super.weekTooltip(event, title);
+    }
+  }
+
+  dayTooltip(event: CalendarEvent, title: string) {
+    if (!event.meta.tmpEvent) {
+      return super.dayTooltip(event, title);
+    }
+  }
+}
+
+// tslint:disable-next-line max-classes-per-file
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'template.html',
+  providers: [
+    {
+      provide: CalendarEventTitleFormatter,
+      useClass: CustomEventTitleFormatter
+    }
+  ],
+  styles: [
+    `
+      .disable-hover {
+        pointer-events: none;
+      }
+    `
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {
+  viewDate = new Date();
+
+  events: CalendarEvent[] = [];
+
+  dragToCreateActive = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  startDragToCreate(
+    segment: DayViewHourSegment,
+    mouseDownEvent: MouseEvent,
+    segmentElement: HTMLElement
+  ) {
+    const dragToSelectEvent: CalendarEvent = {
+      id: this.events.length,
+      title: 'New event',
+      start: segment.date,
+      meta: {
+        tmpEvent: true
+      }
+    };
+    this.events = [...this.events, dragToSelectEvent];
+    const segmentPosition = segmentElement.getBoundingClientRect();
+    this.dragToCreateActive = true;
+    const endOfView = endOfWeek(this.viewDate);
+
+    fromEvent(document, 'mousemove')
+      .pipe(
+        finalize(() => {
+          delete dragToSelectEvent.meta.tmpEvent;
+          this.dragToCreateActive = false;
+          this.refresh();
+        }),
+        takeUntil(fromEvent(document, 'mouseup'))
+      )
+      .subscribe((mouseMoveEvent: MouseEvent) => {
+        const minutesDiff = ceilToNearest(
+          mouseMoveEvent.clientY - segmentPosition.top,
+          30
+        );
+
+        const daysDiff =
+          floorToNearest(
+            mouseMoveEvent.clientX - segmentPosition.left,
+            segmentPosition.width
+          ) / segmentPosition.width;
+
+        const newEnd = addDays(addMinutes(segment.date, minutesDiff), daysDiff);
+        if (newEnd > segment.date && newEnd < endOfView) {
+          dragToSelectEvent.end = newEnd;
+        }
+        this.refresh();
+      });
+  }
+
+  private refresh() {
+    this.events = [...this.events];
+    this.cdr.detectChanges();
+  }
+}

src/app/demo-modules/drag-to-create-events/module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { DemoComponent } from './component';
+import { DemoUtilsModule } from '../demo-utils/module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
+    DemoUtilsModule,
+    RouterModule.forChild([{ path: '', component: DemoComponent }])
+  ],
+  declarations: [DemoComponent],
+  exports: [DemoComponent]
+})
+export class DemoModule {}

src/app/demo-modules/drag-to-create-events/sources.ts

@@ -0,0 +1,23 @@
+export const sources = [
+  {
+    filename: 'component.ts',
+    contents: {
+      raw: require('!!raw-loader!./component'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./component')
+    }
+  },
+  {
+    filename: 'template.html',
+    contents: {
+      raw: require('!!raw-loader!./template.html'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=xml!./template.html')
+    }
+  },
+  {
+    filename: 'module.ts',
+    contents: {
+      raw: require('!!raw-loader!./module'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./module')
+    }
+  }
+];

src/app/demo-modules/drag-to-create-events/template.html

@@ -0,0 +1,58 @@
+<div class="row">
+  <div class="col-md-6">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        mwlCalendarPreviousView
+        [view]="'day'"
+        [(viewDate)]="viewDate">
+        Previous
+      </div>
+      <div
+        class="btn btn-outline-secondary"
+        mwlCalendarToday
+        [(viewDate)]="viewDate">
+        Today
+      </div>
+      <div
+        class="btn btn-primary"
+        mwlCalendarNextView
+        [view]="'day'"
+        [(viewDate)]="viewDate">
+        Next
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 text-right">
+    <h3>{{ viewDate | calendarDate:('weekViewTitle') }}</h3>
+  </div>
+</div>
+<br>
+
+<ng-template
+  #weekViewHourSegmentTemplate
+  let-segment="segment"
+  let-locale="locale"
+  let-segmentHeight="segmentHeight"
+  let-isTimeLabel="isTimeLabel">
+  <div
+    #segmentElement
+    class="cal-hour-segment"
+    [style.height.px]="segmentHeight"
+    [class.cal-hour-start]="segment.isStart"
+    [class.cal-after-hour-start]="!segment.isStart"
+    [ngClass]="segment.cssClass"
+    (mousedown)="startDragToCreate(segment, $event, segmentElement)"
+  >
+    <div class="cal-time" *ngIf="isTimeLabel">
+      {{ segment.date | calendarDate:'weekViewHour':locale }}
+    </div>
+  </div>
+</ng-template>
+
+<mwl-calendar-week-view
+  [viewDate]="viewDate"
+  [events]="events"
+  [hourSegmentTemplate]="weekViewHourSegmentTemplate"
+>
+</mwl-calendar-week-view>