Custom Event List Advanced Widget

[Robert]

Hey Guys,
I’m working on customizing this nice widget to show 5 upcoming events in horizontal column. Something similar to this: http://themeforest.net/item/eventure-responsive-events-wp-theme/full_screen_preview/1529155 . OK, so here is what I did to make events show in one row:
ul.upcoming li{
float: left;
background-color: #CCC;
margin-right: 20px !important;
padding: 20px 10px 20px 10px !important;
}
My question is, where should I dig, in which files, to add some span and classes to date. So I can style day(number) to make it bigger, than put month underneath. Right now widget looks like this: http://img571.imageshack.us/img571/6952/widget1.jpg Thanks in advance!

[Rob]

Hey Robert. Thanks for the note here. This one goes a bit over my head, but let me see if our dev Jonah can chime in here.

[Robert]

Thank You for your quick response. I spend some time working on this, added display: block, and make whole element clickable, not only title of the event, with some simple hover. But still didn’t figured out how to stylize different elements of date separately. You can check my live version here: http://robertbrodziak.com/kom/

[Robert]

at the bottom of page;)

[Rob]

Beautiful. Thanks for the update; I got this to Jonah after he’d headed out last night but he’ll be resuming forum duties today and will take a look from there.

[Jonah]

Hi Robert, nice styling job! To modify the markup in the widget simply override the /wp-content/plugins/events-calendar-pro/views/events-advanced-list-load-widget-display.php file placing a copy in an ‘events’ folder in your theme and making any changes you want. That should do it but let me know if you have any questions.

[Robert]

Thanks!
I changed anchor tag in the file You are talking about. I guess this is the part I need to modify:

echo tribe_get_start_date( $post->ID, $start );

if($event->AllDay && $start) {
echo ‘ (‘.__(‘All Day’,’tribe-events-calendar-pro’).’)’;

Now it’s loading whole date – day, month, year and hour, and applying class .when, right? What I would like to get is apply different class to day, different for month, different for year and hour, so I could style them independly.
To be honest I’m still newbie in PHP, so if You could give me some directions on how to acomplish that, it would be great;) If You got some time of course.

[Jonah]

Hey Robert, sure I can offer you some more pointers to get you going in the right direction. So, to separate out the date components what you’ll want to do is use separate calls to tribe_get_start_date() and pass in only the date chunk you want to display for that piece.

So for example, to just display the day:

echo tribe_get_start_date($post->ID, false, 'j');


To just display the month:

echo tribe_get_start_date($post->ID, false, 'M');


To just display the year:

echo tribe_get_start_date($post->ID, false, 'Y');


…and so on. In each case you’ll probably want to wrap the function in whatever markup and class/ID you want to be able to target it in CSS.

you can find more info in the tribe_get_start_date() function here: https://theeventscalendar.com/support/documentation/the-events-calendar-template-tags-date-functions/#functiontribe_get_start_date – and you find more info about PHP date parameters here: http://php.net/manual/en/function.date.php

Does that help?

[Robert]

Wow Jonah, You made my day;)
Thanks to Your advice, i’m almost there!
Check it out: http://robertbrodziak.com/kom/
It’s not final version, but now I can have all
the fun with styling. Best support ever!

[Rob]

Thanks for the words, Robert! Glad to hear this got you going in the right direction. Have a great weekend and please let us know if you need anything more down the road.

[Robert]

Hey Guys,
after a lot of work with customizing Custom Event List Advanced Widget,
my client changed his mind, and now wants a module on home page, which
will show whole week, not just upcoming events. Here I did quick photoshop mockup of what it might look like: http://img72.imageshack.us/img72/627/calmockup.jpg . And here is something similar in work (bottom of homepage): http://www.kopernik.org.pl . I know it’s not your typical support question,
but do You think it’s possible to make a widget showing current week built on your calendar?

[Robert]

To be precise, it should show 7 days, not from monday to sunday, but from current day, for example if today would be friday – it should show days from friday to thursday. Pretty complicated I guess.

[Jonah]

Hi Robert, cool idea! Unfortunately it is a bit complicated and not something we can help you with in the forums. Good luck though!

[Robert]

Yeah, I know;)

[Rob]

Sorry we couldn’t offer up more here, Robert. If there’s any other issues down the road we can help you with please let us know.

[Author]

Posts