The event dragging between the dates is not working

[Gamerakki]

Hi,

I have implemented the code and its work well. I tried dragging the event from one day to other but it doenst work can you please help in this

[diegofsza]

Hi, will try to look at it, but I wont promise anything because I've got very limited time these days. Any help to get this working is welcomed!

[Gamerakki]

Hii,
I was able to push event back one day back and one day forward too. But i want it to happened between the days.. smoothly like the original plugin ... I have added the event.x and for now used the condition to move the events... any suggestion

[anikaseibezeder]

Hi all!

I have the same problem: I also want to drag the event from one day to another and it doesn't work...
@Gamerakki could you please show me how you've done the thing one day back and one day forward? I don't really have a clue...

[moosag]

Hi All

was anyone able to get this right? @diegofsza If you could give me some pointers as to where to start I will complete it and add to the code base. I have to get it working irrespective. Any help you can offer will just shorten the dev time for me.

Regards :)

[happyPrograming]

hi All ,
i was able to make this work by adding custom event template like this :
<ng-template #customEventTemplate
let-dayEvent="dayEvent">
<div mwlDraggable
class="text-white event"
[dropData]="{event: dayEvent.event}"
[dragAxis]="{x: dayEvent.event.draggable, y: dayEvent.event.draggable}">

<iq-calendar-week-hours-view *ngSwitchCase="'week'"
[eventTemplate]="customEventTemplate" >

[carys-cc]

Hi @happyPrograming

Would you mind posting your full code? I'm a bit new to this plugin so not sure what you posted needs to be amended to function.

[happyPrograming]

Hi @patrickchoi ,
So i created a ng-template like this

// you have the choice to custumize (display the information you want ) your template the way you want , for me i did this

1.   <ng-template #customEventTemplate
                             let-dayEvent="dayEvent">
                     <div mwlDraggable
                         class="text-white  event"
                         [dropData]="{event: dayEvent.event}"
                         [dragAxis]="{x: dayEvent.event.draggable, y:dayEvent.event.draggable}"
                         [style.backgroundColor]="dayEvent.event.bgColor">
                        <div class="event-content" matTooltip={{dayEvent.event.title}}>
                            <div class="event-delete pull-right">
                                <i class="material-icons pull-right delete-icon" >
                                    delete
                                </i>
                            </div>
                            <div class="text-white  event">
                                <span class="event-time"> {{ dayEvent.event.start| date :'HH:mm'}}</span>
                                <span class="event-title"> {{ dayEvent.event?.patient?.lastName }} 
                                      {{dayEvent.event?.patient?.firstName}}</span>
                            </div>
                        </div>
                    </div>
                </ng-template>

then i called it with the input [eventTemplate] like this :

2. <iq-calendar-week-hours-view *ngSwitchCase="'week'"
   [viewDate]="viewDate"
   [events]="events"
   [locale]="locale"
   [refresh]="refresh"
   [hourSegments]="2"
   [eventTemplate]="customEventTemplate"
   [dayStartHour]="8"
   [dayEndHour]="23"
   (eventTimesChanged)="eventTimesChanged($event)">
   

In typeScript i did the following :

viewDate: Date = new Date();
refresh: Subject = new Subject();
locale: string = 'en';

events: CalendarEvent[] = [
{
title: 'Draggable event',
color: colors.yellow,
start: new Date(),
draggable: true
},
{
title: 'Draggable event 2 ',
color: "#1ab394",
start: new Date(),
draggable: true
}
];

eventTimesChanged({ event, newStart, newEnd }: any): void {
event.start = newStart;
event.end = newEnd;
this.refresh.next();

}

Hope it help :).

[carys-cc]

Thanks for the quick reply! I did try out the code, but now the events cannot be dragged at all. The cursor does change to the move icon but nothing happens when I try to drag it around.

Are there any additional imports needed?

[happyPrograming]

Did you import DragAndDropModule ?

if you didn't you have to add it into your @NgModule Imports

import { DragAndDropModule } from 'angular-draggable-droppable';

[carys-cc]

I have done this now with no luck. The behaviour is very odd. Sometimes I can drag the element, but it doesn't work most of the time. I can see in the console that the drag is being registered but the UI doesn't do anything.

[happyPrograming]

Can you show me your ng-template code ?

[carys-cc]

I have tried to keep it as basic as possible from your snippet. Don't know if it makes a difference but I'm on Angular 6.0.5.

        <ng-template #customEventTemplate let-dayEvent="dayEvent">
             <div mwlDraggable
                 [dropData]="{event: dayEvent.event}"
                 [dragAxis]="{x: dayEvent.event.draggable, y:dayEvent.event.draggable}">
                  <span> {{ dayEvent.event.title}}</span>
                  <span> {{ dayEvent.event.start| date :'HH:mm'}}</span>
            </div>
        </ng-template>

[happyPrograming]

i did it with your template and it work fine , you have to add

this.refresh.next(); in your eventTimesChanged function otherwise it won't work.

[carys-cc]

Yes, the next() call is in the eventTimesChanged function, still no dice

[happyPrograming]

in [dragAxis]="{x: dayEvent.event.draggable, y:dayEvent.event.draggable}"
is your dayEvent.event.draggable is set to true ?

[carys-cc]

Yes, it looks like this:

          let testevent = {
            start: new Date(element.ts_full),
            end: addMinutes(new Date(element.ts_full), 50),
            title: element.name,
            color: this.eventColor(element.status),
            //actions: this.actions,
            meta: {
              b_id: element.b_id,
              status: element.status,
              ts_date: element.ts_date,
              ts_time: element.ts_time
            },
            draggable: true
          };

If I use the custom template example from: https://mattlewis92.github.io/angular-calendar/#/custom-templates

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
    <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
  </div>
  <small style="margin: 5px">There are {{ day.events.length }} events on this day</small>
</ng-template>

This can be dragged but only within the day.

[victor-theoption]

@patrickchoi I tried your month event template but when i drag and drop an event more than once, the event is moving 30min each time, not placing where I dropped. Does it happened to you?

[carys-cc]

When I can drag it (and it’s very hard to do so) I can’t tell where it’s going to drop

…

On Wed, 25 Jul 2018 at 9:40 PM, victor-theoption ***@***.***> wrote: @patrickchoi <https://github.com/patrickchoi> I tried your month event template but when i drag and drop an event more than once, the event is moving 30min each time, not placing where I dropped. Does it happened to you? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEMlFJilHTO8_MheqpVsKBv-ya6PJsbIks5uKHVAgaJpZM4RSwB8> .

[mvaljento]

Was this ever resolved? I'm running into a problem, when the event is dragged onto another day it just just disappears under the day column.

[carys-cc]

I never got this working :(

…

On 28 Aug 2018, 3:42 AM +0800, mvaljento ***@***.***>, wrote: Was this ever resolved? I'm running into a problem, when the event is dragged onto another day it just just disappears under the day column. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[victor-theoption]

If it helps, I made my own event template with this structure, but for this project we need to rewrite some part of the angular-calendar framework to work, and it doesn't work at 100%.

<ng-template #customDayEvent let-dayEvent="dayEvent" let-tooltipPlacement="tooltipPlacement" let-eventClicked="eventClicked" let-tooltipTemplate="tooltipTemplate" let-tooltipAppendToBody="tooltipAppendToBody"> <div class="cal-event" [style.backgroundColor]="dayEvent.event.color?.secondary" [style.borderColor]="dayEvent.event.color?.primary" [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event" [tooltipPlacement]="tooltipPlacement" [tooltipEvent]="dayEvent.event" [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody"> <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions> &ngsp; <mwl-calendar-event-title [event]="dayEvent.event" [customTemplate]="eventTitleTemplate" view="day" (mwlClick)="eventClicked.emit()"> </mwl-calendar-event-title> <div class="pisos-wrapper" *ngIf="dayEvent.event.visits?.length > 0"> <i class="fas fa-user-circle"></i> <span class="pisos">{{dayEvent.event.visits?.length || '0'}}</span> </div> </div> </ng-template> <ng-template [ngTemplateOutlet]="customTemplate || defaultTemplate" [ngTemplateOutletContext]="{ dayEvent: dayEvent, tooltipPlacement: tooltipPlacement, eventClicked: eventClicked, tooltipTemplate: tooltipTemplate, tooltipAppendToBody: tooltipAppendToBody }"> </ng-template>

and at the angular-calendar-week-hours component i just add [eventTemplate]="customDayEvent"

<mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="eventSelected.pisos" [dayStartHour]="dayRange.start" [dayEndHour]="dayRange.end" (eventClicked)="eventClicked($event)" (eventTimesChanged)="eventTimesChanged($event)" [eventTemplate]="customDayEvent" [refresh]="refresh"> </mwl-calendar-day-view>

[mvaljento]

Okay, thank you very much guys. I think for this project I'm just going to give up the drag'n'drop functionality and implement something more simple. Maybe have to look at other calendar components in the future.