Viewing 15 replies - 1 through 15 (of 25 total)
  • I would love this also, even if it was only displaying the title and requiring the hover for more info as happens at present. I have a calendar with things on most days, and it looks like a blank calendar when all teh days have a highlighted date.

    Many thanks,
    Dan

    Thread Starter f1ng3rs

    (@f1ng3rs)

    Hi,

    Any news on if this is possible? The google calendar does this by default, I would imagine it wouldbe simple to implement as an option?

    Cheers,
    Craig

    Thread Starter f1ng3rs

    (@f1ng3rs)

    Oh, I’m sorry. I see it has been added to future features. Many thanks, looking forward to it.

    Plugin Contributor Nick Young

    (@nickyoung87)

    This is not currently a feature. To submit a feature request and vote on it though you can vist the Roadmap we have set up.

    https://trello.com/b/ZQSzsarY

    Thanks for the feedback!

    I absolutely would love this feature as well.

    I’m looking also for this feature and tried to think about how this could be done.
    I saw that qtip (jQuery extension that display the tooltip) prints some divs containing all the infos to display at the end of the calendar page, just before </body> tag.
    My suggestion: get the infos that are enclosed in the qtip divs and put them into the right tds (1 td = 1 day). I saw that the id of each qtip div matches the aria-describedby attribut of the td so we should be able to get this infos and put them into the right place using JS or jQuery.
    The problem is that this qtip divs are displayed very late on the page so if you want to get infos about them, you have to launch your script after that. I didn’t manage to do that (tried to insert a script with defer attribut didn’t work). Maybe, the developper of this plugin could give us an advice ??

    Hey!

    Managed to have it work! I only had to get the titles of my events which are enclosed in h2 tags. Here’s my code:

    /* 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);

    you can get all the tooltip content by replacing this:
    var qt_content = source_td.find('.gce-event-info h2');
    By this:
    var qt_content = source_td.find('.gce-event-info');

    Code didn’t work for me, but I’m new to this plugin, so not sure how its best configured.

    I looked up the correct element in my case, and modified the code.
    This works for me, so I thought I’d share if helpful:

    /* 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-tooltip-event');
            // 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);

    Thanks jojaba by the way!

    Thanks filtah.
    I guess my code works on grid calendar and yours in the widget…

    jojaba,
    Thank you for sharing this. I am not exactly sure where to add this code?
    wgfusari

    It depends on where you display the calendar.
    If you display it in a post or as a single page, you can put this code at the end of the single.php file or the footer.php file of your theme.
    For single.php add this code:

    <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>

    If you choose to add it to the footer.php file:

    <?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; ?>

    You can also put it into your function.php file, probably the best way to do it…

    Does this still work? I tried putting in this code in each of single.php,footer.php, and functions.php and none had any effect.

    Still works for me. Can you give me the source of the page where you display the calendar ?
    The code snippet must be added after the jQuery call, is this the case for you?
    Oh and what I get in the code is the h2 title of the day, so if you want to have all infos, just replace this:
    qt_content = source_td.find('.gce-event-info h2');
    By this:
    qt_content = source_td.find('.gce-event-info');

    Unfortunately I can’t can’t post a link yet – development site. I am using a child of the Canvas Theme. I have the ability to add the script pretty much anywhere using hooks, but it doesn’t seem to have any effect.

    Thanks for your efforts! Any other suggestions are welcome!
    – SL

    Hi jojaba,

    I’m hoping to make your code work on a friends site that I’m working on… The page in question is https://www.dustinbeckmusic.com/shows/

    I’ve attempted to paste your code snippet into a few different theme files (footer.php, functions.php, single.php, page.php), but never got the title to populate.

    There’s a second plugin displaying event information above the grid temporarily, but I’ll definitely be switching this site (and possibly others) to Google Calendar Events, IF I can display each event title in the grid view.

    Thanks for your help!

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Grid to show events without hovering’ is closed to new replies.