event colours on calendar grid

  • Resolved eshansen

    (@eshansen)


    6 months, 1 week ago

    Hi,

    Im loving the plug in thanks.

    I have noticed that some of the screenshots on the plugin homepage show calader views where the events have a background colour and also a darker left border. eg 7th ‘ event listing’ screenshot.

    Is it possible to recreate this with the plugin?

    I can use event types to specify the background but then they just have a block colour.

    Ive been able to use css to create a left border using border-left-width but this defaults to the theme accent colour and I havent been able to work out how to compute a darker version of the event type colour

    I hope this makes sense. Id be grateful for any insight/ advice.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Larry

    (@lpint)

    6 months, 1 week ago

    Eventprime support gave me this code a while back to make the event listings background (and buttons) match the event type’s background color. See if this is what you’re looking for:

    /* Fix for event type button color */

    ep-events-content-container .ep-event-types .ep-event-type {

    position: relative;
    overflow: hidden;
    padding: 14px 8px !important;
    font-size: 12px;
    } ep-events-content-container .ep-event-types .ep-event-type a {

    position: relative;
    z-index: 99;
    color: #000;
    } ep-events-content-container

    .ep-event-types .ep-event-type span{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    margin: 0px !important;
    }

    Thread Starter eshansen

    (@eshansen)

    6 months, 1 week ago

    hi

    thanks for this. It isn’t what I meant but I’ll definitely use it 🙂

    I used something a bit like this to add a border-left-width: 6px; to the a.link (hope this makes sense), which gave me a coloured bar to the left of the event block when displaying the calendar. I just can’t work out how you get a color that’s darker than the colour the plugin uses rather than always getting the theme accent color.

    Plugin Support epsupport1

    (@epsupport1)

    6 months, 1 week ago

    Thanks @lpint

    @eshansen, We are looking into this and will update you as soon as possible.

    Plugin Support epsupport1

    (@epsupport1)

    6 months ago

    Thanks @lpint

    Hello @eshansen

    Thank you for your kind words! We’re delighted to know that you’re enjoying the plugin.

    To achieve the calendar view style you mentioned — with event background colors and a darker left border — please follow the steps below:

    Update the JavaScript Setting
    Navigate to the following file on your server:

    /wp-content/plugins/eventprime-event-calendar-management/includes/events/assets/js/ep-frontend-events.js

    On line number 1034, you’ll find this line of code:

    info.el.style.backgroundColor = rgba(${emColor_bg}, 0.25);

    Change the opacity value from 1 to 0.25 as shown above. This will give your events a softer background shade.

    Add Custom CSS for the Left Border
    Go to EventPrime → Settings → Custom CSS, and add the following CSS code in the provided text area:

    #ep_event_calendar.fc table.fc-scrollgrid-sync-table .fc-daygrid-event {
    border-left-width: 3px !important;
    }

    This will create a more prominent left border for each event in the calendar view.

    Important Note:
    Please note that modifying plugin files directly means your changes will be overwritten when the plugin is updated.
    Therefore, after every plugin update, you will need to reapply this change in the same file if you wish to retain the custom styling.

    Once these steps are completed, you should see a calendar layout similar to the screenshots on the plugin’s homepage.

    If you have any further questions, please don’t hesitate to reach out to us.

    • This reply was modified 6 months ago by epsupport1.
    Thread Starter eshansen

    (@eshansen)

    6 months ago

    Thank you thats perfect.

    As an aside – is that effect/behaviour available on pro as a different calendar view as it appears in a lot of screenshots?

    Plugin Support epsupport1

    (@epsupport1)

    5 months, 2 weeks ago

    Thank you for your kind feedback — we’re glad to hear the solution worked for you.

    Regarding your question:
    This specific effect/behaviour is not currently available as a separate calendar view in the Pro version.

    However, we have already forwarded this to our planning and development team for further consideration, and we will add this feature again in future updates.

    For now, please continue using the custom CSS and changes provided in the thread to achieve the desired effect.

    If you have any further questions, please don’t hesitate to reach out to us.

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.