Sequential appointments or lead time

[Jon]

Hi - I have a scenario where appointments have lead time, e.g. an appointment is 8-9, 915-1015, 1030-1130 but it has prep/lead time attached to e.g. 7:45-8, 9:00-9:15 and 10:15-1030
This needs to not be part of the appointment time but is almost like a block of time attached to it.

I've tried to cater for this by adding the time into the start time, then using css to show the first x minutes differently, but unfortunately that creates problems with drag and drop where the drag handler is based on the 7:45 start not 8:00. 

Is there any way to achieve having lead time on an appointment show visually e.g. a different color, OR have two apopointments be "stuck" together so if I drag one it drags the other?

Example of visual difference I tried:

[Swathi Ravi]

Hi John,

 

You can achieve your requirement by increasing the start time in the Schedule's dragStop event. If you are still facing the same issue, share the below details to proceed further.

Api: https://ej2.syncfusion.com/vue/documentation/api/schedule#dragstop

 

• Entire schedule related code with the sample end customization and appointment details or
• Issue reproducing sample.

 

Regards,

Swathi Ravi

[Jon]

Thanks for the reply - unfortunately I can't really create a sample here as I don't know if what I'm asking for is a feature.

I don't think what you linked addresses the problem so I will try articulate it clearer.

I have a schedule that is:

• 9-10 - 0 travel time
• 10:20-11:20 - 20 minutes travel time
• 11:50-12:50 - 30 minutes travel time
  

The appointments themselves are all 1hour, but they have a component of lead time/travel time attached to them noted above.

In other calendar solutions I was able to have the appointment show this lead time on the schedule with shading.

I'm trying to either:

1. Have the time shown
2. Have two appointments one representing the time and one the actual event, have the time not be draggable (I can use onDragStart for this), but have the time move with the appointment/be stuck to it

With showing the time I tried something like https://ej2.syncfusion.com/angular/demos/#/material/schedule/events-template where the cell is customized, but that means I have to start the appointment at 10-11:20 and the top of the drag is incorrectly at 10:00 instead of 10:20.

I can achieve #2 by having the appointments share a key in my data source and moving the travel with the appointment when it's moved, but was hoping I'd be able to do something on display only i.e. #1

[Swathi Ravi]

Hi Jon,

We have created a sample with your shared details. You can achieve your requirement by using the Schedule select and eventClick event like the below shared snippet.

Note: CTRL + Click on the appointment Meeting and then drag. You can click and drag on the main appointment(Meeting) only and not the lead time appointment.

Sample: https://stackblitz.com/edit/2r2c73-qrjzgn?file=index.ts

Api: https://ej2.syncfusion.com/documentation/api/schedule#eventclick

                https://ej2.syncfusion.com/documentation/api/schedule#select

[index.ts]

let data = [

  {

    Id: 1,

    Subject: 'Meeting',

    StartTime: new Date(2018, 1, 15, 10, 0),

    EndTime: new Date(2018, 1, 15, 11, 0),

    IsAllDay: false,

  },

  {

    Id: 2,

    Subject: 'Lead Time of Meeting',

    StartTime: new Date(2018, 1, 15, 9, 45),

    EndTime: new Date(2018, 1, 15, 10, 0),

    IsAllDay: false,

    LeadId: 1,

    CategoryColor: 'pink',

  },

];

let scheduleObj: Schedule = new Schedule({

  eventClick: (args: any) => {

    if ((args.event as any).LeadId) {

      args.cancel = true;

    }

  },

  select: (args: SelectEventArgs) => {

    if ((args.data as any).Id && isNullOrUndefined((args.data as any).LeadId)) {

      let schedule = (document.querySelector('.e-schedule') as any)

        .ej2_instances[0];

      let datas = schedule.eventsData.filter(

        (item: any) => item.LeadId == (args.data as any).Id

      );

      let id = datas[0].Id;

      document.querySelector(`[data-id="Appointment_${id}"]` as any).dispatchEvent(new MouseEvent('click', { ctrlKey: true }));

    }

  },

  allowMultiDrag: true,

});

Regards,

Swathi Ravi