Action on event click before mouse released

Asked by Blake
10 years ago.

First of all, thanks very much to Dan for the extremely quick response to my last question.

I have a situation where I need to be able to record additional information from the user before allowing certain events to be moved. When I generate the initial page, I set the moveDisabled value to true for those items, and then have a user click event used to open a modal dialog to allow the user to enter the required data, and unlock the event once the required data has been entered. This works relatively well, but there is one problem. If the user clicks on the event and releases the mouse button, my onEventClicked function fires and unlocks the event. If the user simply clicks on the event and then tries to move it before releasing the mouse button, it appears to be treated as a move, and since the event is defined as moveDisabled, nothing happens. Is there an event I can grab when the mouse is pressed but before it's released?

Alternatively, is there a better way of handling what I'm trying to achieve in terms of requiring additional data to be entered by the user before allowing those events to be moved?

This also brings up another question - what is the difference between onEventClick and onEventClicked ?

Thanks,
Blake

how-to javascript

Answer posted by Dan Letecky [DayPilot]
10 years ago.

If the problem is that "nothing happens" i.e. the user gets no visual feedback you can use a different approach:

Instead of definining moveDisabled:true on the event set a special custom property with the status value, e.g.

{
  start: "2015-10-06T08:00:00",
  // ...
  tags: { status: "missing-details" }
}

Add onEventMoving handler, detect the status there and display a hint:

dp.onEventMoving = function(args) {
  if (args.e.data.tags.status === "missing-details") {
    args.allowed = false;  // forbid moving
    args.left.enabled = false;
    args.right.enabled = true;
    args.right.html = "You need to define details before moving this event";
  }
};

> This also brings up another question - what is the difference between onEventClick and onEventClicked ?

onEventClick is fired before the default action and onEventClicked is fired after the default action. The default action is set using eventClickHandling. The initial value is "Enabled" which does nothing - so in this case there is no difference.

If you set eventClickHandling to a different value (e.g. "Select") you will have a chance to cancel the action on onEventClick using args.preventDefault() if it doesn't meet the rules.

Comment posted by Blake
10 years ago.

Thanks again for the quick reply. Your support is absolutely awesome, as is the product itself.
I have tried the code and it does exactly what I need, but I still have one small problem. It appears that the displayed html is limited to the height of the event cell, and is clipped if the event appears too close to the edge. Is there any way to have it behave more like the bubbleHtml, which can display multiple lines, and displays beyond the bounds of the container?

Comment posted by Dan Letecky [DayPilot]
10 years ago.

There are two options:

1. You can indeed display the bubble but it will appear at the original event location and use the bubbleHtml value defined for the event. However, it looks like neither has to be a problem in your case:

dp.onEventMoving = function(args) {
  new DayPilot.Bubble({animated:false}).showEvent(args.e, true);
};

dp.onEventMove = function(args) {
  DayPilot.Bubble.hideActive();
};

2. Another option is to override the height using CSS:

.scheduler_default_event_move_right {
  height: auto !important;
}

Comment posted by Blake
10 years ago.

Thanks again. The CSS height override works perfectly. I didn't want to use the bubbleHtml, since I'm using it to show details of the event.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.