I would like to embed Fullcalendar (http://fullcalendar.io/) to smartVISU so that I can show month or week view of the calendar. The reason why I would like to use Fullcaledar is that It is quite easy to import your Google calendar to Fullcaledar. I would like to embed it so that the calendar has same look and feel as smartVISU theme. I can get Fullcalendar with google calendar working, but I don't have enough knowledge make it work with smartVISU theme, so that all the smartVISU menus work. Can someone help me to solve the problem.

Here is one example of the look of the Fullcalendar: http://fullcalendar.io/js/fullcalend...sic-views.html

Here is example calendar of the calendar code
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultDate: '2016-01-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2016-01-01'
                },
                {
                    title: 'Long Event',
                    start: '2016-01-07',
                    end: '2016-01-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2016-01-09T16:00:00'
                },

            ]
        });

    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>
Here you can find the Fullcalendar Zip-package: http://fullcalendar.io/download/


I am using "otterstaetter's" overview theme. I would like to embed calendar to code below replacing the backround picure, but use all the menus.
HTML-Code:
/**
 * -----------------------------------------------------------------------------
 * @package     smartVISU
 * @author      Martin Gleiß
 * @copyright   2012
 * @license     GPL <http://www.gnu.de>
 * -----------------------------------------------------------------------------
 */
{% extends "base.html" %}


{% import "widgets/overview.html" as ov %}

{% block content %}
    <div class="html" data-title="Erdgeschoss">

    <div class="preblock">
    </div>

    <div class="ui-grid-a ui-responsive">
        <div class="overview ui-block-a">
            <!-- Background picture -->
            {{ ov.background ('background_eg', 'pages/Wt53/overview/images/eg.svg') }}



        </div>

    </div>
    </div>
{% endblock %}
BR,

Tomas