Custom post type in Custom widget - $listItem

Question

Hi i have a slight problem when making a custom post type widget.

the problem is that when i add a custom field in the code the part that shows the custom field information get's on top of the output code.

here is the code that i use:

class Agenda_widget extends WP_Widget{
function __construct() {
    parent::__construct(
        'agenda_widget', // Base ID
        'Agenda Widget', // Name
        array('description' => __( 'Displays all agenda points.'))
       );
}
function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['numberOfListings'] = strip_tags($new_instance['numberOfListings']);
    return $instance;
}

function form($instance) {
    if( $instance) {
        $title = esc_attr($instance['title']);
        $numberOfListings = esc_attr($instance['numberOfListings']);
    } else {
        $title = '';
        $numberOfListings = '';
    }
    ?>
        <p>
        <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'agenda_widget'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>
        <p>
        <label for="<?php echo $this->get_field_id('numberOfListings'); ?>"><?php _e('Number of Listings:', 'agenda_widget'); ?></label>
        <select id="<?php echo $this->get_field_id('numberOfListings'); ?>"  name="<?php echo $this->get_field_name('numberOfListings'); ?>">
            <?php for($x=1;$x<=30;$x++): ?>
            <option <?php echo $x == $numberOfListings ? 'selected="selected"' : '';?> value="<?php echo $x;?>"><?php echo $x; ?></option>
            <?php endfor;?>
        </select>
        </p>
    <?php
    }

function widget($args, $instance) {
    extract( $args );
    $title = apply_filters('widget_title', $instance['title']);
    $numberOfListings = $instance['numberOfListings'];
    echo $before_widget;
    if ( $title ) {
        echo $before_title . $title . $after_title;
    }
    $this->getRealtyListings($numberOfListings);
    echo $after_widget;
}

function getRealtyListings($numberOfListings) { //html
    global $post;
    add_image_size( 'agenda_widget_size', 85, 45, false );
    $listings = new WP_Query();
    $listings->query('post_type=agenda&posts_per_page=' . $numberOfListings );
    if($listings->found_posts > 0) {
        echo '<ul class="agenda">';
            while ($listings->have_posts()) {
                $listings->the_post();
                $listItem = '<li class="agenda-listing">';
                $listItem .= '<header id="agenda-block">';
                $listItem .= '<div id="agenda-info">';
                $listItem .= '<div id="agenda-info-time">'; 
                $listItem .= '</div>';
                $listItem .= '<div id="agenda-info-title">';
                $listItem .=  the_field('time'); 
                $listItem .= '</div>';
                $listItem .= '<div id="agenda-info-name">';
                $listItem .= '</div>';
                $listItem .= '</div></header>';
                $listItem .= '</li>';
                echo $listItem;
            }

        echo '</ul>';
        wp_reset_postdata();
    }else{
        echo '<p style="padding:25px;">No listing found</p>';
    }
}


} //end class Trm_Agenda_widget
register_widget('Agenda_widget');

and this is the output:

  This is the the_field('time'); ---> 13.15
  <li class="agenda-listing">
    <header id="agenda-block">
      <div id="agenda-info">
        <div id="agenda-info-time">It should be here</div>
        <div id="agenda-info-title"></div>
        <div id="agenda-info-name"></div>
      </div>
    </header>
  </li>

Please help

Answer 1

Change the_field() to get_field()

the_field() = echo get_field()