Solution on Event Calendar Issue on MAB Project

Issues

Error: Critical error on the Ticketing Function use to determine if the ticket is empty.

Solution: We used JQuery, PHP, and CSS to fix the issue without any conflict from other function call.

File 1: tooltip.php

File Location:

Complete code attached:

<?php
/**
 * View: Month View - Calendar Event Tooltip
 *
 * Override this template in your own theme by creating a file at:
 * [your-theme]/tribe/events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip.php
 *
 * See more documentation about our views templating system.
 *
 * @link http://evnt.is/1aiy
 *
 * @version 4.9.13
 *
 * @var WP_Post $event The event post object with properties added by the `tribe_get_event` function.
 *
 * @see tribe_get_event() For the format of the event object.
 */

?>
<div class="tribe-events-calendar-month__calendar-event-tooltip-template tribe-common-a11y-hidden">
	<div
		class="tribe-events-calendar-month__calendar-event-tooltip"
		id="tribe-events-tooltip-content-<?php echo esc_attr( $event->ID ); ?>"
		role="tooltip"
	>
		<?php $this->template( 'month/calendar-body/day/calendar-events/calendar-event/tooltip/featured-image', [ 'event' => $event ] ); ?>
		<?php $this->template( 'month/calendar-body/day/calendar-events/calendar-event/tooltip/date', [ 'event' => $event ] ); ?>
		<?php $this->template( 'month/calendar-body/day/calendar-events/calendar-event/tooltip/title', [ 'event' => $event ] ); ?>
		<?php $this->template( 'month/calendar-body/day/calendar-events/calendar-event/tooltip/description', [ 'event' => $event ] ); ?>
		<?php $this->template( 'month/calendar-body/day/calendar-events/calendar-event/tooltip/cost', [ 'event' => $event ] ); ?>

<div class="hidden">
<a href="<?php echo esc_url( $event->permalink ); ?>/#form-waitlist-title" rel="bookmark" style="font-size: 13px;text-decoration: underline;font-weight: bold;color: #153D6B;"><span>Click here to Join Waitlist</span></a>
</div>
<style>
	.hidden{display:none;}
</style>
<script>
jQuery(document).ready(function($) {
    // Find elements with class .tribe-events-c-small-cta__sold-out within elements with class .tribe-events-calendar-month__calendar-event-tooltip
    $('.tribe-events-calendar-month__calendar-event-tooltip .tribe-events-c-small-cta__sold-out').each(function() {
        // Change CSS to display elements with class .hidden
        $(this).closest('.tribe-events-calendar-month__calendar-event-tooltip').find('.hidden').css('display', 'block').addClass('custom-show');
		
    });
});
</script>
	
	</div>
</div>

File 2: calendar-body.php

Location:

Complete code:

<?php
/**
 * View: Month View - Calendar Body
 *
 * Override this template in your own theme by creating a file at:
 * [your-theme]/tribe/events/v2/month/calendar-body.php
 *
 * See more documentation about our views templating system.
 *
 * @link http://evnt.is/1aiy
 *
 * @version 4.9.8
 *
 * @var array $days An array containing the data for each day on the calendar grid, divided by day.
 *                  Shape `[ <Y-m-d> => [ ...<day_data> ] ]`.
 */
?>

<div class="tribe-events-calendar-month__body" role="rowgroup">

	<?php foreach ( array_chunk( $days, 7, true ) as $week ) : ?>

		<div class="tribe-events-calendar-month__week" role="row" data-js="tribe-events-month-grid-row">

			<?php foreach ( $week as $day_date => $day ) : ?>

				<?php $this->template( 'month/calendar-body/day', [ 'day_date' => $day_date, 'day' => $day ] ); ?>

			<?php endforeach; ?>

		</div>

	<?php endforeach; ?>

</div>
<script>
jQuery(document).ready(function($) {
    // When the document is ready
    
    // Find all elements with the class 'tribe-events-calendar-month__multiday-event-hidden-link'
    $('.tribe-events-calendar-month__multiday-event-hidden-link').each(function() {
        // Get the value of the 'data-tooltip-content' attribute
        var tooltipContent = $(this).attr('data-tooltip-content');
        
        // Use tooltipContent as a selector to find div.custom-show
        if ($('div.custom-show', tooltipContent).length > 0) {
            // If div.custom-show is found, log true to the console
           
           
        } else {
            // If div.custom-show is not found, log false to the console
        
        }
    });
});

	
jQuery(document).ready(function($) {
    $('.tribe_events').each(function() {
        if ($(this).find('.tribe-events-c-small-cta__sold-out').length > 0) {
            $(this).addClass('found-one');
        }
    });
});

</script>
<style>
.found-one .tribe-events-calendar-month__multiday-event-bar{
	background:#c1c4c9 !important;
	
	}
.found-one .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color:#c1c4c9 !important;	
	}

	
.tribe-events-calendar-month__calendar-event-details{
	background-color:#FEE3C2 !important;	
	padding-left: 7px !important;
    border-radius: 7px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 7px;
	}
.found-one .tribe-events-calendar-month__calendar-event-details{
	background-color:#c1c4c9 !important;	
	padding-left: 7px !important;
    border-radius: 7px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 7px;
}
</style>



Leave a Reply

Your email address will not be published. Required fields are marked *