Calendar view

What shortcode do I need to use to make the calendar show up like the screenshot attached?

  • Luís
    • Support

    Hi Lauren ,

    Hope you're doing well today!

    Try this CSS code:

    .eab-shortcode_calendar tbody tr:nth-child(2n) {
        background-color: #ebe8e8;
    }
    
    .eab-shortcode_calendar thead {
        color: #666;
    }
    .eab-shortcode_calendar tbody {
        color: #c6c6c6;
    }

    If you are using the calendar widget, replace the class:

    .eab-shortcode_calendar

    by

    .eab-upcoming_calendar_widget

    If you don't know, you should always avoid change the original CSS files, in order to don't lose it all when you make an update.

    So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    Cheers, Luís

  • Luís
    • Support

    Hi Lauren ,

    Hope you're doing well today!

    I did some modifications in the code:

    1) I changed the shortcode to display the navigation:

    [eab_calendar navigation="yes" footer="yes"]

    The "navigation" parameter adds the navigation to the calendar and "footer" shows calendar table footer (similar as the header).

    2) After that I changed the CSS code to:

    /*  Change background color of the paired rows */
    .eab-shortcode_calendar tbody tr:nth-child(2n) {
        background-color: #ebe8e8;
    }
    
    /*  Change table header (Week days) */
    .eab-shortcode_calendar thead tr th {
        background: #fff !important;
        color: #666;
        text-align: center;
    }
    /*  Change table text color*/
    .eab-shortcode_calendar tbody {
        color: #c6c6c6;
    }
    /*  Remove cell borders and align text to center */
    .eab-shortcode_calendar td {
        border: 0 none !important;
        text-align: center;
    }
    /*  Hide navigation on header and the week days on footer (to avoid duplicate the info) */
    .eab-shortcode_calendar tfoot tr:first-child, .eab-shortcode_calendar thead tr:first-child{
        display: none;
    }
    /*  Change background color of the navigation */
    .eab-shortcode_calendar tfoot tr{
       background-color: #ebe8e8 !important;
    }

    Cheers, Luís

  • Katie
    • Design Lord, Child of Thor

    This is still looking like a normal calendar...I was wanting singular events shown in one column like the original screeshot example I provided (that I pulled from the plugin page)...Not a full month calendar. Do you need me to attach that again?

  • Luís
    • Support

    Hi Lauren ,

    Hope you're doing well today!

    I would like to apologize but I misunderstood what was requested.

    The list of the events is displayed in the Events page (defined in Events -> Settings -> Plugin settings, by default uses the /events slug) and can you can display it in other page using the shortcode:

    [eab_archive]

    You can use this shortcode in a page and a sidebar with the following widgets:

    - Upcoming Events;
    - Calendar Upcoming;

    This should be the configuration to get a look similar to the shown in the image you shared.

    However, to get an exact look like the image shown, it depends of your theme and we will need some adjustments (maybe we can achieve with custom CSS or we will need to create a custom template).

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís
    • Support

    Hi Lauren ,

    Hope you're doing well today!

    If you are using the "[eab_archive]" shortcode, we will need to create a custom template to it. Please, try this:

    1) Go to the shortcode and add the "template" parameter. So, your shortcode should be:

    [eab_archive template="shortcode-archive-custom"]

    2) I already prepared a custom template to show the feature image, so, download attached file, unzip it an then upload the file "shortcode-archive-custom.php" to your theme folder.

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.