in fullcalendar when clicking on an event with an associated url

Question

In full calendar when clicking on an event with an associated URL, how you do you change from the default open in active window to opening the URL in a new window or tab?

I have found the event function on Arshaws docs but cannot find the relevent function in any of the scripts. Do I need to add the click-event function, and if so where?

Sorry, im still having problems with this, this is the script im using to control the calendar, im not sure how to add the event parameters via json format to get the click function to open the event in a new window. I have indicated the event function im having a problem with

     <script type='text/javascript'>
        $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear(); 
        var calendar = $('#calendar').fullCalendar({
            editable: true,
            weekMode: 'liquid',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            events: "fullcalendar/fullcalendar/events.php",

            // Convert the allDay from string to boolean
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },

            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                var url = prompt('Type Event url, if exits:');
                if (title) {

    var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: 'fullcalendar/fullcalendar/add_events.php',
   data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
   type: "POST",
   success: function(json) {
   alert('Added Successfully');
   }
   })

                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,


               eventDrop: function(event, delta) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: 'fullcalendar/fullcalendar/update_events.php',
   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
   type: "POST",
   success: function(json) {
    alert("Updated Successfully");
   }
   });
   },
      eventResize: function(event) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
    url: 'fullcalendar/fullcalendar/update_events.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
     alert("Updated Successfully");
    }
    });
    },
        eventClick: function(event) {
var decision = confirm("Do you really want to delete this Event?"); 
if (decision==true) {
$.ajax({
url: 'fullcalendar/fullcalendar/delete_events.php',
data:'&id=' + event.id,
type: "POST",
success: function(json) {
    alert("Removed Succesfully");
}
});
$('#calendar').fullCalendar('removeEvents', event.id);

****************************************************************************
$('#calendar').fullCalendar({
events: [
    {
        title: 'My Event',
        start: '2010-01-01',
        url: 'http://stackoverflow.com/'
    }
    // other events here
],
eventClick: function(event) {
    if (event.url) {
        window.open(event.url, "_blank");
        return false;
    }
*****************************************************************************
}
});

} else {
}
}

  });

 });


</script>

Answer 1

You can use the eventClick callback in fullcalendar

$('#calendar').fullCalendar({
events: [
    {
        title: 'My Event',
        start: '2010-01-01',
        url: 'http://stackoverflow.com/'
    }
    // other events here
],
eventClick: function(event) {
    if (event.url) {
        window.open(event.url, "_blank");
        return false;
    }
}
});

Answer 2

If using V4 of FullCalendar, try this instead:

  eventClick: function(event) {
    if (event.event.url) {
      event.jsEvent.preventDefault()
      window.open(event.event.url, "_blank");
    }
  }