Fullcalendar 如何在弹出窗口或工具提示中显示自定义HTML

我想用谷歌日历显示一个工具提示/弹出窗口

---

每当用户单击日期单元格时，就会弹出一个屏幕，我想在其中显示自定义HTML/PHP代码。当用户输入值时，我希望使用PHP将其保存在数据库中。

您可以使用几个不同的库（例如）

然后使用类似的方法：

$(document).ready(function() {
    //Change these values to style your modal popup
    var align = 'center';                                       //Valid values; left, right, center
    var top = 100;                                              //Use an integer (in pixels)
    var padding = 10;                                           //Use an integer (in pixels)
    var backgroundColor = '#FFFFFF';                            //Use any hex code
    var borderColor = '#000000';                                //Use any hex code
    var borderWeight = 4;                                       //Use an integer (in pixels)
    var borderRadius = 5;                                       //Use an integer (in pixels)
    var fadeOutTime = 300;                                      //Use any integer, 0 = no fade
    var disableColor = '#666666';                               //Use any hex code
    var disableOpacity = 40;                                    //Valid range 0-100
    var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page

    //This method initialises the modal popup
    $(".modal").click(function() {
        var source = 'intro.php';   //Refer to any page on your server, external pages are not valid
        var width = 500;                    //Use an integer (in pixels)

        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    }); 

    //This method initialises the modal popup
    $(".landscape").click(function() {
        var source = 'lib/landscape.jpg';   //Refer to any page on your server, external pages are not valid
        var width = 920;                    //Use an integer (in pixels)
        var top = 10;                       //Use an integer (in pixels)

        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    });

    //This method hides the popup when the escape key is pressed
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            closePopup(fadeOutTime);
        }
    });
});

<div id="addEvent" style="display: none; background-color:#F7F7F7;position: absolute; width: 300px; z-index: 1000;">
</div>

或者在不使用插件的情况下使用此选项：

我发现jQuery移动插件非常有用：

这是一个完全基本的弹出窗口，没有设置选项。

我已经设法回答了自己的问题。我在FullCalendar初始化中添加了以下内容：

select: function(start, end, allDay, jsEvent, view){
    $('#addEvent').css({ left: jsEvent.pageX, top: jsEvent.pageY }).show("slow").fadeIn();
},

在该方法中，我使用了一个隐藏的div，它出现在我的HTML中，如下所示：

$(document).ready(function() {
    //Change these values to style your modal popup
    var align = 'center';                                       //Valid values; left, right, center
    var top = 100;                                              //Use an integer (in pixels)
    var padding = 10;                                           //Use an integer (in pixels)
    var backgroundColor = '#FFFFFF';                            //Use any hex code
    var borderColor = '#000000';                                //Use any hex code
    var borderWeight = 4;                                       //Use an integer (in pixels)
    var borderRadius = 5;                                       //Use an integer (in pixels)
    var fadeOutTime = 300;                                      //Use any integer, 0 = no fade
    var disableColor = '#666666';                               //Use any hex code
    var disableOpacity = 40;                                    //Valid range 0-100
    var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page

    //This method initialises the modal popup
    $(".modal").click(function() {
        var source = 'intro.php';   //Refer to any page on your server, external pages are not valid
        var width = 500;                    //Use an integer (in pixels)

        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    }); 

    //This method initialises the modal popup
    $(".landscape").click(function() {
        var source = 'lib/landscape.jpg';   //Refer to any page on your server, external pages are not valid
        var width = 920;                    //Use an integer (in pixels)
        var top = 10;                       //Use an integer (in pixels)

        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    });

    //This method hides the popup when the escape key is pressed
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            closePopup(fadeOutTime);
        }
    });
});

<div id="addEvent" style="display: none; background-color:#F7F7F7;position: absolute; width: 300px; z-index: 1000;">
</div>

---

我认为

eventRender

回调更适合这种情况

检查这把小提琴：

---

看看我的小提琴链接

参考这个。下面是示例代码片段

事件渲染

$('#calendar').fullCalendar({
  events: [
    {
      title: 'My Event',
      start: '2010-01-01',
      description: 'This is a cool event'
    }
    // more events here
  ],
  eventRender: function(event, element) {
    element.qtip({
      content: event.description
    });
  }
});

---

你有这方面的代码吗？然后我们可以帮助您从那里开始。我有一个简单的完整日历示例，它显示弹出屏幕，但我想在弹出屏幕中显示我自己的html div，这样我就可以从用户那里获取值并将其保存在数据库中。我想您更容易通过

eventRender

回调来实现这一点。可以在渲染之前将提示直接附加到事件div。