开发者

Using Fullcalendar to Display Google Calendar Event Description Field in Tooltip

开发者 https://www.devze.com 2023-03-13 15:20 出处:网络
I recently started a project using Fullcalendar (http://arshaw.com/fullcalendar/) to display multiple Google Calendar feeds primarily for the ability to have control over the theme.I\'d like to keep a

I recently started a project using Fullcalendar (http://arshaw.com/fullcalendar/) to display multiple Google Calendar feeds primarily for the ability to have control over the theme. I'd like to keep as much of the functionality of Google Calendar intact as possible, albeit as a read only display to use in place of the embedded widget that Google provides. To that end, I'm looking to alter the default eventClick behavior to display info from the event's description field in a tooltip (qTip maybe?) instead of linking directly to the event details page.

It seems clear to me that the first step in making this happen would be retrieving the description field from Google's XML feed (which as best as I can tell can be converted into a JSON feed by way of the the provided Google plugin) and appending it to the default fields of the event object. Unfortunately, that's about all that is clear to me. I did find this question which seems to be asking for the same thing where this code from the gcal.js file was referenced as a solution, but I'm still not sure how I'm supposed to integrate the options from the event.push into the event objects created by my eventSources.

events.push({
                        id: entry['gCal$uid']['value'],
                        title: entry['title']['$t'],
                        url: url,
                        start: start,
                        end: end,
                        allDay: allDay,
                        location: entry['gd$where'][0]['valueString'],
                        description: entry['content']['$t']
                    });

Currently, I have my eventSources set up as an array with options, like so:

eventSources:[
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/j6q1n0lq7vf222o6kltaupa01s%40group.calendar.google.com/public/full",{className: 'prime',color:'#003366'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/j6q1n0lq7vf222o6kltaupa01s%40group.calendar.google.com/public/full",{className: 'premium',color:'#006699'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/jv19jhbr7fepl3rfh474l5udgc%40group.calendar.google.com/public/full",{className: 'platinum',color:'#80CCD4'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/n058u7qetmcm2p49p7s650v5e0%40group.calendar.google.com/public/full",{className: 'che',color:'#607386'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/j92j2chtbqu5bob9scv0u2hlfo%40group.calendar.google.com/public/full",{className: 'mho',color:'#587498'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/t1vglkquofrk91qkbo8stl756g%40group.calendar.google.com/public/full",{className: 'mentor开发者_JAVA百科s',color:'#14B2B2'}),
                $.fullCalendar.gcalFeed("https://www.google.com/calendar/feeds/mbb6akqbs4rdetqre07cuhi2vs%40group.calendar.google.com/public/full",{className: 'weddings',color:'#660033'})
], 

I also tried setting up the eventSources as a function, as outlined in the Fullcalendar documentation but setting a description:$(this).attr('description') field didn't seem to do the trick either. If it isn't obvious by now, I'm by no means I code ninja but I do follow instructions well when they are provided and can usually figure out where I need to plug in variables if provided with working code samples. I'm about at my wits end with this, and would sincerely appreciate any input. Thanks!

0

精彩评论

暂无评论...
验证码 换一张
取 消