CODEWITHSUNDEEP
jquerycalendar
user45678
user45678

Reputation: 1514

jQuery FullCalendar onclick show popup

Here is my jQuery Fullcalendar script which shows calendar in grid view. Now onClick of event i want to show details in popup instead of opening in browser, i tried many callbacks but didn't work. Has anyone worked on it before ?

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // US Holidays
        // events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',


        eventClick: function(event) {
            // opens events in a popup window
            window.open(event.url, 'gcalevent', 'width=700,height=600');
            return false;
        },

        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            }else{
                $('#loading').hide();
            }
        }

    });

});

Tried below thing but didn't work

eventClick: function(event) {
            if (event.url) {
              $('#myDialog')
                .load(event.url)
                .dialog({
                  width: 500,
                  height:300
                });
              return false;
        }},

Upvotes: 1

Views: 24187

Answers (3)

Hadi R.
Hadi R.

Reputation: 413

you can use eventClick for fullcalendar like below

 $('#calendar').fullCalendar({
 eventClick: function(calEvent, jsEvent, view) {
// call your javascript function to open modal or popup here
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);

// change the border color just for fun
$(this).css('border-color', 'red');

 }
});

the document link is here.

Upvotes: 1

Tricky12
Tricky12

Reputation: 6820

Give this a try:

HTML

<div id="popup"></div>

CSS

#popup {
    display: none;
}

JQuery

eventClick: function(event) {
    // opens events in a popup window
    $('#popup').html('<iframe src="'+event.url+'" width="700" height="600"></iframe>');
    $('#popup').dialog({autoOpen: false, modal: true, width: 750, height: 675});
    return false;
},

Note: Make sure you download and include JQuery UI from here if you haven't.

JSFiddle

Upvotes: 1

vegemite4me
vegemite4me

Reputation: 6896

If by

show details in popup

you mean an alert, you could do this:

eventClick: function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
    // change the border color just for fun
    $(this).css('border-color', 'red');
}

In action: http://jsfiddle.net/vegemite4me/N8XT9/

Upvotes: 2

Related Questions