Question

I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:

<script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                events: {
                url: 'my feed url'
                }
                eventAfterRender: function(event, element, view ) { 
                    if(event.url) {
                        $('a',$(element)).colorbox({
                            type: 'ajax'
                        });
                    }                    
                }
            })

        });
</script>

I don’t think I completely understand what’s going on with fullcalendar’s event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!

Answer 1

Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,

$('#calendar').fullCalendar({
  editable: true,
  eventClick: function(calEvent, jsEvent, view) {
    $.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
  },
  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)
            }
          ]
});

This is a very basic example. You can expand on it as per your requirements. Hope it helps.