2

Eu tenho eventos que guardo no banco de dados e quero criar uma timeline que mostre os eventos do dia por ordem de acontecimento e permita o usuário avançar ou retroceder o dia e selecionar os eventos. Conforme ele seleciona um evento, coisas diferentes são mostradas na tela.

Eu fiz um esboço de exemplo, é relativamente simples, mas na internet, pelo menos até agora, só encontrei timelines com outras funcionalidades. Talvez timeline não seja o melhor termo para descrever, mas não consigo um melhor agora.

Segue o esboço:

Quando o usuário clicar na seta à esquerda (<), diminui o dia e são carregados os eventos do dia anterior ao que estava (no caso, 20/03/2014). Ao clicar na seta à direita (>), avança o dia e carrega-se os eventos do dia posterior (no caso, 22/03/2014). Quando o usuário clica em um evento, seleciona ele e mostra coisas sobre ele na tela, além do evento mudar de cor na timeline.

Se não houver algum plugin na internet, por onde posso começar a estudar para desenvolver isto? Alguma sugestão?

1
  • Você irá achar algo se procurar por Calendário jQuery ou Scheduler. 24/03/2014 às 14:11

2 Respostas 2

2

Acredito que a solução está mesmo em usar algum plugin. Acho que uma variante de lightbox pode resolver bem o seu problema.

Em todo caso, se você quiser implementar a solução, montei um código bem básico que pode servir de base para você.

Implementei no jsFiddle, aqui: http://jsfiddle.net/2Sthd/5/

Basicamente, se você clicar em "anterior" ou "próximo", é disparado um evento que move o "menu". Ao clicar em um dos eventos, a "caixinha" atual é escondida, e uma outra é mostrada, correspondente ao novo 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 (com 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;
    });
});
5
  • Olá Michael. Obrigado, está perto do que eu preciso. Só que eu gostaria que ao clicar no anterior e próximo, trocasse a lista de eventos e os eventos só pudessem ser selecionados com o clique em cima. Como proceder para essas alterações? O que sugere? Obrigado. 24/03/2014 às 14:54
  • Oi! Editei a resposta, acho que é isso. Seria bom fazer mais algumas validações (ex: descobrir onde parar o anterior/próximo). Posso fazer isso mais tarde, mas é fácil. Só precisa de um cálculo baseado na quantidade de itens e largura de cada item.
    – Michael
    24/03/2014 às 15:14
  • Pronto, fiz a validação do máximo/mínimo também.
    – Michael
    24/03/2014 às 15:31
  • Michael, acha que consegue postar o código no JS Bin ou no CSS Deck? De qualquer maneira, já me ajudou bastante, obrigado. 24/03/2014 às 19:03
  • Aqui está: jsbin.com/xuqejupo/1
    – Michael
    24/03/2014 às 19:22
1

Existem diversos Plugins de uma olhada em:

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

Ou procure por jquery timeline no google para achar diversos outros

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .