fullcalendar与可点击弹出式窗口悬停 [英] fullcalendar with clickable popup on hover

问题描述

我需要在悬停完整日历上显示一个弹出式窗口，例如这一个。

$ b $

这里是一个类似示例，但需要创建类似上述示例的可点击弹出窗口。

  $（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），
提示：'个人提示2'
} 
]; 
 
 $（'＃calendar'）。 fullCalendar（{
 header：{
 left：'prev，next today'，
 center：'title'，
 right：'month，agendaWeek，agendaDay'
 }，
 selectable：true，
 event：events_array，
 eventRender：function（event，element）{
 element.attr（'title'，event.tip）; 
} 
}）; 
}）; 
  

解决方案

继承我的代码

  $（document）.ready（function（）{
 //设置FullCalendar 
 //设置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： 'qtip-light'
}）。qtip（'api'）; 
 
 $（'＃fullcalendar'）。fullCalendar（{
 editable：true，
 height：600，
 header：{
 left：'title '，
 center：''，
 right：'今天上一页，下一页'
}，
 eventMouseover：function（data，event，view）{
 var content ='< h3>'+ data.title +'< / h3>'+ 
'< p>< b>开头：< / 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） b end：new Date（y，m，d-2）
}，
 {
 id：999，
 title：'重复事件'，
开始： 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> 
  

I need a pop up on hover full calendar like this one.

Have tried full calendar with qtip but could not get clickable popup its disappers when mouse is out from the spot.

Here's a similar example but it need to create a clickable popup like that of above example

$(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);
        }
    });
});

解决方案

heres my code

    $(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>

这篇关于fullcalendar与可点击弹出式窗口悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！