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>