Home/ Questions/Q 7186731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:41:42+00:00

I’m using FancyBox throughout the project I’m working on, and would like to implement

  • 0

I’m using FancyBox throughout the project I’m working on, and would like to implement FancyBox into the FullCalendar script. Basically, I want to figure out how to pass the event’s description to a FancyBox pop up. I’m using 11 different Google Calendar feeds. I fear that may prevent this from happening. If that is the case, I’ll likely give up this idea entirely.

I’ve seen other questions similar to mine, such as using the events.push section of the gcal.js file, but I can’t seem to figure out how to make others’ solutions work. Some of the other questions I’ve looked at are:

Is there a way to pass the events.push section of the gcal.js file to a FancyBox pop up? Or is there some other way to pass the event description to FancyBox? Should I consider converting my Google Calendar feeds to JSON strings and instead use PHP/MySQL to create and store events? Am I overlooking something blatantly obvious?

Here is the current script I’m using to fire FancyBox on eventClick.

  eventClick: function(event) {
    if (event.url) {
        $.fancybox({
            'type': 'iframe',
            'href': 'event.url'
        })
        return false;
    }
  }

In its current form, there is clearly no mention of events.push or anything similar. It works great for launching FancyBox, but not much else. Using event.url like I am now, I’m given a missing page error, but I believe that may be due to the fact that I’m testing this locally and not on a live server. I could be mistaken, however.

I would appreciate any help. Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So, naturally after posting my question the night before, I just found a solution. For anyone else who has this problem, here is what I did:

    eventClick: function(event) {
    if (event.url) {


        var fancyContent = ('<div class="header">Event Details</div> <div id="prac" class="pracform"> <label><b>Event: </b></label>' + event.title + '<br>' + '<label><b>Date: </b></label>' + event.date + '<br>' + '<label><b>Start Time: </b></label>' + event.start + '<br>' + '<label><b>End Time: </b></label>' + event.end + '<br>' + '<label><b>Description: </b></label>' + '<div class="event_desc">' + event.description + '</div>' + '<br>' + '<label><b>Location: </b></label><a href=' + event.url + '>' + event.location + '</a>' + '<br>' + '</div>');

        $.fancybox({
            'content': fancyContent
        })
        return false;
    }
}

    I am, however, having difficulty with editing the gcal.js file to change the time set from ISO8601 to h:mmTT, and I’m wondering if it’s possible to have a separate date category as I’ve used above (in its current form it returns as “undefined”). Maybe in a future release of FullCalendar?

    • 0