javascript - example - fullcalendar js events
Active jQuery qTip en el evento Dayclick de FullCalendar y luego cree Evento usando el botón en él (3)
Tu opción para ocultar no parece coincidir con el apidoc, ¿has intentado no configurarlo para que sea falso: en su lugar, especificas el evento que lo oculta (mira el qtip doc), para que qtip haga todo lo que se muestra y se esconde?
CSS aplicado para crear un contenido en información sobre herramientas
.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''
}
evento dayclick en fullcalendar
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>
Ahora, cuando hago clic en un día en el calendario, aparece "qTip ToolTip", que incluye dos botones Botón Cerrar (x) y Crear evento
Cuando hago clic en crear evento , alerta la fecha de ese día y cuando hago clic en el botón Cerrar , oculta esa punta (al principio estaba destruyendo esa sugerencia). Pero cuando vuelvo a hacer clic en el mismo día, la punta no aparece de nuevo. ¿Cómo manejar múltiples qTips? que se activa el díaHaga clic y desaparece haciendo clic en un botón de cerrar o haciendo clic en otra fecha También quiero crear un evento usando el botón createEvent en qTip
Los siguientes códigos deberían funcionar. y también necesita arreglar un error en qtip.js. Uso la versión 1.0.0-rc3, y necesito reemplazar la línea 1003 de for(i = 0; i < interfaces.length - 1; i++) por for(i = 0; i < interfaces.length; i++) .
Sugiero cambiar a otra biblioteca de información sobre herramientas en lugar de qtip. Está sobrediseñado sin un buen propósito que causará muchos elementos HTML de GHOST. o podría intentar qtip2.
<script type="text/javascript">
$(function() {
var self;
$("#calendar").fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
self = this;
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
if ($(this).data(''qtip'') == null || $(this).data("qtip").interfaces.length < 1) {
$(this).qtip({
content: {
text: ''<div><table class="bubble-table" cellspacing="0" cellpadding="0">''+
''<tbody><tr><td class="bubble-cell-side"><div 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 class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>''+
''<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" >''+
''<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 >''+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 class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>''+
''</tr></tbody></table>''+
''<input value="Create event" type="button" class="cl-button-quickAddBTN">''+
''<span class="lk">Edit details <strong>>></strong></span>''+
''<input type="hidden" value="''+date+''">''+
''</div></div></div></td></tr></tbody></table>''+
''<div class="bubble-closebutton">X</div></div>''
},
position: {
corner: {
tooltip: "bottomMiddle",
target: "center"
}
},
adjust: {
screen: true
},
show: {
solo: true,
when: {event: "click"},
ready: true
},
hide: false
});
}
}
});
$(".cl-button-quickAddBTN").live(''click'',function(){
alert($("#box-cl").attr(''value''));
});
$(".bubble-closebutton").live(''click'',function() {
$(self).qtip("Destroy");
});
$.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''
}
});
</script>
Debe establecer la propiedad hide de la construcción de qTip de "falso" a algo así como lo siguiente:
Ejemplo:
hide: show: {
target: $(this).find(''#bubbleClose1''),
when: { event: ''click'' },
ready: true
}
});
Nunca he trabajado con qTip, pero parece que esto debería funcionar. Vinculará el evento hide al botón Cerrar dentro de la jerarquía de elementos secundarios de la instancia actual. Qtip puede estar usando una clase de alternar o algo así, para manejar los métodos ocultar / mostrar. Si este es el caso, puede estar interrumpiendo el patrón. Incluso llamándolo externamente bajo el enlace de "en vivo".