How to drag connection line A to B (Connection Timeline)

Event calendars & schedulers
1

I want to draw a line from even A to even B using the mouse.

Screenshot_7

2

Hi,

You can try a workaround using event listeners.
The idea is to place two elements on the left and right sides of the events, which represent the connectors. This can be solved by customizing the event with the renderScheduleEvent option. You can start the connection by clicking and dragging the mouse from one connector to another connector on a different event to create a connection. The connection is created using mouse listeners: in the mousedown listener, you save the ID of the event and a parameter indicating whether it’s the right or left side from which you want to start the connection. And in the mouseup listener, you call a function with the necessary parameters to establish the connection (event IDs and connection type).

A small sample code that you can use as a starting point to implement this:

function renderScheduleEvent(data) {
  var event = data.original;
  var color = data.color;
  return '<div class="custom-event" style="background:' + color + ';">' +
    '<div class="connector-left" data-event-id="' + event.id + '"></div>' +
    '<div class="connector-right" data-event-id="' + event.id + '"></div>' +
    '<div class="custom-event-content">' +
    '<div class="custom-event-title">' + event.title + '</div>' + 
    '</div>' + '</div>';
}

$('#demo-connecting-linking-events-arrows')[0].addEventListener( 'mousedown', function (event) {
  var $progressArrowRight = $(event.target).closest('.connector-right');
  var $progressArrowLeft = $(event.target).closest('.connector-left');
  if ($progressArrowRight.length) {
    event.stopPropagation();
    startEventId = $progressArrowRight.data('event-id');
    startEventSide = 'right';
  } else if ($progressArrowLeft.length) {
    event.stopPropagation();
    startEventId = $progressArrowLeft.data('event-id');
    startEventSide = 'left';
} },
true, );

$('#demo-connecting-linking-events-arrows')[0].addEventListener( 'mouseup', function (event) {
  var $progressArrowRight = $(event.target).closest('.connector-right');
  var $progressArrowLeft = $(event.target).closest('.connector-left');
  if ($progressArrowRight.length) {
    event.stopPropagation();
    endEventId = $progressArrowRight.data('event-id');
    // Create the connection
  } else if ( $progressArrowLeft.length) {
    event.stopPropagation();
    endEventId = $progressArrowLeft.data('event-id');
    // Create the connection
  } },
  true,
);

Let us know if this helps!