Date format

[Rosa Maria]

Hello!

I want to know how to change the date format in “Single Event” view. Now, after the event title, it’s displayed the date with this format: “28 November, 08:00 – 17:00”. I want to change it to: “Nov 28”. How can I do it?

Thanks for your help.

[Brook]

Howdy Rosa Maria,

I would love to help you with this.

Have you seen the Date Format settings in WP-Admin > Events > Settings > Display ? You can change that one by altering the “Date without year” format.

Or, were you hoping to just change the format in the one location, but still have the longform format elsewhere? If so, you will need to write a custom PHP theme override for the single-event view. Our Themer’s Guide walks you through overriding views. Once you have an override you can edit the area where it calls the data, and call one of your own formatting in PHP.

Does that all make sense? Will that work for you? Please let me know.

Cheers!

– Brook

[Rosa Maria]

I only want to change the format in one location (Single Event View). After reading your Themer’s Guide, I still have no idea how to do it… What is the exact code that I have to write? I have spent hours trying to figure out, without success…

[Brook]

Howdy Rosa,

I understand how frustrating that could be. I will try to outline the steps clearly so I can help:

1. Go to this file: /wp-content/plugins/the-events-calendar/src/functions/template-tags/general.php Around line 1066 you will see the function tribe_events_event_schedule_details(). Copy this entire function to your clipboard
2. Paste that function into your theme’s functions.php. Rename it from tribe_events_event_schedule_details to custom_tribe_events_event_schedule_details.
3. Near the top of that function are two variables, $date_without_year_format and $date_with_year_format. You will can edit the date format(s) of this function be editing these two variables. The format of course is specified in the usual PHP way, in this case you can just make the variable a string. So to make the format YYYY-MM-DD I would make $date_with_year_format = ‘Y-m-d’
4. Now you have a custom function that output your unique date format! We just need to use it in the right place. Go to this file: wp-content/plugins/the-events-calendar/src/views/single-event.php and around line 36 you will see echo tribe_events_event_schedule_details( $event_id … );.
   Replace tribe_events_event_schedule_details with custom_tribe_events_event_schedule_details to use your own format for this page.
5. In the case of step 4 though, make sure to override this file instead of directly changing it. Our Themer’s Guide  lays out a step-by-step on how to override a file versus directly editting it, so I will have to defer to that guide for this part.

And that’s how you do it. I know this might seem a bit daunting. It is actually a fairly complicated thing to do because showing dates is complicated. If a date takes place this year we don’t show the year, if a date has no end we don’t show the end date. If it spans multiple dates we show both, etc. It gets complex fast, hence why there is a 100 line function you have to modify.

I hope that helps Rosa. Cheers!

– Brook

[Rosa Maria]

Hi Brook,

Thanks for your assistance. Your indications have been very helpful.

What I want to know now is how display the categories just below the event title (in the same page: Single Event View). I need the categories to display this way: “CATEGORY 1 – CATEGORY 2 – CATEGORY 3”. Where the categories have their css style, and the hyphen needs its own css style. How can I do it?

Thanks

[Brook]

Howdy Rosa,

Excellent I am happy that helped!

Just a friendly reminder, we strive to keep things to one issue per topic. When you do have a separate customization request please open a new topic. That said though I don’t want to send you away empty handed. The function you are looking for to obtain a list of categories is tribe_get_event_categories(). Our code inside of /wp-content/plugins/the-events-calendar/src/views/modules/meta/details.php calls this function to display a list of categories. Here is what it does:

[php]echo tribe_get_event_categories(
get_the_id(),
array(
‘before’ => ”,
‘sep’ => ‘, ‘,
‘after’ => ”,
‘label’ => null, // An appropriate plural/singular label will be provided
‘label_before’ => ‘<dt>’,
‘label_after’ => ‘</dt>’,
‘wrap_before’ => ‘<dd class="tribe-events-event-categories">’,
‘wrap_after’ => ‘</dd>’,
)
);[/php]

As you can probably see it follows the usual WordPress syntax here, allowing you to specify things like the label and wraps. Using this, you can output any HTML you need. From there it is up to you to style as needed. I hope this makes sense.

Cheers!
– Brook

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts