CODEWITHSUNDEEP
jquery
Tiny
Tiny

Reputation: 363

in fullcalendar when clicking on an event with an associated url

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>

Upvotes: 10

Views: 33560

Answers (4)

maskedjellybean
maskedjellybean

Reputation: 719

If using V4 of FullCalendar, try this instead:

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

Upvotes: 10

Prashant Rijal
Prashant Rijal

Reputation: 44

        fullCalendar({
            viewRender: function(view, element) {
                if (view.name != 'month') {
                    $(element).find('.fc-scroller').perfectScrollbar();
                }
            },
            header: {
                left: 'title',
                center: 'month',
                right: 'prev,next,today'
            },
            defaultDate: today,
            disableDragging: true,
            editable: false,
            selectable: true,
            selectHelper: true,
            views: {
                month: { // name of view
                    titleFormat: 'MMMM YYYY'
                },
                week: {
                    titleFormat: " MMMM D YYYY"
                },
                day: {
                    titleFormat: 'D MMM, YYYY'
                }
            },
            select: function(start, end) {
                swal({
                    title: 'Create an Event',
                    html: '<div class="form-group">' +
                    '<input class="form-control" placeholder="Event Title" id="input-field">' +
                    '</div>',
                    showCancelButton: true,
                    confirmButtonClass: 'btn btn-success',
                    cancelButtonClass: 'btn btn-danger',
                    buttonsStyling: false
                }).then(function(result) {
                    var eventData;
                    event_title = $('#input-field').val();
                    if (event_title) {
                        eventData = {
                            title: event_title,
                            start: start,
                            end: end
                        };
                        $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
                    }
                    $calendar.fullCalendar('unselect');
                }).catch(swal.noop);
            },
            eventLimit: true, // allow "more" link when too many events
            events: {
                url: base_url+'p-teacher/calendar.php',
                failure: function() {
                    document.getElementById('script-warning').style.display = 'block'
                }
            },
            eventClick: function(event) {
                if (event.url) {
                    window.open(event.url, "_blank");
                    return false;
                }
            }
        });

This works for me.

Upvotes: 0

Typolist
Typolist

Reputation: 21

Thanks for this!

If you want to distinguish between internal linking (same window) and external linking (new window), you could solve it as follows:

...

eventClick: function(event) { 
    // If extern url/domain 
    if (event.url.indexOf(document.location.hostname) === -1) {
       // Open url in new window
       window.open(event.url, "_blank");
       // Deactivate original link
       return false;
    }
},
...

Upvotes: 2

Derek
Derek

Reputation: 480

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

Upvotes: 30

Related Questions