Question

27

fullcalendar with clickable popup on hover

rated 0 times [ 33] [ 6] / answers: 1 / hits: 88169 / 10 Years ago, mon, march 17, 2014, 12:00:00

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

        }

    });

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leog

Add To Favorites

Follow

Total Points: 225

Total Questions: 113

Total Answers: 118

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

leog questions

1 Why using toRef(props) and is it good idea to change their value in CompositionAPI?

Fri, Oct 1, 21, 00:00, 3 Years ago

1 Material-UI pickers trigger validation on blur not on change?

Sun, Sep 13, 20, 00:00, 4 Years ago

1 What's the difference between onClick ={ () => function()} and onClick = {function()}?

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Detect an Electron instance via JavaScript

Mon, May 11, 20, 00:00, 4 Years ago

1 changing theme with react native elements not working?

Sat, Apr 18, 20, 00:00, 4 Years ago

View All

answered 10 Years ago paulinap · Accepted Answer

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>