Menu
.cl_root {
width: 100%;
font-size: 13px;
overflow: hidden;
}
.cl_root .cl_table {
background-color: #FFF;
width: 100%;
margin-bottom: 8px;
max-width: 100%;
}
.cl_table .cl-key {
vertical-align: top;
text-align: left;
white-space: nowrap;
font-weight: normal;
padding: .4em 1em .4em 0;
font-weight:bold;
}
.cl_table .cl-value{
width: 95%;
padding: .4em 0;
text-align:left;
}
.textbox-fill-input {
width:95%;
padding:2px;
border-width:1px;
border-color:#666 #ccc #ccc #666
}
.cl-example {
FONT-SIZE: 12px; PADDING-TOP: 2px;
font-style:italic
}
.lk {
WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline;
float: left;padding-top: 6px;padding-left: 10px;
}
.bubble-table {
width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px;
}
.bubble-cell-side {
WIDTH: 25px;
}
.bubble-mid {
PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; PADDING-TOP: 0px
}
.cl-button-quickAddBTN{
float:left;
}
.bubble-closebutton {
POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/combined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px
}
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
dayClick: function (date, allDay, jsEvent, view) {
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
$('.qtip').remove();
if(typeof $(this).data("qtip") !== "object" && allDay) {
$(this).qtip({
content:{
text:'<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span id="bbit-cal-editLink" class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" id="box-cl" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div id="bubbleClose1" class="bubble-closebutton"></div></div>',
},
position: {corner: {tooltip: 'bottomMiddle', target: 'center'}},
style: {
name : 'tipstyle'
},
adjust: {
screen: true // Keep the tooltip within the viewport at all times
},
show: {
solo: true,
when: { event: 'click' },
ready: true
},
hide: false,
});
}
}
<script>
$("#bbit-cal-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$("#bubbleClose1").live('click',function() {
$(this).parents('qtip').hide();
});
</script>
Now when I click on a day in calendar "qTip ToolTip" appears which includes two buttons Close Button (x) and Create Event Button
When I click on create event it alerts the date of that day and when i click on close button it hides that qTip(initially I was destroying that qTip) But when I again click on the same day qTip not appears again How to handle multiple qTips which triggers on dayClick and disappears either clicking on a close button or clicking on sme other date I also want to create Event using the createEvent button in qTip
320
$ ( selector ).trigger ( event,eventObj,param1,param2,... ) Required. Specifies the event to trigger for the specified element. param1,param2,... Optional. Additional parameters to pass on to the event handler.
The dayClick trigger is not fired when the user clicks a day heading in list view. For resource views, this callback will receive an additional Resource Object parameter. Example: This is only available with the Scheduler plugin.
The HTML element for this event. The native JavaScript event with low-level information such as click coordinates. The current View Object. Unlike some other event-related interactions, eventClick does not require the interaction plugin. Here is an example demonstrating some of these properties: View a simple demo of eventClick.
Unlike some other event-related interactions, eventClick does not require the interaction plugin. Here is an example demonstrating some of these properties: View a simple demo of eventClick. Normally, if the Event Object has its url property set, a click on the event will cause the browser to visit the event’s url (in the same window/tab).
You need to set the hide property of the qTip constructio from "false" to somthing like the following:
Example:
hide: show: {
target: $(this).find('#bubbleClose1'),
when: { event: 'click' },
ready: true
}
});
I have never worked with qTip, but it seems this should do. It will bind the hide event to the close button inside the children hierarchy of the current instance. Qtip may be using a toggle class or something, to handle the hide/show methods. If this is the case, you may be disrupting the pattern. Even by calling it externally under the binding of "live".
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
