What jQuery plugin lets you select days and events each day in a horizontal timeline?

I think the solution is really to use some plugin. I think a lightbox variant can solve your problem well.

In any case, if you want to implement the solution, I put together a very basic code that can serve as the basis for you.

Implemented in jsFiddle, here: link

Basically, if you click "previous" or "next", an event that moves the "menu" is triggered. When you click on one of the events, the current "box" is hidden, and another is shown corresponding to the new item.

HTML:

<a class="event-arrow event-arrow-prev">
    Anterior
</a>

<div class="event-list-container">
<ul class="event-list">
    <li data-event-id="1" class="event-list-item event-selected">Evento 1</li>
    <li data-event-id="2" class="event-list-item">Evento 2</li>
    <li data-event-id="3" class="event-list-item">Evento 3</li>
    <li data-event-id="4" class="event-list-item">Evento 4</li>
    <li data-event-id="5" class="event-list-item">Evento 5</li>
    <li data-event-id="6" class="event-list-item">Evento 6</li>
    <li data-event-id="7" class="event-list-item">Evento 7</li>
    <li data-event-id="8" class="event-list-item">Evento 8</li>
</ul>
</div>

<a class="event-arrow event-arrow-next">
    Próximo
</a>

<div class="event-container">
    <div class="event event-current" data-event-id="1">
        <div class="event-title">
            Evento 1
        </div>
        <div class="event-description">
            Blabla bla bla
        </div>
    </div>

    <div class="event" data-event-id="2">
        <div class="event-title">
            Evento 2
        </div>
        <div class="event-description">
            Bleble ble
        </div>
    </div>

    <div class="event" data-event-id="3">
        <div class="event-title">
            Evento 3
        </div>
        <div class="event-description">
            Bli bli bli
        </div>
    </div>

    <div class="event" data-event-id="4">
        <div class="event-title">
            Evento 4
        </div>
        <div class="event-description">
            Blobblo blo
        </div>
    </div>

    <div class="event" data-event-id="5">
        <div class="event-title">
            Evento 5
        </div>
        <div class="event-description">
            Blobblo blo
        </div>
    </div>

    <div class="event" data-event-id="6">
        <div class="event-title">
            Evento 6
        </div>
        <div class="event-description">
            Blobblo blo
        </div>
    </div>

    <div class="event" data-event-id="7">
        <div class="event-title">
            Evento 7
        </div>
        <div class="event-description">
            Blobblo blo
        </div>
    </div>

    <div class="event" data-event-id="8">
        <div class="event-title">
            Evento 8
        </div>
        <div class="event-description">
            Blobblo blo
        </div>
    </div>
</div>

CSS:

.event {
    width: 200px;
    height: 100px;
    background-color: gray;
    margin: 5px;
}

.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 800px;
    margin-left: 0;
}

.event-list-container {
    width: 210px;
    overflow: hidden;
    background-color: yellow;
    height: 20px;
}

.event-list-item {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    width: 60px;
    float: left;
    display: block;
    background-color: gray;
    text-align: center;
}

.event-arrow {
    color: blue;
    cursor: pointer;
}

.event-selected {
    text-decoration: underline;
    color: green;
}

.event {
    display: none; 
}

.event-current {
    display: block;
}

.event-title {
    font-size: 26px;
    font-weight: strong;
    margin-bottom: 5px;
    background-color: black;
    color: gray;
}

Javascript (with jQuery):

function showCurrentEvent(eventId) {
    $('.event-current').removeClass('event-current');
    $('.event[data-event-id=' + eventId + ']').addClass('event-current');

}

$(function() {
    $('.event-arrow-prev').on('click', function() {
        $('.event-list').css('margin-left', function (index, curValue) {
            var cur = parseInt(curValue, 10) + 70;

            if (cur < 0) {
                return cur + 'px';
            }
            else {
                return '0px';
            }
        });

        return false;
    });

    $('.event-arrow-next').on('click', function() {
        $('.event-list').css('margin-left', function (index, curValue) {
            var cur = parseInt(curValue, 10) - 70;

            if (cur >= -70*5) {
                return cur + 'px';
            }
            else {
                return (-70*5) + 'px';
            }
        });

        return false;
    });

    $('.event-list-item').on('click', function() {
        var currentEvent = $('.event-selected');
        currentEvent.removeClass('event-selected');

        var newEventId = $(this).data('event-id');

        $('.event-list-item[data-event-id=' + newEventId + ']').addClass('event-selected');

        showCurrentEvent(newEventId);

        return false;
    });
});

There are several Plugins at a glance:

timeline.knightlab.com

codecanyon.net/item/jquery-flat-event-calendar-responsive-timeline/6039142?ref=jqueryrain

codecanyon.net/item/dasky-timeline-slider/5071233?ref=jqueryrain

github.com/ozeetee/jqtimeline

codecanyon.net/item/jquery-tweet-feed-plugin/3485336

juanma-aguero.github.io/fancy-timeline

Or search for jquery timeline on google to find several others