Mobile Events Calendar

[Chad]

We are looking for some assistance with styling the events calendar grid on mobile phone.

Currently if you view the calendar grid on mobile phone there is no way to know if a date has an event on it or not. You have to click on every date left in the month in order to determine if there is or is not an event.

As you can see in my attached screen shot the calendar shows 23 – 31st for the rest of january, but unless you actually clicked on the 24th or 25th, you wouldn’t actually know that an event was scheduled. The same goes for 26-31st. There aren’t any scheduled so we’d like the user to more easily know when there are and when there are not events.

I tried adding the following CSS but it doesn’t seem to work

.tribe-events-future.tribe-events-has-events.mobile-trigger {
      background-color: #92cee8 !important;
    }
    .tribe-events-calendar td.tribe-events-present.mobile-active.tribe-events-future div[id*=tribe-events-daynum-] {
      background-color: #92cee8 !important;
    }

The issue is that the first class works to change the background of each future date which has an event

.tribe-events-future.tribe-events-has-events.mobile-trigger {
      background-color: #92cee8 !important;
    }

However the problem then becomes when you actually click on a future date which has an event, the numbers are on the wrong background color. They retain the default color set by:

.tribe-events-calendar .mobile-active div[id*=tribe-events-daynum-]

I tried specifying a more specific class of:

 .tribe-events-calendar td.tribe-events-present.mobile-active.tribe-events-future div[id*=tribe-events-daynum-] {
      background-color: #92cee8 !important;
    }

however that didn’t work.

I just need to make it abundantly clear to the visitor that a date does or does not have an event taking place.. I appreciate your assistance.

[Chad]

I solved this through the add-on extension for category colors which we are using with Tribe.

[Nico]

Hi there Chad,

Thanks for reaching out to us, and for the heads-up about the resolution of the issue. The Events Calendar Category Colors is a a great plugin, I’m sure the author will love a nice review if you found it useful 😉

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts