Angular-calendar: Can't bind to 'dropData' since it isn't a known property of 'div'

[eleventhaus]

I'm submitting a ...

[x] Bug report 
[ ] Feature request
[ ] Support request => Please do not submit a support request here, please ask on https://stackoverflow.com/

Bug description / Feature request

When using custom template for month cell, if ng template is copied over per doc instructions:

Now copy the template source for your chosen template into your own component and modify as your see fit.

error occurs:

Unhandled` Promise rejection: Template parse errors:
Can't bind to 'dropData' since it isn't a known property of 'div'. ("
          [tooltipAppendToBody]="tooltipAppendToBody"
          mwlDraggable
          [ERROR ->][dropData]="{event: event}"
          [dragAxis]="{x: event.draggable, y: event.draggable}">
      "): ng:///.plnkr.co/LFYX6TPoPXxaJ1bN/demo/template.html@34:10

Minimal reproduction of the problem with instructions

Link to plunkr

Versions

Angular: 4.4.6 (on plunkr above) but also 5+ in project

Calendar library: 0.22.3

Browser name and version: Chrome Version 65.0.3303.0 (Official Build) canary (64-bit)

[mattlewis92]

You need to import the drag and drop module into your app to get it to work:

import { DragAndDropModule } from 'angular-draggable-droppable';
// add the DragAndDropModule to the imports of the module that imports the calendar

I guess I could add it to the exports of the calendar module to make the process seamless.

[eleventhaus]

Imported the module and got dragging to work.

Got another error regarding (mwlClick) in the custom template.

TypeError: _co.onEventClick is not a function
    at Object.eval [as handleEvent] (VM1114 DemoComponent.ngfactory.js:37)

If I want to use my own method for when an event is clicked in the month view, would I use my own method in the custom template or should I leave the template method as is and use my method in the directive under the property (eventClicked)?

<mwl-calendar-month-view
                *ngSwitchCase="'month'"
                [viewDate]="viewDate"
                [events]="events"
                [activeDayIsOpen]="false"
                [cellTemplate]="monthCellTemplate"
                [headerTemplate]="monthHeaderTemplate"
                (dayClicked)="dayClickedMonth($event.day)"
                (eventClicked)="clickEvent($event.event)"    <----- here?
                (eventTimesChanged)="updateVisit($event)">
              </mwl-calendar-month-view>

<ng-template
  #monthCellTemplate
  let-day="day"
  let-openDay="openDay"
  let-locale="locale"
  let-tooltipPlacement="tooltipPlacement"
  let-highlightDay="highlightDay"
  let-unhighlightDay="unhighlightDay"
  let-eventClicked="eventClicked"
  let-tooltipTemplate="tooltipTemplate"
  let-tooltipAppendToBody="tooltipAppendToBody">
  <div class="cal-cell-top">
    <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
  </div>
  <div class="cal-events" *ngIf="day.events.length > 0">
    <div
      class="cal-event"
      *ngFor="let event of day.events"
      [style.backgroundColor]="event.color.primary"
      [ngClass]="event?.cssClass"
      (mouseenter)="highlightDay.emit({event: event})"
      (mouseleave)="unhighlightDay.emit({event: event})"
      [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
      [tooltipPlacement]="tooltipPlacement"
      [tooltipEvent]="event"
      [tooltipTemplate]="tooltipTemplate"
      [tooltipAppendToBody]="tooltipAppendToBody"
      mwlDraggable
      [dropData]="{event: event}"
      [dragAxis]="{x: event.draggable, y: event.draggable}"
      (mwlClick)="onEventClick($event, event)">           <-----  or here?
    </div>
  </div>
</ng-template>

[mattlewis92]

As both bits of template code have access to the same parent context I don't think it should make a difference, as the event click just proxies up through to the root month view component

[eleventhaus]

Ok gonna insert the method into the custom template and replace onEventClick, as I keep getting an error that "onEventClick is not a function".

[mattlewis92]

Ah, onEventClick is a private method to workaround a bug when using hammerjs, instead you could do (mwlClick)="eventClicked.emit({ event: event })".

[mattlewis92]

Looks like that workaround isn't even required anymore, I have updated the template to be a lot simpler now: https://github.com/mattlewis92/angular-calendar/pull/420/commits/0ffe3d19de2966362dec0fac6eb1f251b61b1b79 Thanks for pointing that out 😄

[eleventhaus]

Thanks for the awesome calendar 👍

[CueTrans]

@mattlewis92 : In day view, Is it possible to show the resources on the left and hours in the top? (using mwl-day-view-scheduler)

Since the resource might be thousands. In that scenario will it possible to show the resources on the left (vertically) and hours in top (horizontally).
If though can you guide me do that?