Style the date items seperately

[lichtermeer]

In list view i get the following html code for the Date:
<div class=”tribe-event-schedule-details”>
<span class=”tribe-event-date-start”>Samstag, 21. Juli 2018 von 14:00</span> – <span class=”tribe-event-time”>16:00</span> </div>
I want to style parts of the date seperately like the day “Samstag” larger and the year smaller. Can I have additional span-Tags around parts of the date?

[Geoff B.]

Good evening Andre and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

Can I have additional span-Tags around parts of the date?

Absolutely. In fact, you can customize each view exactly to your liking.
The way to achieve this is through template overrides (making a copy of the view files, changing them and uploading them in your WordPress theme’s folder).

You might want to read our Themer’s guide to get a sense of how that works.

Let me know how that goes.

Best regards,
Geoff B.

[lichtermeer]

Hi,
as far as I can see is the whole date including time outputted by
<?php echo tribe_events_event_schedule_details() ?> in the single-event.php

I cannot see any way to seperately style parts of “tribe_events_event_schedule_details()” like only the year. But thats exactly wthat i want to do.

Dennis

[Geoff B.]

Good evening Dennis,

Thank you for writing back.

You are absolutely right. My bad.
This specific function lives in /the-events-calendar/src/functions/template-tags/general.php

This means that you have 2 options:

1. Modify that function to your liking via your theme’s functions.php
2. Simply replace that call by a modified version of the code found in general.php

Let me know how that goes.

Best regards,
Geoff B.

[lichtermeer]

Hi Geoff, I have no clue what to do in this files. The out put right now is:

<span class=”tribe-event-date-start”>Samstag, 21. Juli 2018 von 14:00</span> – <span class=”tribe-event-time”>16:00</span>

What I need is:

<span class=”tribe-event-day”>Samstag,</span> <span class=”tribe-event-date”>21. Juli</span> <span class=”tribe-event-year”>2018</span> <span class=”tribe-event-connector”>von</span> <span class=”tribe-event-time”>14:00</span><span class=”tribe-event-connector”> – </span> <span class=”tribe-event-time”>16:00</span>

Can you send me a code-snippet to include?

[Geoff B.]

Good afternoon Dennis,

Thank you for writing back.

Just to set expectations, the scope of our support is mostly to get our customers started on the right track and to help them in case of issues.

We, unfortunately, do not provide complete support for customization.

With that in mind, the simplest approach is the following:

1. Head over to /the-events-calendar/src/functions/template-tags/general.php and copy the code from lines 1022 to 1041
2. Paste the code in your theme’s functions.php file
3. Rename the function tribe_events_event_schedule_details_customspan in your theme’s functions.php file
4. Navigate the freshly added code to locate all the “$inner” lines and add your own spans in the mix

To finalize this:

1. Head over to /wp-content/plugins/the-events-calendar/src/views/list/single-event.php  and download the file
2. Open the file and replace the call to echo tribe_events_event_schedule_details() by echo tribe_events_event_schedule_details_customspan()
3. Upload the modified file back to [your-theme]/tribe-events/list/single-event.php

Let me know how that goes.

Best regards,
Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts