How to display custom HTML in a popup window or tooltip

Question

I would like to display a tooltip / popup like Google Calendar using fullcalendar.

Whenever a user clicks on a date cell then a screen should be pop up in which I want to display custom HTML/PHP code. When the user enters the value I want to save it in the database using PHP.

Do you have some code you started on this? Then we can help you with where to go from there. — Nightgem, Sep 04 '12 at 04:22
I have got just simple full calendar example yet http://jsfiddle.net/78m9L/2/ which show pop screen but I want to show my own html div in that pop up screen so I can take values from the user and save it in the database. — Bilal, Sep 04 '12 at 04:56

score 1 · Answer 1 · answered Sep 04 '12 at 15:12

1

I think the eventRender callback is better suited for this.

Check this fiddle: http://jsfiddle.net/100thGear/h9cC6/

answered Sep 04 '12 at 15:12

ganeshk

5,583
3
27
31

score 0 · Answer 2 · edited May 23 '17 at 12:09

You can use a few different libraries (for instance http://www.jquerypopup.com/).

Then use something like this:

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

Or use this option without plugins: How to generate a simple popup using jQuery

I found the jQuery Mobile plugin really useful:

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/

<script src="../../../js/jquery.mobile-1.2.0-alpha.1.js"></script>
<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.<p>
</div>

score 0 · Answer 3 · edited Dec 15 '14 at 18:48

0

I've managed to answer my own question. I've added the following in FullCalendar initialization:

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

In that method I use a hidden div, which is present in my HTML, like this:

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

edited Dec 15 '14 at 18:48

Luís Cruz

14,780
16
68
100

answered Sep 04 '12 at 08:05

Bilal

265
8
20

1

I think it is easier for you to do this via the `eventRender` callback instead. You can attach the tip directly to the event div before it gets rendered. – ganeshk Sep 04 '12 at 13:56

Venkat.R · Answer 4 · 2018-09-03T07:59:47.787

Take a look at my Fiddle Link FullCalendar with QTip

Refer this FullCalendar Document eventRender. below is the sample code snippet.

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

How to display custom HTML in a popup window or tooltip

4 Answers4