Add a class to the dragging event in full calendar - jquery-ui

How to add a class to the dragging event in full calendar? Is it possible to do it using eventDragStart event?

Yes it is possible to do using eventDragStart. In this codepen example I have made a class called eventRed and I have set up my eventDragStart as the following.
eventDragStart: function( event, jsEvent, ui, view ) {
event.className += ' eventRed';
}
Dragging an external event will not cause this callback to trigger, it will only trigger whenever the event is dragged from the actual calendar, so drag an event onto the calendar and then when you drag it from there the class will be applied.

Related

Vaadin flow grid prevent itemClickListener() to fire on click on buttons in ComponentColumns

With vaadin 23.1.x you can set a itemClickHandler when a user click on a item/row in the grid with myGrid.addItemClickListener(..)
This works fine.
But if you have a component column, with a button in it, then the ClickEvent of the Button is fired and also the itemClickListener of the grid row.
Is there a way to prevent the button click from also triggering the itemClickListener?
You must use this method to add the listener them you can
myGrid.getElement().addEventListener("item-click",
event -> ...)
.addEventData("event.stopPropagation()");
I'm not 100% sure if the even is item-click or just click.

Appcelerator Button image not changing in ios

Hi i am using a UIButton and i want to change its image property on touchstart and touchend events.
Here is something i am following
$.button.addEventListener('touchstart',function(e){
e.source.image="image-pressed.png";
});
$.button.addEventListener('touchend',function(e){
e.source.image="image-normal.png";
});
But i am wondering its not going to happen images are not changing on these events though the event is properly being fired on both touch events.
Kindly guide me how i can place my normal and pressed image for a button.
Thanks.
Try this:
$.button.addEventListener('touchstart',function(e){
$.button.image = "image-pressed.png";
});
$.button.addEventListener('touchend',function(e){
$.button.image = "image-normal.png";
});
It may also happen that your event is bubbling up to any of its parent or parent of parent (if parent has such events attached to it) which means that e.source will not be the button itself. So it's always safe to use $.Button_ID to access property like image or title.

DART - Resize div element event

I am using CSS3 resize: vertical; to allow the user to resize a Div, and would like to be notified when this happens (so that I can adjust the size of other elements with Dart code if necessary).
How can I attach an event listener for the user resize event?
( DivElement.on.resize does not exist.)
When you want to observe event which is not listed under the on getter, you can use $dom_addEventListener to set event listener.
Thus, if you would like to use something like the unexisting divElement.on.resize, you can use :
divElement.$dom_addEventListener("resize", (e) {
// event occurs
});
That said, unlike click event, the resize event doesn't seem to be fired (even in javascript).

get reference of jquery ui object in touchend

I am using https://github.com/furf/jquery-ui-touch-punch to map the touch events. jQuery UI droppable has the below code in which the event and ui objects are passed automatically. I want to write a custom handler to which I can pass the same objects. Could any one suggest how I can get the reference of ui object on touchend event on IPAD ? So that I can use same drop function for both desktop and IPAD.
drop: function(event, ui) {
dropFunction(event, ui);
}
so on touchend event I can call dropFunction(event,ui)
Additional info:
I am trying to achieve drag and drop from table row to a jstree. If I just use Touch Punch without modification I am able to do the drag and drop is also being called. As I am reading the values using the below code, it works on desktop browser but not on IPAD.
var newOrgId = $('#ohTreeDiv .jstree-hovered').find('span:last').text()
the jstree-hovered class is added automatically to the hovered node when using desktop browser however this does not get added on Ipad, so I am adding this class manually in touchend method. After this step I even get the hovered class added. When touchend happens it looks like the drop is not being called.
After dragging the element on the target node of the jstree I have to tap it so that the drop is triggered. #FrédéricHamidi
Below is the touchend code which I had to modify little bit to make it working with jstree so that I can read the values with jstree-hovered class. One tip I want to add is when testing remove all the alerts as it will intefere with the values we read using jQuery.
c._touchEnd = function(f) {
var i = f.originalEvent.changedTouches[0];
var elementFromPoint1 = document.elementFromPoint(i.clientX, i.clientY);
var id=elementFromPoint1.id;
var str=new String(id);
var pos=str.indexOf("dropTarget");
if(pos>=0){
elementFromPoint1.className="jstree-hovered";
}
if (!a) {
return;
}
d(f, "mouseup");
d(f, "mouseout");
if (!this._touchMoved) {
d(f, "click");
}
a = false;
};

jquery calendar: define custom icon

when having a calendar widget assigned to a textbox, how can i trigger it from a separate icon? (i don't mean the internal showOn button feature).
you can bind the separate icon with an event calling this function
$('#your-datepicker').datepicker('show');
look like
$('input#mybutton').click(function(){
$('#datepicker').datepicker('show');
});

Resources