Editing widget to act as "todays events"

[willem]

Hi,

We used The Events Calendar to sell Bootcamps, and another plugin (Weekly Class Schedule) to promote our weekly classes. To make things more ‘one’ with one-another and to prevent errors due to double input we decided to buy the PRO version of TEC, and get rid of WCS.

So far everything works like a charm. I do have 2 ‘issues’ to solve though. I am comfortable with editing code (with some help and guidance) because I can basically only “read” it not write it.

Issue 1 (minor):
Our week-view is very (VERY) gray. I would like to use more colour in the event blocks.
I’d like all events to be shown in (example) dark-red. Another options would be to have some of the events shown in dark red, others in dark blue, dependent on what I put in the event. What are the possibilities and how / where can I make that happen?

Issue 2 (major):
We used to have a widget on our homepage showing “Today’s Classes”. Unfortunately that was part of the WCS plugin. I was hoping I could use one of the TEC PRO widgets to re-create that functionality. However: I haven’t been able to do that. The best option I see is the “Events Calendar widget” which shows the mini-grid calendar.

This issue has 2 questions:
BUG: On first loading of the page the widget shows all events of todays date, plus the first events of the next date to fill up until what I set in the settings. Only after I click on todays date myself it only shows todays events.

Request:
Also, I’d like to “hide” the calendar mini-grid of this widget. I’m ok with copying and editing the widget template, thus loosing the mini-grid site-wide. For this I’d need to know where and how I can do that?

Can you help me out with these questions? Thanks!

[willem]

This reply is private.

[Victor]

Hi Robert!

Thanks for reaching out! I am happy to help!

You should be able to change the colors by using the WordPress Customizer. If you want to change the event blocks color,  just go to Appearance → Customize and then under The Events Calendar → Month/Week View you can select the Calendar Hightlight Color.

I understand you are trying to show only a list events, instead of the calendar with the list below. So I recommend you use the Event List Widget so you don’t have to worry about hiding the calendar.

And if you only want to show a list of today’s events, here’s a snippet that you’ll need to add to your theme’s functions.php file (located at wp-content/themes/your_theme/):

https://gist.github.com/niconerd/1ea01513ecb3717de67c

Let me know how that works for you.

Best!

Victor

[willem]

Hi Victor,

Week-view
Thank you very much for your help! I totally missed the colour options under Appearance!

I changed the highlight colour, which gave the aspired effect, although upon refreshing the website to see the changes the title-bar also changed colour. It now is a very dark grey, making it impossible to read the Days / Dates above the schedule. Any idea how to solve that problem?

Today’s Lessons – widget
Thank you for your code snippet, it now works like a charm!

2 follow-up questions:
– any idea where I can change the “There are no upcoming events at this time.“-text?
– Can I hide the event image, but show the start and end-times of the events? (FYI we do use recurring events in this list)

FYI-2: I don’t know at which times you are working (I’m actually making most changes around / after midnight) so for now I removed the code snippet again so there will always be events shown on the home-page.

Thanks again!

Robert

[Victor]

Hi Robert!

Week-view

Unfortunately, that seems to be related to a known bug with the WordPress Customizer and The Events Calendar. I have already given notice of this issue and the team will let you know as soon as the fix is released in a future version.

Meanwhile, you can add the following lines of CSS to modify the background color of the table header:
.tribe-events-calendar thead th, .tribe-events-grid .tribe-grid-header .tribe-grid-content-wrap .column, .tribe-grid-header {
background-color: #e0e0e0 !important;
}

To add this custom CSS you can create a stylesheet called tribe-events.css in the tribe-events/ directory of your theme. You can find all about Adding Custom Styles in the Themer’s Guide over here: https://theeventscalendar.com/knowledgebase/themers-guide/#customizing-styles . Let me know how this works for you.

Today’s Lessons – widget

– any idea where I can change the “There are no upcoming events at this time.“-text?

Yes, to accomplish this you will need to customize the Event List widget doing a template override. There is a great article on Configuring the List Widget where under Theming the widget you will actually find an example on how to customize the notice for when there are no upcoming events.

– Can I hide the event image, but show the start and end-times of the events?

Sure! That is similar to before. You will also need to do a template override. I have found a more specific article on how to Add event content to an event widget that will guide you through it.

I hope this helps and feel free to ask any questions you may have.

Best!

Victor

[willem]

Hi Victor,

Week View
Your CSS code works like a charm! I didn’t even have to create a new .css file, I simply added your code to the general CSS (My theme has a Custom CSS field included).

1 last question though:

The overall styling of the TEC-related content is nice, but in the week-view we’d like to use the dark-red that’s being used throughout the website for the event blocks, with white text on top. Can I change the text in those (now bright red) event blocks within the week view, without affecting elements elsewhere on the website?

Today’s Lessons – widget
I will look into the two links you gave me, I’m fairly confident I’ll be able to edit the stylesheets with those.

Thanks again! (Your support proves – once again – the quality of the TEC-plugins!)

Robert

Yes, we have 2 accounts a.t.m., I’ll try to get that fixed after this topic is marked as ‘solved’.

[Victor]

Hi Robert!

I’m super happy you were able to sort things out! 🙂

Regarding the week view, here are a few lines of css that will point you in that direction:

.tribe-grid-body .tribe-events-week-hourly-single {
	background-color: #600;
}

.tribe-events-grid .type-tribe_events a {
	color: #fff;
}

Please let me know how that works and if you have any other questions.

Cheers!

Victor

[willem engel]

Hi Victor,

Thank you so much for your help. The week-view is now perfect!

Regarding the widget: I actually discovered I had a customised version running already, which was from before the Pro purchase. I’ve replaced it with the pro version (with a minor customisation), so that works well now.

Unfortunately I have 2 more questions (This is almost turning into a Knowledge Base article…)

Question 1:
The widget now outputs a nice graphic box showing the date, then the title + date and time (March 6 @ 21:15 – 22:30) How can I remove the “March 6 @” from under the title?

In single-event.php I found <?php echo tribe_events_event_schedule_details(); ?>, any idea where I can edit that output, or how I ‘hide’ the “date @” part? (I do want to show the start and end times)

Question 2:
I’d like to use this widget elsewhere on the website, but then without the customisation of the question above and without the limitation of only showing events of today (Showing events on other days as well, including the full date etc)

Is there a way to duplicate the widget, so I have 2 Event List widgets? (For instance: ‘Event List’ and ‘Todays Event List’)

Right now I’m using a third party plug-in to accomplish this: https://wordpress.org/plugins/the-events-calendar-shortcode/, but that’s visually not ideal and I’d like to make it TEC only.

Regards,

Robert

[Victor]

Hi Robert!

I’m so glad you could turn the week view like you wanted!

Lets move into the questions:

The widget now outputs a nice graphic box showing the date, then the title + date and time (March 6 @ 21:15 – 22:30) How can I remove the “March 6 @” from under the title?

You can configure the output of that date/time format by going to Events > Settings > Display under Date Format Settings. If that doesn’t fit your needs, there are two filters that can be used to modify the output: tribe_events_event_schedule_details_formatting and tribe_events_event_schedule_details. This last one to completely customize the output.

Is there a way to duplicate the widget, so I have 2 Event List widgets? (For instance: ‘Event List’ and ‘Todays Event List’)

There is no simple way to duplicate a widget. You will need to use the WordPress Widget API (WP_Widget class). The WordPress Codex has the most comprehensive and thorough documentation for registering a new widget, so that is likely the best place to start.

You can register a new widget in the theme’s functions.php file as described in the Codex. From there, you could create duplicates of the calendar plugin widgets and place them as individual plugins in your plugins directory. This is where the majority of custom work will be done, but it will also prevent your customizations from being updated when there are updates to The Events Calendar.

I hope that helps. Let me know how that works for you.

Best!

Victor

[willem]

Hi Victor,

Thanks for your clear instructions throughout the thread!

Willem decided he likes the output of the current “Today’s Events” Widget, so no need to edit the output any more.

Seeing it’s not too easy to duplicate the widget I’m leaving it for now. The functionality the website needs is in there, using a 3rd party developers plugin, so I’ll be diving into this at a later point in time.

Thank you for your help, it really shows the quality of TEC plugins!

Robert

[Victor]

Hi Robert!

Thanks for coming back and giving us an update on your project! I am glad to hear that everything is going well.

I’ll go ahead and close this thread now, but if you have any other questions just feel free to open a new topic and we’ll be happy to help

Good luck with your project!

Victor

[Author]

Posts