FullCalendar event click through FancyBox (v2)

问题

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:

eventClick with lightBox?
jQuery fullCalendar + Fancybox popup to edit event
fullcalendar jQuery - Possible to retrieve description from Google Calendar events?
Using Fullcalendar to Display Google Calendar Event Description Field in Tooltip

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.

回答1:

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?

回答2:

I faced the same issue, and using the eventClick example from the fullcalendar documentation, I did the following:

eventClick: function(event) {
    if (event.url) {
    $("a").fancybox(event.url);
        return false;
    }
}

Not sure if that will help, but it worked for me. The only issue I'm having with this solution is that on the first click, the fancybox is not invoked. On the second click and any subsequent clicks, it does work fine.

来源：https://stackoverflow.com/questions/8957822/fullcalendar-event-click-through-fancybox-v2

标签

javascript

fancybox

fullcalendar

google-calendar-api