Add all .css and .js files of the events calendar on specific page

[Christofer]

Hi The Events Calendar – Team,

I use your plugin for showing events on the /events slug. Thats working perfect. But I also added a page where I am showing past events, which is also working fine. I need to add the basic filter bar with search and date, thats working not so well 😀

I get the filters to work, but the problem is that it is not working very well because of my custom query I am missing all The Event Calendar .css and .js – files.

So I need to add them – whats the best way to do it on a custom page? The best would be just to load it only on the corresponding page, but it would also work to load it everywhere.

This is what I added as a shortcode in my function.php:

function tribe_event_query($atts){
global $post;
$actualDate = date('Y-m-d');
$events = tribe_get_events(array(
    'eventDisplay' => 'custom',
    'start_date'   => '2014-01-01',
    'end_date'     => '$actualDate',
    'orderby'=>'EventStartDate',
    'order' => ‘ASC’,
)); 

echo '<div class="wrapper"> <div id="tribe-events-bar"> <form id="tribe-bar-form" class="tribe-clearfix tribe-bar-full" name="tribe-bar-form" method="post" action="http://rel3756.porgy.at/de/der-club/programm-archiv"> <div class="tribe-bar-filters"> <div class="tribe-bar-filters-inner tribe-clearfix"> <div class="tribe-bar-date-filter"> <div id="tribe-bar-dates"> <label class="label-tribe-bar-date" for="tribe-bar-date">Veranstaltungen in</label> <input type="text" name="tribe-bar-date" style="position: relative;" id="tribe-bar-date" value="" placeholder="Datum"> </div><input type="hidden" name="tribe-bar-date-day" id="tribe-bar-date-day" class="tribe-no-param" value=""> </div><div class="tribe-bar-search-filter"> <label class="label-tribe-bar-search" for="tribe-bar-search">Suchen</label> <input type="text" name="tribe-bar-search" id="tribe-bar-search" value="" placeholder="Suchen"> </div><div class="tribe-bar-submit"> <input class="tribe-events-button tribe-no-param" type="submit" name="submit-bar" value="Suchen"> </div></div></div></form> </div><h3>Bereits stattgefundene Programme: </h3<<ul class="ecs-event-list">';

foreach ($events as $event) {
    echo '<li class="ecs-event"><h4><a>guid . '>' . $event->post_title . '';
    $date = new DateTime($event->EventStartDate);
    echo $date->format('d.m.Y, H:i') . '</li>';
}
echo '</ul></div>';
}
add_shortcode( 'tribe-event-outdated', 'tribe_event_query' );

Please help!
Thanks in advance, Lisa

[Barry]

Hi Lisa,

We can’t offer too much help when it comes to custom code, but I’d be happy to steer you in the right direction if I can 🙂

In our own plugin and in our own views, the modules/bar.php template is included when we wish to display the event bar, whereas it looks like you are echoing out a (possibly modified?) version of the resulting HTML. Might it work for you to simply include the existing template?

If not, please bear in mind that there could be some complications stemming from any elements that are missing from your own version of the event bar or from other changes you have made.

On the CSS side you should probably also enqueue our resources/css/tribe-events-full.css file. On the JS side, you probably need at least resources/js/tribe-events.js and resources/js/tribe-events-bar.js (or the minified versions) to be enqueued and available.

Does that help at all?

[Christofer]

Hey Barry, thanks for your reply!

Unfortunately I am still stuck with it – I don’t know exactly how to enque or load the files correctly. I tried it this way:

wp_enqueue_style( 'tribe-events-full', plugins_url() . '/the-events-calendar/src/resources/css/tribe-events-full.css');
wp_enqueue_script( 'tribe-events', plugins_url() . '/the-events-calendar/src/resources/js/tribe-events.js');
wp_enqueue_script( 'tribe-events-bar', plugins_url() . '/the-events-calendar/src/resources/js/tribe-events-bar.js');

$js_config_array = array(
	'permalink_settings' => get_option( 'permalink_structure' ),
	'events_post_type' => TribeEvents::POSTTYPE
);
wp_localize_script( 'tribe-events', 'tribe_js_config', $js_config_array );

But that only gives me an error ($tribedate.bootstrapDatepicker is not a function) and the datepicker is still not showing/working. If i try to also enque bootstrapDatepicker, I get other error and so on. How should i load the files correctly?

Thanks for your help, with nice regards, Lisa

[Barry]

Hi Lisa,

The approach we take for setting up the necessary assets is as follows:

Tribe__Events__Template_Factory::asset_package( 'jquery-placeholder' );
Tribe__Events__Template_Factory::asset_package( 'bootstrap-datepicker' );
Tribe__Events__Template_Factory::asset_package( 'tribe-events-bar' );
do_action( 'tribe-events-bar-enqueue-scripts' );

Of course, if you use that in your own code be sure that Tribe__Events__Template_Factory exists first of all (in other words, don’t try to do this too early in the request)!

Again, building custom extensions is something we can provide only very limited support for – digging into the code is the best way to develop a good understanding of what you need here 🙂

[Christofer]

Hi Barry,

Thanks for your reply, but I can not manage it to get the bar to work. I am trying it with a different approach now, I want to use/modify the list view for showing past events. I know you can only provide limited support for custom code, but I can not find anything related to it nor get it to work without any references.

Do you know a way to show past events instead of upcoming in the list view? Help for that would be great!

With nice regards, Lisa

[Barry]

Hi Lisa,

example.com/events/list/?tribe_event_display=past

Could you simply link people to the past events list by crafting a URL along these lines?

[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