Support » Plugin: Modern Events Calendar Lite » “Add to Calendar” button

  • Resolved Lightwing

    (@lightwing)


    I have thoroughly reviewed all documentation and support forums but I can’t find any information regarding an “Add to Calendar” button for events. Is there one in your software – either Lite or Premium? If not, do you know of one that integrates with your software?

    Thank you!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter Lightwing

    (@lightwing)

    Additionally, is there a way to add a 3rd-party button like this one? `<a href=”https://add.eventable.com/events/606f4de7a200790cad3d2f3f/606f4de9e94c870e8ba7e918&#8243; class=”eventable-link” target=”_blank” data-key=”606f4de7a200790cad3d2f3f” data-event=”606f4de9e94c870e8ba7e918″ data-style=”3″ rel=”noopener”>Add to Calendar</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=’https://plugins.eventable.com/eventable.js&#8217;;fjs.parentNode.insertBefore(js,fjs);}}(document,’script’, ‘eventable-script’);</script>`

    I tried to add it to the “Text” tab in the editor for the event but it displayed the code instead of a button. Please advise. Thanks.

    Plugin Author Webnus

    (@webnus)

    Hello @lightwing,

    You looking for which button exactly?
    We provided 2 buttons for “Add to Calendar”, we explained here: https://webnus.net/dox/modern-events-calendar/export-module/

    If you need to customize MEC, so you can follow those articles on this link:
    https://webnus.net/dox/modern-events-calendar/category/developer-document/

    Best Regards

    Thread Starter Lightwing

    (@lightwing)

    Thank you for your response. I read the documentation and I found the Module > Export Options and everything is checked/turned on. But I can’t see the buttons you screenshotted on either the Event Editor page or the live calendar page. Am I looking in the wrong place?

    Plugin Author Webnus

    (@webnus)

    Hello @lightwing,

    Please send a live URL from your issue.
    Regarding showing the modules, please follow the steps explained here: https://webnus.net/dox/modern-events-calendar/single-events-sidebar/

    Best Regards

    Thread Starter Lightwing

    (@lightwing)

    Activating the sidebar widget did not solve my problem. The buttons did not render even after turning everything on. I thoroughly read the instructions on this page:https://webnus.net/dox/modern-events-calendar/export-module/ and this page: https://webnus.net/dox/modern-events-calendar/add-event/

    There is some step missing. Would you please just outline the exact steps to get the “Add-to-Calendar” buttons to show on the calendar page? Thank you.

    Thread Starter Lightwing

    (@lightwing)

    For anyone in the future who runs into this issue in the future, the instructions the author posted will not help you at all.

    This issue appears if you populate Event Details > Links > Event Link form input. My client had already created a blog post for the event and I wanted to link to it not realizing that I should have grabbed the post content and copied it into the Event Editor Text Editor and allowed the MEC engine to create the post (in the ‘events’ custom post type that MEC uses.

    If you leave the Event Link blank, it points to the MEC Event page and generates both iCal and Google calendar export buttons at the bottom of the post page. If you populate this input, it will point to a non-MEC page and it won’t have the buttons. Which is why I couldn’t see them and had to spend 5 hours debugging this issue.

    Plugin Author Webnus

    (@webnus)

    Hello @lightwing,

    Sorry for the misunderstanding.

    I didn’t understand what you needed exactly?

    Please explain your issue step by step, include screenshots, URLs, and any other document so we can understand and check it better.

    ____________________
    You can use an online service to upload your screenshots/files:

    1. https://postimages.org/
    2. https://wetransfer.com/
    3. https://www.dropbox.com/
    4. https://imgur.com/
    5. https://imgbb.com/
    6. https://drive.google.com/drive/
    7. And etc…

    Or send them to us via this email: support@webnus.net

    Best Regards

    and it would be nice if the calendar export buttons (just links actually) and the countdown would appear in the mec single sidebar instead of buried below the like/share/related items @ the bottom;-}

    If you leave the Event Link blank, it points to the MEC Event page and generates both iCal and Google calendar export buttons at the bottom of the post page. If you populate this input, it will point to a non-MEC page and it won’t have the buttons.

    i do see the calendar export buttons (links actually…it would b nice to have icons as well) when i populate the event link, but i don’t see the link anywhere on the event page, only in the calendar export info:-\

    i’ve kludged my webpage’s custom styles:

    .mec-events-meta-group-countdown
    {
        position: fixed;
        top: 4px;
        right: 4px;
        width: 33%;
        z-index: 0;
    }
    .mec-event-export-module
    {
         position: relative;
         bottom: 550px;
         left: 105%;
         width: 45%;
         z-index: 1;
    }
    .mec-events-button, a.mec-events-button
    {
         color: grey!important;
         background-color: transparent!important;
         padding:0px!important;
    }
    .mec-export-details ul li
    {
         text-align:center!important;
         background-color: grey;
         border-radius: 20px;
    }

    see https://cardinalglen.org/events/sterling-district-virtual-sanitation-services-community-meeting/

    unfortunately, the position of the calendar buttons is a problem…ideally they shd be grouped with time/date (and have nice icons, but unfortunately the ical link has the same class as the google link: mec-events-gcal)-:

    • This reply was modified 7 months, 2 weeks ago by airdrummer.
    Thread Starter Lightwing

    (@lightwing)

    @airdrummer

    Thanks for the extra info!

    Thread Starter Lightwing

    (@lightwing)

    @webnus

    No worries. It’s all figured out now. If you read my post above yours, you will see why I was confused and how I resolved it. Thanks!

    i also want the google/ical links to appear under the mec-event-info box, so i created single-mec-events.php & added some javascript:

    <script type="text/javascript" id="cghoa-reparent-export-div">
        var countdown = document.querySelector("#mec_countdown_details");
        if ( countdown === null )
        {
     	    var msg = document.createElement("h3");
    	    msg.appendChild(document.createTextNode("This event has passed"));
    	    var infobox = document.querySelector(".mec-event-meta");
    	    infobox.insertBefore(msg, infobox.firstChild);
            countdown = document.querySelector(".mec-events-meta-group-countdown");
    	    if (countdown !== null) 
    	        countdown.remove();
        }
        var icals = document.querySelector(".mec-event-export-module");
        if ( icals !== null )
        {
    	var info = document.querySelector(".col-md-4");
            b4 = info.lastChild.nextSibling;
            info.insertBefore(icals,b4);
        }
        var article = document.querySelector("article.mec-single-event");
        var jprp = document.querySelector("#jp-relatedposts");
        if ( jprp !== null )
        {
            b4 = article.lastChild.nextSibling;
            article.insertBefore(jprp,b4);
        }
        var shdy = document.querySelector("div.sharedaddy");
        if ( shdy !== null )
        {
            b4 = article.lastChild.nextSibling;
            article.insertBefore(shdy,b4);
        }
    </script>

    stil haven’t figured out how to move the like buttons:-\

    i decided to move the countdown above the date&time block:

    <script type="text/javascript" id="cghoa-reparent-export-div">
        var info      = document.querySelector(".col-md-4");
        var countdown = document.querySelector(".mec-events-meta-group-countdown");
        var cdeets    = document.querySelector("#mec_countdown_details");
        if ( cdeets === null )
        {
     	var msg = document.createElement("h3");
    	msg.appendChild(document.createTextNode("This event has passed"));
    	var mem = document.querySelector(".mec-event-meta");
    	mem.insertBefore(msg, mem.firstChild);
    	if (countdown !== null) 
    	    countdown.remove();
        }
        else if (countdown !== null) 
        {
    	info.insertBefore(countdown, info.firstChild);
        }
    

    which works perfectly, but on mobile, all 3 browsers put it after the 1st child, not before…wtf:-\

    i also forgot to post the mec custom css which sticks the calendar icons in front of the calendar links:

    .mec-events-gcal::before
    {
        content: url(/wp-content/themes/cscab/images/Google-Calendar-32.png);
    }
    a.mec-events-gcal[href^='https://mycascadescenter.org']::before 
    {
        content: url(/wp-content/themes/cscab/images/ical-icon32.png);
    }

    replace paths as needed…

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.