<!--HTML-->
<div class="calendar_wrapper">
<div class="month">
    <ul>
        <!--<li class="prev">❮</li>
        <li class="next">❯</li>-->
        <li style="text-align:center">
            June<br>
            <span style="font-size:18px">2017</span>
        </li>
    </ul>
</div>

<ul class="weekdays">
    <li>Mo</li>
    <li>Tu</li>
    <li>We</li>
    <li>Th</li>
    <li>Fr</li>
    <li>Sa</li>
    <li>Su</li>
</ul>

<ul class="days">
    <li></li>
    <li></li>
    <li></li>
    <li onclick="showEvent(1)">1</li>
    <li onclick="showEvent(2)">2</li>
    <li onclick="showEvent(3)">3</li>
    <li onclick="showEvent(4)">4</li>
    <li onclick="showEvent(5)">5</li>
    <li onclick="showEvent(6)">6</li>
    <li onclick="showEvent(7)">7</li>
    <li onclick="showEvent(8)">8</li>
    <li onclick="showEvent(9)">9</li>
    <li onclick="showEvent(10)">10</li>
    <li onclick="showEvent(11)">11</li>
    <li onclick="showEvent(12)">12</li>
    <li onclick="showEvent(13)">13</li>
    <li onclick="showEvent(14)">14</li>
    <li onclick="showEvent(15)">15</li>
    <li onclick="showEvent(16)">16</li>
    <li onclick="showEvent(17)">17</li>
    <li onclick="showEvent(18)">18</li>
    <li onclick="showEvent(19)">19</li>
    <li onclick="showEvent(20)">20</li>
    <li onclick="showEvent(21)">21</li>
    <li onclick="showEvent(22)">22</li>
    <li onclick="showEvent(23)">23</li>
    <li onclick="showEvent(24)">24</li>
    <li onclick="showEvent(25)">25</li>
    <li onclick="showEvent(26)">26</li>
    <li onclick="showEvent(27)">27</li>
    <li onclick="showEvent(28)">28</li>
    <li onclick="showEvent(29)">29</li>
    <li onclick="showEvent(30)">30</li>
<li onclick="showEvent(31)">31</li>
</ul>

<div class="eventsMessage">
    <div class="close" onclick="closeEventsMessage()">❌</div>
    <div class="message"></div>
</div>
</div>



<script>
    var DATA = "8 июня — «Секреты Вудсайда», пьеса в двух действиях, клуб «K-W Musical Productions», 19:00\n13 июня — концерт группы «Grand River New Horizons», площадка перед «K-W Naval Association», 8:30 — 11:00\n13 июня — вечеринка в общественном плавательном бассейне, «Moses Springer Community Centre», 11:00 — 00:00\n13 июня — выступление женского акапельного хора «Grand Harmony», меннонитский клуб для старшего поколения «Parkwood Mennonite Home», 19:00 — 22:00\n13 июня — мастер-класс для повышения квалификации тамад, «Lincoln Road Toastmasters», 19:00 — 21:00\n13 июня — собрание клуба нумизматов, организация «Waterloo Coin Society», 19:30 — 21:30\n13 июня — «Ножи в курицах», спектакль, художественная лабораторbя «Critical Media Lab», 20:00 —21:30\n15 июня — открытие рынка, остановка «Caroline / Erb», 15:00\n15 июня — лекция от врачей-диетологов об установлении рациона для нормализации кровяного давления, парк Уотерлу, 17:30 — 18:30\n17 июня — «Вкусы Вудвича», агропромышленная ярмарка-выставка, парк Уотерлу, 09:00— 01:00\n17 июня — йога на природе, парк Уотерлу, 10:00 — 11:00\n18 июня — «Открытые улицы», мероприятие для приезжих, сквер, 12:00 — 17:00\n18 июня — чемпионат города по гольфу, поле для гольфа «Rockway Golf Course», 12:00 — 17:00\n20 июня — «Это все принадлежит вам!», день открытых дверей в музее Уотерлу «City of Waterloo Museum», 09:30 — 16:00\n21 июня — вечеринка у костра, главная площадь Уотерлу, 20:00 — 22:00\n22 июня — открытое интервью с художником Джозефом Тисайгой, арт-галерея «Kitchener Waterloo Art Gallery», 19:00 — 20:00\n24 июня — «Franco fête», фестиваль французской культуры, парк Уотерлу, 13:30 — 20:00\n24 июня — концерт, посвященный 50-летию Центра социальной помощи Уотерлу, площадка рядом с центром, 19:30 —23:00\n25 июня — «Орнитология для чайников», лекция от экологического центра, павильон для мероприятий «The Slit Barn», 08:00 — 10:00\n25 июня — «Пой, Канада!», концерт, посвященный 150-летию независимости Канады, актовый зал пресвитерианской церкви «Calvin Presbyterian Church», 19:00 — 21:00\n30 июня — концерт по случаю последней пятницы в месяце, парк Уотерлу, 11:00 — 23:00"

    var DATA_SPLIT = DATA.split("\n");

    var DAYS = [];
    for(var i=0; i<DATA_SPLIT.length; i++) {
        var temp = DATA_SPLIT[i].split(" ");
        DAYS.push(temp[0]);
    }

    var DATA_WITHOUT_DAYS = [];
    for(i=0; i<DATA_SPLIT.length; i++) {
        var temp = DATA_SPLIT[i].split(" — ");
        temp.shift();
        DATA_WITHOUT_DAYS[i] = temp.join(" — ");
    }

    var DATA_WITHOUT_DAYS_AND_TIME = [];
    var DATA_TIME = [];
    for(i=0; i<DATA_WITHOUT_DAYS.length; i++) {
        temp = DATA_WITHOUT_DAYS[i].split(", ");
        DATA_TIME[i] = temp[temp.length-1];
        temp.length--;
        DATA_WITHOUT_DAYS_AND_TIME[i]=temp.join(", ");
    }


    function showEvent(day) {
        var current_data;
        for(i=0; i<DAYS.length; i++) {
            if (DAYS[i]==day) {
                if (!current_data){
                    current_data="";
                }
                current_data+="<b>" + DATA_TIME[i] + "</b> — ";
                current_data+=DATA_WITHOUT_DAYS_AND_TIME[i] + "<br>";
            }
        }
        document.getElementsByClassName("message")[0].innerHTML = current_data ||
            "К сожалению, ничего знаменательного в этот день не происходило.";
        document.getElementsByClassName("eventsMessage")[0].style.display = "block";
    }

    function closeEventsMessage() {
        document.getElementsByClassName("eventsMessage")[0].style.display = "none";
    }
</script>