Our powerful JS Calendar component


Post by abhi »

Hi,

I m trying to drag and drop event from external source into the calendar and trigger some functionality. This is working for day, week and month modes but when i try to drop into timeline mode, onDragDrop event is getting trigger but

this.calendar.getEventRecord(event)

not returning any event.

https://ibb.co/2cDLYJM

Note: Drag and drop is working for day, week and month modes only for timeline mode it is not able to getEventRecord.

Can someone please help me on this?


Post by alex.l »

timeline is a built-in scheduler's timeAxis, it has own event resolving methods. Better to share your solution if you want we fix it, but in general you can have a look at scheduler's drag-from-grid demo for code example: https://bryntum.com/examples/scheduler/dragfromgrid/

All the best,
Alex


Post by abhi »

Below solution is working when drag and dropping external element in mode day, weeks, month. But not working for timeline mode.
Sharing my solution:

<bryntum-project-model
  #project
  [assignments] = "assignments"
  [events] = "events"
  [resources] = "resources"
</bryntum-project-model>

<bryntum-calendar
  [project]             = "project"
  [date]                = "calendarConfig.date"
  [modes]               = "calendarConfig.modes"
  (onCatchAll)          = "onCalendarEvents($event)"
  [sidebar]             = "calendarConfig.sidebar"
  [mode]                = "calendarConfig.mode"
  [features]            = "calendarConfig.features"
  [readOnly]            = "calendarConfig.readOnly"
  [autoCreate]          = "calendarConfig.autoCreate"
</bryntum-calendar>
 // dragging element within container
    let dragHelper = new DragHelper({
      cloneTarget : true,
      mode    : 'translateXY',
      // Only allow drops on scheduled tasks
      dropTargetSelector : '.b-calendar-cell',
      // Only allow dragging cell elements inside on the equipment grid
      targetSelector     : '.schedule-list .list-row'
    });

dragHelper.on({
  drop: this.onDragDrop.bind(this)
})

   onDragDrop({ context, event}: any) {
    // @ts-ignore
    let dateTime = this.calendar.getDateFromDomEvent(event);
    
if (context.valid && context.grabbed) { let momentDate = moment(dateTime); if (momentDate.isSameOrAfter(moment(new Date))) { let newDate = momentDate.format("YYYY-MM-DD"); let newHour = momentDate.format("HH:mm"); let dataSet = context.grabbed.dataset; // trigger dialog } else { this.messageService.add({ key: 'invalidDateToast', severity: 'warn', detail: this.translateService.translate('errors.SCHEDULER_INVALID_DATE', 'A task can’t be created in the past.')}); } context.finalize(true); } else { // trigger re-render } }

Post by alex.l »

I checked it deeply. That's not supported right now, unfortunately. Calendar's and Scheduler's (timeline) drag-n-drop are not compatible. I've opened a feature request to implement that. https://github.com/bryntum/support/issues/4682

All the best,
Alex


Post Reply