How to disable drag and drop but still show tooltip on fullcalendar
I have my code:
eventMouseover: function(calEvent, jsEvent)
{
xOffset = 0;
yOffset = 0;
tiptext = "";
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month')
{
if (tiptext)
{
tiptext = "<strong>" + calEvent.title + "</strong>" + "<br>" + tiptext;
$("body").append("<p id='tooltip'>" + tiptext + "</p>");
$("#tooltip")
.css("z-index", 91000)
.css("position", "absolute")
.css("top", ($(this).offset().top + $(this).outerHeight() + yOffset) + "px")
.css("left", ($(this).offset().left + xOffset) + "px")
.fadeIn(400);
}
}
},
eventMouseout: function(calEvent, jsEvent)
{
$("#tooltip").remove();
},
and on my eventrender:
if(calEvent.title == "Holiday")
{
element.draggable = false;
}
And I have a tooltip for describing a holiday event, the tooltip works great, however, if I set draggable to false, the tooltip is no longer displayed. Can I show my tooltip if the dragged set is false?
+3
source to share
1 answer
You manually disable drag and drop for your holiday event. Use a parameter instead editable
. Define it when you define your events like:
events: [{
start: moment(),
title: "Holiday",
editable: true,
},],
Or add it to your eventDataTransform
callback:
eventDataTransform: function(eventData){
if(eventData.title === "Holiday")
eventData.editable = false;
return eventData;
},
This option should disable dragging (and resizing) without removing the tooltip functionality.
+3
source to share