Trouble with formatting when modifying a shortcode

I’m working with a theme called “Clubber” and the shortcode I’m modifying is an event shortcode that pulls upcoming events in chronological order and displays them in an excerpt format on the front page. Here is the coding for that shortcode:

function eventup_shortcode($atts, $content) {
extract(shortcode_atts(array(
"items" => 2,
"cat" => null,
"id" => null,
"nav" => false,
"order" => "asc",
"events" => null
), $atts));
$order = strtoupper($order);
$items_count = 0;
$items_src = null;
if ($id == null) {
$query = array(
'post_type' => 'event',
'orderby' => 'meta_value',
'order' => $order,
'meta_key' => 'event_date_interval',
'meta_value' => strftime("%Y/%m/%d", time()- (60 * 60 * 24) ),
'meta_compare' => '>',
'posts_per_page' => $items,
);
if ($cat) {
$query = array(
'posts_per_page' => $items,
'orderby' => 'meta_value',
'meta_value' => strftime("%Y/%m/%d", time()- (60 * 60 * 24) ),
'meta_key' => 'event_date_interval',
'meta_compare' => '>',
'order' => $order,
'post_type' => 'event',
'tax_query' => array(
array(
'taxonomy' => 'events',
'field' => 'slug',
'terms' => array($cat)
)));
}
$wp_query_event = new WP_Query($query);
}
$items_src .= '
<div class="home-post">';
while ($wp_query_event->have_posts()):
$wp_query_event->the_post();
global $post;
$image_id = get_post_thumbnail_id();
$cover_event = wp_get_attachment_image_src($image_id, 'event-cover-arc');
$image_large = wp_get_attachment_image_src($image_id, 'large');
$data_event = get_post_meta($post->ID, 'event_date_interval', true);
$time = strtotime($data_event);
$tstart = get_post_meta($post->ID, 'event_tstart', true);
$tend = get_post_meta($post->ID, 'event_tend', true);
$venue = get_post_meta($post->ID, 'event_venue', true);
$event_text = get_post_meta($post->ID, "ev_text", true);
$custom = get_post_custom($post->ID);
$event_ticket = $custom["event_ticket"][0];
$pretty_date_yy = date('Y', $time);
$pretty_date_d = date('d', $time);
$theme = get_template_directory();
require($theme.'/includes/language.php');
$items_src .= '
<div class="home-width fixed">
<div class="event-archive">
<div class="event-arc-data">
<div class="event-arc-day">' . $pretty_date_d . '</div>
<div class="event-arc-month">' . $pretty_date_M . '</div>
</div><!-- end .event-arc-data -->
<div class="event-arc-cover">';
if ($image_id) {
$items_src .= '

<img src="' . $cover_event[0] . '" alt="' . get_the_title() . '" />
';
} else {
$items_src .= '

<img src="' . get_template_directory_uri() . '/images/no-featured/event-single.png" alt="no image" />
';
}
$items_src .= '
</div><!-- end .event-arc-cover -->
<div class="event-arc-text">
<h2 class="event-arc-title">' . get_the_title() . '</h2>
<div class="event-arc-info">';
if($venue) {
$items_src .= '<p class="event-arc-venue">' . $venue . '</p>';
}
if (get_post_meta($post->ID, 'event_allday', true) == 'yes'){
$items_src .= '<p class="event-arc-time">All Day</p>';
} elseif ($tstart) {
$items_src .= '<p class="event-arc-time">' . $tstart . '';
} if ($tend) {
$items_src .= ' – ' . $tend . '</p>';
}
$items_src .= '
</div><!-- end .event-arc-info -->';
$items_src .= '<p>' . the_excerpt_max(165) . '</p>';
if (get_post_meta($post->ID, 'event_disable', true) == 'no') {
if ($event_text) {
$items_src .= '
<div class="event-tickets">' . $event_text . '</div>';
} else {
if (get_post_meta($post->ID, 'event_out', true) == 'yes') {
$items_src .= '
<div class="event-cancel-out"><p>Sold Out</p></div>';
} elseif (get_post_meta($post->ID, 'event_cancel', true) == 'yes') {
$items_src .= '
<div class="event-cancel-out"><p>Canceled</p></div>';
} elseif (get_post_meta($post->ID, 'event_free', true) == 'yes') {
$items_src .= '
<div class="event-cancel-out"><p>Free Entry</p></div>';
} else {
$items_src .= '
<div class="event-tickets">Buy Tickets</div>';
}
}
}
$items_src .= '
</div><!-- end .event-arc-text -->
</div><!-- end .event-archive -->
</div><!-- end .home-width fixed -->';
endwhile;
$items_src .= '
</div><!-- end .home-post -->';
return $items_src;
}

The coding I would like to use to modify the shortcode comes from the ‘single event’ page which displays ALL the information AND does so nice and neatly. Here is the coding for that whole page:

<?php
get_header();
?>

<div id="content">

<div class="title-head"><h1><?php
if (function_exists('cat_post_types'))
cat_post_types();
?>
</h1></div>

<?php
$page_layout = of_get_option('event_images');
switch ($page_layout) {
case "left-event-sidebar":
echo '
<div class="sidebar-left">';
wz_setSection('zone-sidebar');
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-page'));
echo '
</div><!-- end .sidebar-left -->';
break;
case "right-event-sidebar":
echo '
<div class="sidebar-right">';
wz_setSection('zone-sidebar');
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-page'));
echo '
</div><!-- end .sidebar-right -->';
break;
}
?>

<div class="fixed">
<div class="single-col">

<?php
if (have_posts())
while (have_posts()):
the_post();
global $post;
$results = $wp_query->post_count;
$data_event = get_post_meta($post->ID, 'event_date_interval', true);
$time = strtotime($data_event);
$pretty_date_yy = date('Y', $time);
$pretty_date_d = date('d', $time);
require('includes/language.php');
$image_id = get_post_thumbnail_id();
$cover = wp_get_attachment_image_src($image_id, 'event-cover-arc');
$image_id = get_post_thumbnail_id();
$event_location = get_post_meta($post->ID, "event_location", true);
$event_venue = get_post_meta($post->ID, "event_venue", true);
$tstart = get_post_meta($post->ID, 'event_tstart', true);
$tend = get_post_meta($post->ID, 'event_tend', true);
$event_ticket = get_post_meta($post->ID, "event_ticket", true);
$event_text = get_post_meta($post->ID, "ev_text", true);
$event_out = get_post_meta($post->ID, "event_out", true);
$event_cancel = get_post_meta($post->ID, "event_cancel", true);
$event_zoom = get_post_meta($post->ID, "event_zoom", true);
$coordinated = get_post_meta($post->ID, "event_coordinated", true);
$club = get_post_meta($post->ID, "event_venue", true);
$event_allday = get_post_meta($post->ID, "event_allday", true, true);
echo '
<div class="event-cover">';
if ($image_id) {
echo '
<img src="' . $cover[0] . '" alt="' . get_the_title() . '" />';
} else {
echo '
<img src="' . get_template_directory_uri() . '/images/no-featured/event-single.png" alt="no image" />';
}
if ($data_event != null) {
echo '
<div class="event-single-data">
<div class="event-single-day">' . $pretty_date_d . '</div>
<div class="event-single-month">' . $pretty_date_M . '</div>
<div class="event-single-year">' . $pretty_date_yy . '</div>
</div>
</div><!-- end .event-cover -->';
}
echo '
<div class="event-text">
<h2 class="event-title">' . get_the_title($post->ID) . '</h2>
<ul class="event-meta">';
if ($event_location != null) {
echo '
<span>Location:</span>' . $event_location . '

';
}
if ($club != null) {
echo '
<span>Venue:</span>' . $club . '

';
}
if ($event_allday == 'yes'){
echo '
<span>Length:</span>All Day

';
} elseif ($tstart) {
echo '
<span>Length:</span>' . $tstart . '';
} if ($tend) {
echo ' – ' . $tend . '

';
}
echo '
';
if (get_post_meta($post->ID, 'event_disable', true) == 'no') {
if ($event_text) {
echo '
<div class="event-tickets">' . $event_text . '</div>';
} else {
if (get_post_meta($post->ID, 'event_out', true) == 'yes') {
echo '
<div class="event-cancel-out"><p>Sold Out</p></div>';
} elseif (get_post_meta($post->ID, 'event_cancel', true) == 'yes') {
echo '
<div class="event-cancel-out"><p>Canceled</p></div>';
} elseif (get_post_meta($post->ID, 'event_free', true) == 'yes') {
echo '
<div class="event-cancel-out"><p>Free Entry</p></div>';
} else {
echo '
<div class="event-tickets">Buy Tickets</div>';
}
}
}
echo '

<!-- end ul.event-meta -->';
echo '
' . the_content() . '
</div><!-- end .event-text -->';
if ($coordinated != null) {
echo '
<script type="text/javascript">
jQuery(document).ready(function($){

$("#event-map").gmap3({
marker:{
latLng: [' . $coordinated . '],
options:{
draggable:true
},
events:{
dragend: function(marker){
$(this).gmap3({
getaddress:{
latLng:marker.getPosition(),
callback:function(results){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:"infowindow"}),
content = results && results[1] ? results && results[1].formatted_address : "no address";
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(content);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: content}
}
});
}
}
}
});
}
}
},
map:{
options:{
zoom: ' . $event_zoom . '
}
}
});

});
</script>

<div id="event-map"></div>';
}
echo '
</div><!-- end .single-col -->';
endwhile;
?>

</div><!-- end .fixed -->
</div><!-- end #content -->

<?php
get_footer();
?>

So far, I’ve tried things like changing the “get_the_excerpt()” in the shortcode to “get_the_content” And that partially does what I want. It no longer displays the excerpt but rather the whole event info which is nice but its unformatted and does not look like the event does on the “single event” page. Here are links to help you help me.

I’m pretty lost and I’ve spent hours and hours and hours trying everything I can think of (echo, return, and class modification although know 100% how echo works). I figure at this point I could throw this on here and see if someone out there could help me out. I appreciate any thoughts or guidance, Thank you very much.