Grid to show events without hovering

Hello jmoore88

I picked a cell code (td) of your gce calendar to explain how to fetch the infos with my jQuery snippet:

<td class="gce-has-events gce-feed-121 gce-day-past">
    <span class="gce-day-number">14</span>
    <div class="gce-event-info">
        <ul>
            <li class="gce-tooltip-feed-121">
                <div class="gce-list-event gce-tooltip-event">Gig Name (repeating)</div>
                <div>Starts: 6:00 pm</div>
                <div>Ends: April 14, 2015 - 8:30 pm</div>
                <div>Location: Warmdaddy's, 1400 South Columbus Boulevard, Philadelphia, PA 19147, United States</div>
                <div>Description: Weekly Blues Jam</div>
                <div><a href="https://www.google.com/calendar/event?eid=OXNsaDhwY3NtbW1rdmJoNXRlbzQ3cmMxMjBfMjAxNTA0MTRUMjIwMDAwWiBpdGdiczRwb3RrYTkwMmFtcGQ0dTNvamxha0Bn&ctz=America/New_York" target="_blank">More details...</a></div>
            </li>
        </ul>
    </div>
</td>

If a td has gce-has-events class it has events. In this td, you have your tooltip infos (gce-event-info). The title of your event is enclosed in a div with gce-tooltip-event class.
So instead of searching for h2, you have to search for .gce-tooltip-event (if you only need the title of your event).
Replace in the code I gave earlier this :
qt_content = source_td.find('.gce-event-info h2');
By this :
qt_content = source_td.find('.gce-event-info .gce-tooltip-event');

@sam:
Paste a td code of your claendar here if you want me to help you ??

Thanks for the explanation. I got it working – now I just need to find a way to make the events appear to be on top of the number (so they don’t take up so much space).

Replace this:
source_td.append('<div style="font-size: 0.8em; margin: 10px; padding: 2px 5px; border-radius: 4px; background: #FFF">' + c + '</div>');
By this:
source_td.prepend('<div style="font-size: 0.8em; margin: 10px; padding: 2px 5px; border-radius: 4px; background: #FFF">' + c + '</div>');

(Instead “append”, use “prepend” method)

Sorry, I should have been more clear- I’d like the events to have the bigger number behind. Basically, the events are floating transparently above the numbers.

Sorry, I don’t understand what you want to do. If you want to change the position of the appended or prepended div, you cn do it by changing his style (position absolute for instance)…

Yes, just adding position: absolute is what I needed. I thought I tried that already, but that’s definitely the trick. Thanks again for your efforts on this code. You make me look good!

Hi f1ng3rs and everyone else!

Another way to make it display without hover is to disable the CSS and Hover Settings. We can do this by going to the dashboard, then on the sidebar click GCal Events > All GCal Feeds, select your calendar feed and press Edit. In the Feed Settings uncheck Show Tooltips (It’s near the end) and save the changes.

Next we will go GCal Events > General Settings and check the box next to Disable Plugin CSS and save the changes.

Now you can write your own css for the calendar and it will show your calendar events without hover.

jojaba, If I add this to my footer.php file what section do I need to edit so it reflects in my calendar page???

<?php if(is_single()) : ?>
<script>
/* Adding title to each day (td) for calendar */
var get_title_func = function() {
jQuery(“td.gce-has-events”).each(function(){
// Finding infos content
var source_td = jQuery(this);
var qt_content = source_td.find(‘.gce-event-info h2’);
// if multiple events on one day we have to loop
qt_content.each(function() {
var c = jQuery(this).html()
source_td.append(‘<div style=”font-size: 0.8em; margin: 10px; padding: 2px 5px; border-radius: 4px; background: #FFF”>’ + c + ‘</div>’);
});
});
}
// Launch function after window load and after ajax request
jQuery(window).load(get_title_func);
jQuery(document).ajaxSuccess(get_title_func);
</script>
<?php endif; ?>

I’m trying to display the event titles without hovering and tried some of the advice above but still can’t get it to work.

Would someone be able to assist?

https://frankfordtennis.com/gce_feed/flower-mound-tennis-program/

at the moment that is not supported in grid view, you need to switch to list/grouped list – sorry

you may try some css/js hacking as suggested in this thread, but that might break things in future

there will be a future release of the plugin where you’ll be able to create your own views/calendars eventually