Hello.

I am trying to display individual category using shortcode, but the layout seems to be broken. 
What i am doings is, that, when a category name is presed, i have ajax function, that returns ID of that category and inserts it into shortcode that display calendar. 

1. this is the function that gets all categories and displays them

function display_events_from_cat(){
    $terms = get_terms( array(        
        'taxonomy' => 'stec_event_category',   
        'hide_empty' => false,       
        'exclude' => array( 67 )        
    ) );   
    $category = [];
    echo '<div class="home-event-cat-loop">';   
        foreach ($terms as $t){      
          array_push($category, array(  
              'slug' => $t->slug,     
              'name' => $t->name,  
              'id'   => $t->term_id       
             ));        ?>   
             <a class="home-cat-name" id="<?php echo $t->slug; ?>">    
            <?php echo $t->name; ?>       
             </a>        <?php    
        }    ?>    
        <script>       
         $j = jQuery.noConflict();        
         var cat = <?php echo json_encode($category); ?>;   
        </script>    
        <div class="modal" id="MyModal">        
            <div class="modal-dialog">       
                 <div class="modal-content">        
                    <a id="close-modal" class="close-modal-btn">×</a>                <div class="modal_"></div>
                  </div>      
            </div>   
        </div>
    <?php    echo '</div>';
}

2. This is my ajax function

cat.forEach(function(value,index){
    $j('#'+value.slug).on('click',function(e){
        e.preventDefault();       
        $j.ajax({            
            url  : nlp_ajax.ajaxurl,
            type : 'post',
            data : {
                action : 'display_events_from_cat',
                id : value.id,
                slug : value.slug,
                name : value.name,
            },
            success:function(data)
            {
               $j('#MyModal .modal_').html(data);
                $j('#MyModal').show();
            }
        });
    });
});
$j('#close-modal').click(function() {
    $j('#MyModal').hide();
});

3. This is the function that is suposed to show calendar in modal

function filter_results(){
    $id = sanitize_text_field($_POST['id']);   
    $name = sanitize_text_field($_POST['name']);    
    $slug = sanitize_text_field($_POST['slug']);    ?>   
    <!-- The Modal -->
        <!-- Modal Header --> 
           <div class="modal-header">            
            <h1 class="modal-title"><?php echo $name; ?></h1>       
           </div>
        <!-- Modal body -->       
            <div class="modal-body">            
                <?php echo do_shortcode('[stachethemes_ec view=agenda agenda_cal_display=0 show_top=1 cat='.$id.']'); ?>        
            </div>
    <?php    die();
}

But the result is returned like this, the layout is broken.

I've checked other submitions, and nothing seems to work.

Force load calendar scripts is turned on and so on 

Hello, thank you, but how can initialize this - new Calendar_Instance? IT seems to crash everything, but i cant find documentation for this.

How to add class or something that understands what new Calendar_Instance is?

 $calendar_instance                                 = new Calendar_Instance(array('id' => $calendar_id));