Примечания:
Писалось для себя, просто ради интереса, получится ли, но при особом желании могу сделать какие-либо правки и попробовать что-либо прикрутить.
Размещать крайне желательно на отдельной странице, хотя на самом деле встанет куда угодно.

описание работы

Пользователь вводит дату в формате ДД.ММ.ГГГГ, если хочет посмотреть все события за определенный день, либо в формате ДД.ММ.ГГГГ - ДД.ММ.ГГГГ, если хочет посмотреть самые важные события за заданный промежуток времени. По умолчанию отображаются самые важные события за весь доступный период
Число отображаемых событий определяется так: берутся самые важные события за заданный период, если их меньше 10, то они дополняются событиями меньшей важности. Обрезки по приоритету не происходит, потому что это не очень логично: у нас нет основания заявлять, что более поздние события имеют меньший приоритет для отображения, поэтому если в 10 попадает хотя бы 1 элемент из очередной категории, то она отображается полностью. Результат высвечивается после вывода курсора за пределы поля ввода (клик мышью вне поля/нажатие tab). Результаты сортируются по приоритету.

Код:
<script src="http://forumfiles.ru/files/0017/dd/75/56216.js" type="text/javascript"></script>
<script type='text/javascript'>
    var chron = [
    //0 приоритет
    [
        {data: "00.00.0000", descr: "Бла бла бла1"},
        {data: "11.00.0000", descr: "Бла бла бла7"},
        {data: "01.01.0000", descr: "Бла бла бла2"},
        {data: "99.99.9999", descr: "Бла бла бла11"}// последнее без запятой
    ],
    //1 приоритет
    [
        {data: "00.00.0000", descr: "Бла бла бла21"},
        {data: "11.00.0000", descr: "Бла бла бла12"},
        {data: "11.00.0000", descr: "Бла бла бла13"}// последнее без запятой
    ],
    //2 приоритет
    [
        {data: "00.00.0000", descr: "Бла бла бла21"}//последнее без запятой
    ],
    //3 приоритет
    [
        {data: "00.00.0000", descr: "Бла бла бла21"}//последнее без запятой
    ]]; //Поддерживать упорядоченность по возрастанию даты всего набора событий.
    var colors = ["maroon", "navy", "green", "purple"];
</script>
<style>
    .td1{width: 200px;}
    .td2{width:800px;}
</style>
<div><input id="lol" placeholder="ДД.ММ.ГГГГ - ДД.ММ.ГГГГ" type="text" onchange="show(this.value, chron, colors, res);" style="width:170px" value="00.00.0000 - 99.99.9999"></div>
<table id='resHead'><tr><td class='td1'><strong>Дата</strong><br></td><td class='td2'><strong>Событие</strong><br></td></tr></table>
<table id='res'></table>
<script type="text/javascript">show(lol.value, chron, colors, res);</script>

Разбираемся в происходящем:
1)Все построено так, что чем важнее событие - тем меньше значение приоритета (0 - самые важные, соответственно, их должно быть по минимуму)
1а)Принципиальную важность для работы скрипта имеет добавление событий в каждую из категорий в порядке неубывания (возрастания) даты. Одна ошибка в сортировке = один нерабочий скрипт.
Возможно, чуть позже прикручу автосортировку, но версия без нее в любом случае будет работать быстрее.
2)Событие задается строкой вида {data: "00.00.0000", descr: "Бла бла бла21"}, где data, очевидно, задает его дату, а descr - описание события. В один день вполне может произойти множество разных событий.
3)Цвета отображения событий задаются строкой var colors = ["maroon", "navy", "green", "purple"], где первый цвет для событий с 0 приоритетом, второй с 1 и так далее.
4)Ширина столбцов задается строками .td1{width: 200px;} и .td2{width:800px;}, там же люди со знанием css могут настроить фон и прочие украшательства.
5)Изменить не очень реалистичное 00.00.0000 - 99.99.9999 на адекватные даты можно в строке, указанной ниже, поменяв выделенное красным на требуемый диапазон

<div><input id="lol" placeholder="ДД.ММ.ГГГГ - ДД.ММ.ГГГГ" type="text" onchange="show(this.value, chron, colors, res);" style="width:170px" value="00.00.0000 - 99.99.9999"></div>

Потыкать в готовую хронологию можно здесь

Отредактировано Emerael (Ср, 9 Ноя 2016 02:45:22)