Calendar Theming

Hello MJ,

Yes you can theme your calendar with jquery-ui or bootstrap4.
You need a child theme for that.

In this child theme, create a javascript file my-theme-js.js with this code:

jQuery( document ).ready( function() {
	jQuery( '.bookacti-booking-system' ).on( 'bookacti_after_calendar_set_up', function(){
		var calendar = $j( this ).find( '.bookacti-calendar:first' );
		calendar.fullCalendar( 'option', 'themeSystem', 'bootstrap4' ); // Replace 'bootstrap4' with 'jquery-ui' if you rather use it
	});
});

Create / download your bootstrap4 / jquery-ui theme (it is just a CSS file), rename it my-theme-css.css, and put this file in your child theme.

FullCalendar provides some examples here.

In the functions.php file of your child theme add this code:

function my_theme_enqueue_fc_theme_scripts() {
	wp_enqueue_script( 'my-theme-js', get_stylesheet_directory_uri() . '/my-theme-js.js', array( 'jquery' ), false, true );
	wp_enqueue_style( 'my-theme-css', get_stylesheet_directory_uri() . '/my-theme-css.css' ); 
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_fc_theme_scripts', 5 );

Regards,
Yoan Cutillas

Thank you!