Fullcalendar agendaDay view - how to display events side by side?

Question

How can I display events side by side on day agenda view? I've been trying with some javascript positioning inside eventAfterAllRender function, but no success. Like example on picture, how to position events like left align?

EDIT: Fullcalendar version: 2.4.0.

EDIT: I've changed some CSS and JS code for event width, because I don't want width over entire calendar (on daily view). I've been trying to implement this code for "repositioning"

elements = $('.fc-event-container').find('.fc-v-event');
            var en = 0, cn = 0, i = 0;
            var tzu; 
            var tku; 
            var pzu; 
            var pku; 
            if ($(elements).length > 1) { 
                for (i = 0; i < $(elements).length; i++) {

                    tzu = $(elements[i]).children().children().attr('data-start');
                    de = $(elements[0]).children().children().attr('data-full');


                    st = de.split(' - ');                         
                    if (i > 0) {                                                  
                        zup = $(elements[i - 1]).children().children().attr('data-start');
                        tkuc = $(elements[i]).children().children().attr('data-full');
                        tkud = tkuc.split(' - ');
                        tku = tkud[1];                            
                        if (tzu == zup) {      
                            cn += 1;                                                         
                            $(elements[i]).css('left', 170 * cn + 'px');
                        } if (moment(tkud, "HH:mm").isBefore(moment(st[1], "HH:mm"))) {                                
                            en += 1;                              
                            $(elements[i]).css('left', 170 * en + 'px');
                        }
                    }
                }
            }