ホバー上のクリック可能なポップアップを備えたフルカレンダー
this one のようなホバーフルカレンダーにポップアップが必要です。
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);
}
});
});
私のコードをここに
$(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>
Bootstrap tooltip plugin http://getbootstrap.com/javascript/#tooltips を使用し、eventRenderコールバック内に次のように記述します。
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
}
これは動作します
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();
},
この例を確認してください。 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);
}
ホバーではなくクリックで機能しますが、ホバーでも機能するように調整できます
ShopifyでjQueryを既にアクティブにしてこれを行っています。
bootstrap Tooltipプラグインをダウンロードしましたが、実際にはpopoverプラグインを使用することをお勧めします。
必要なbootstrap CSSファイルとJSファイルにリンクした後、以下を入手しました。
$(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!
}
]
});
});
FullCalendarのバージョン4では、引数は1つのみです：eventRender：function（info）
したがって、スニペットは次のとおりです。
eventRender: function (info) {
$(info.el).tooltip({ title: info.event.title });
}