Which jquery plugin allows you to select days and events each day in a horizontal Timeline?

Asked

Viewed 515 times

2

I have events that I keep in the database and I want to create a Timeline that shows the events of the day in order of event and allow the user to move forward or backtrack the day and select the events. As he selects an event, different things are shown on the screen.

I did an example sketch, it’s relatively simple, but on the internet, at least so far, only found timelines with other features. Maybe Timeline isn’t the best term to describe, but I can’t get a better one now.

Follows the outline:

When the user clicks on the left arrow (<), the day decreases and the events from the day before the day before the day before the day (in this case, 03/20/2014) are loaded. By clicking on the right arrow (>), the day is advanced and the events of the subsequent day are loaded (in this case, 03/22/2014). When the user clicks on an event, selects it and shows things about it on the screen, in addition to the event changing color on Timeline.

If there is no plugin on the internet, where can I start studying to develop this? Any suggestions?

jquery jquery-ui

  • You will find something if you search for jQuery Calendar or Scheduler.

2 answers

2


I believe the solution is even in using some plugin. I think a variant of lightbox can solve your problem well.

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

I implemented in jsFiddle, here: http://jsfiddle.net/2Sthd/5/

Basically, if you click "previous" or "next", an event that moves the "menu" is triggered. When clicking 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;
    });
});

  • Hi Michael. Thank you, you’re close to what I need. Only that I would like to click on the previous and next one, change the list of events and the events could only be selected with the click above. How to proceed with these changes? What do you suggest? Thank you.

  • Hi! I edited the answer, I think that’s it. It would be good to do some more validations (ex: find out where to stop the previous/next one). I can do this later, but it’s easy. It just needs a calculation based on the amount of items and width of each item.

  • Okay, I did the maximum/minimum validation too.

  • Michael, do you think you can post the code to JS Bin or CSS Deck? Anyway, you’ve helped me a lot, thank you.

  • Here you are: http://jsbin.com/xuqejupo/1/

1

There are several Plugins at a glance at:

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

Browser other questions tagged jquery jquery-ui

You are not signed in. Login or sign up in order to post.