calendar.html

---
layout: default
title: Munich Maker Lab - Calendar

header_image: /static/img/bg_arduino.png
headline: Calendar
sub_headline: This is what is going on at the MuMaLand.

custom_css: |
  <!-- Calendar CSS -->
  <link href="/static/lib/fullcalendar/fullcalendar.css" rel='stylesheet' />
  <link href="/static/lib/fullcalendar/fullcalendar.print.css" rel='stylesheet' media='print' />
custom_js: |
    <script src="/static/lib/fullcalendar/lib/moment.min.js"></script>
    <script src="/static/lib/fullcalendar/fullcalendar.min.js"></script>
    <script src="/static/lib/fullcalendar/gcal.js"></script>
    <script src="/static/lib/jquery.ics-0.3.js"></script>
    <script>
        $(document).ready(function() {
            $('#cal_out').fullCalendar({
                googleCalendarApiKey: 'AIzaSyDhw2ehOIaDoox7_68SCq2ag7fjNV82Ank',
                events: {
                    //googleCalendarId: 'lbd0aa2rlahecp7juvp35hd0k0@group.calendar.google.com'
                    url: "https://kreativquartier.munichmakes.de/data/mumalab.json"
                },
                eventLimit: true, // allow "more" link when too many events
                eventClick: function(event) {
                    // opens events in a popup window
                    //window.open(event.url, 'event', 'width=700,height=600');
                    $("#event_title").text(event.title);
                    var description = event.description.replace(/\n/g,"<br>");
                    $("#event_text").html(description);
                    $("#event_location").html("<a href=\"https://maps.google.com/maps?q=" + event.location + "\">" + event.location + "</a>");
                    $("#event_start").html(event.start.format('MMMM Do YYYY, HH:mm'));
                    $("#event_info").show();
                    $("#event_info")[0].scrollIntoView();
                    //console.log(event);
                    return false;
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                firstDay: 1
            });

        });

    </script>
---

        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1" id="cal_out">

            </div>

            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1" id="event_info" style="margin-top:20px; display:none;">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title" id="event_title">Panel title</h3>
                                </div>
                                <div class="panel-body">
                                    <i><span id="event_start"></span></i><br>
                                    Location: <span id="event_location"></span>
                                    <blockquote id="event_text"></blockquote>
                                </div>
                            </div>
                        </div>
        </div>