Categories
HTML Javascript jQuery PHP Tutorials

My Calendar – WordPress Plugin Javascript Dates Issues in List View

After contacting the developer of the plugin, the whitespace issue must have occurred during file transfer or during some other mysterious occurrence. The whitespace is not in the original development code, and so not only are my line numbers all wrong, but this shouldn’t be an issue for anyone else.

While working with the plugin My Calendar by Joe Dolson I encountered a small issue. Whenever I tried to view my calendar as a list, the event list would become hidden on page load.

I had to identify the offending script that was hiding my events on me. Using Chrome’s debugger I was able to identify the offending script as “../wp-content/plugins/my-calendar/js/mc-list.js” which included:

(function ($) {
    'use strict';
    $(function () {
        $("li.mc-events").children().not(".event-date").hide();
        $("li.current-day").children().show();
        $(document).on("click", ".event-date",
            function (e) {
                e.preventDefault();
                $(this).parent().children().not(".event-date").toggle().attr("tabindex", "-1").focus();
                var visible = $(this).parent().find(".vevent").is(":visible");
                if (visible) {
                    $(this).parent().find(".vevent").attr("aria-expanded", "true");
                } else {
                    $(this).parent().find(".vevent").attr("aria-expanded", "false");
                }
            });
    });
}(jQuery));

We are interested in this line in particular:

$("li.mc-events").children().not(".event-date").hide();

Which directs all children that aren’t the date to be hidden. The issue arises when WPautoP does it’s thing and wraps the date in a <p> paragraph tag. While the .event-date will remain visible, it’s parent <p>  becomes hidden and in turn hides .event-date.

The solution is to modify “../wp-content/plugins/my-calendar/my-calendar-output.php” at line 2563 to remove the unnecessary line breaks.

I’m going to get in contact with the dev as this is the second time I’ve run into issues because of whitespace in the source code.

 

By Zachary Melo

I'm a web and graphic designer with a special interest in Wordpress development. I'm splitting my time between Toronto firm work, and Niagara freelance - the best of both worlds.

To say I'm a man of many hats is an understatement. My friends and family will be the first to say there isn't much I can't do, and do well. Don't be surprised to find me writing about some offbeat or otherwise unexpected subjects.

Leave a Reply

Your email address will not be published. Required fields are marked *