Fullcalendar с интерактивным всплывающим окном
Мне нужно всплывающее окно с полным набором календаря, например этот.
Попробовал полный календарь с qtip, но не смог получить щелчок по всплывающим окнам, когда мышь вышла с места.
Здесь похожий пример, но ему нужно создать кликабельное всплывающее окно, подобное приведенному выше примеру
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'Test1',
start: new Date(2012, 8, 20),
tip: 'Personal tip 1'
},
{
title: 'Test2',
start: new Date(2012, 8, 21),
tip: 'Personal tip 2'
}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: events_array,
eventRender: function(event, element) {
element.attr('title', event.tip);
}
});
});
Ответы
Ответ 1
heres мой код
$(document).ready(function() {
// Setup FullCalendar
// Setup FullCalendar
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#fullcalendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#fullcalendar').fullCalendar({
editable: true,
height: 600,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventMouseover : function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
}
]
});
}());
});
</script>
Ответ 2
Использовать плагин всплывающей подсказки http://getbootstrap.com/javascript/#tooltips. И затем внутри обратного вызова eventRender напишите следующее:
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
}
Это будет работать
![enter image description here]()
Ответ 3
eventMouseover: function(calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
Ответ 4
проверьте этот пример. http://jsfiddle.net/craga89/N78hs/
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
}
он работает с кликом, а не с зависанием, но вы также можете адаптировать его для работы с зависанием.
Ответ 5
Я делаю это в Shopify с уже активным jQuery.
Я скачал плагин bootstrap Tooltip, но на самом деле предпочел использовать плагин popover.
После ссылки на необходимые файлы начальной загрузки CSS и JS у меня появилось следующее. Если вы предпочитаете использовать всплывающую подсказку, то, что я сработал, но я прокомментировал это в предпочтении popover.
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'month',
//eventBackgroundColor: 'red',
//weekends: false,
eventTextColor: '#FFFFFF',
hiddenDays: [ 0 ],
header: {
left: 'prev,next',
center: 'title',
right: 'month,basicWeek,'
},
// eventRender: function(event, element) {
// $(element).tooltip({title: event.description});
// },
eventRender: function(event, element) {
$(element).popover({title: event.title, content: event.description, trigger: 'hover', placement: 'auto right', delay: {"hide": 300 }});
},
googleCalendarApiKey: 'XXXXXX',
eventSources: [
{//BEGINNERS ACTING FUN
googleCalendarId: 'XXXXX',
color: '#990000', // an option!
},
{//INTERMEDIATES SCENE WORK
googleCalendarId: 'XXXX',
color: 'purple', // an option!
},
{//INTERMEDIATES SCENE WORK
googleCalendarId: 'XXX',
color: 'blue', // an option!
},
{// VOICE & COMMUNICATION SKILLS
googleCalendarId: 'XXXX',
color: 'green', // an option!
}
]
});
});
Ответ 6
В версии 4 FullCalendar есть только один аргумент:
eventRender: функция (информация)
таким образом, фрагмент:
eventRender: function (info) {
$(info.el).tooltip({ title: info.event.title });
}
Ответ 7
$(document).ready(function() {
// Setup FullCalendar
// Setup FullCalendar
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#fullcalendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#fullcalendar').fullCalendar({
editable: true,
height: 600,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventMouseover : function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
}
]
});
}());
});
</script>
