husstanden/templates/modules/calendar.html

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/calendar.css') }}">

<div class="calendar">
	<script type="text/template" id="tmplt-clndr">
		<div class='clndr-controls'>
            <div class='clndr-control-button'>
                <span class='clndr-previous-button'>&lsaquo; previous</span>
            </div>
            <div class='month'><%= month %> <%= year %></div>
            <div class='clndr-control-button rightalign'>
                <span class='clndr-next-button'>next &rsaquo;</span>
            </div>
        </div>
		<div class="clndr-main">
			<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
				<thead>
					<tr class='header-days'>
					<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>
						<td class='header-day'><%= daysOfTheWeek[i] %></td>
					<% } %>
					</tr>
				</thead>
				<tbody>
				<% for(var i = 0; i < numberOfRows; i++){ %>
					<tr>
					<% for(var j = 0; j < 7; j++){ %>
					<% var d = j + i * 7; %>
						<td class='<%= days[d].classes %>'>
							<div class='day-contents'><%= days[d].day %></div>
						</td>
					<% } %>
					</tr>
				<% } %>
				</tbody>
			</table>
		</div>
	</script>
	<script type="text/template" id="tmplt-clndr-events">
		<div class='clndr-controls'>
            <div class='clndr-control-button'>
                <span class='clndr-previous-button'>&lsaquo; previous</span>
            </div>
            <div class='month'><%= extras.selected.format("LL") %></div>
            <div class='clndr-control-button rightalign'>
                <span class='clndr-next-button'>next &rsaquo;</span>
            </div>
        </div>
		<div class="clndr-main">
			<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
				<thead>
					<tr class='header-days'>
					<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>
						<td class='header-day'><%= daysOfTheWeek[i] %></td>
					<% } %>
					</tr>
				</thead>
				<tbody>
				<% for(var i = 0; i < numberOfRows; i++){ %>
					<tr>
					<% for(var j = 0; j < 7; j++){ %>
					<% var d = j + i * 7; %>
						<td class='<%= days[d].classes %>'>
							<div class='day-contents'><%= days[d].day %></div>
						</td>
					<% } %>
					</tr>
				<% } %>
				</tbody>
			</table>
		</div>
	</script>
</div>

<script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/underscore.min.js') }}"></script>
<script src="{{ url_for('static', filename='modules/clndr.min.js') }}"></script>
<script>
var calendars = {};
var tmplts = {};
var a;

$(document).ready( function() {
	tmplts.clndr = $('#tmplt-clndr').html();
	tmplts.clndrEvents = $('#tmplt-clndr-events').html();

    var thisMonth = moment().format('YYYY-MM');
    var eventArray = [ // TODO: Get events from database
        {
            title: 'Multi-Day Event',
            endDate: thisMonth + '-14',
            startDate: thisMonth + '-10'
        }, {
            endDate: thisMonth + '-23',
            startDate: thisMonth + '-21',
            title: 'Another Multi-Day Event'
        }, {
            date: thisMonth + '-27',
            title: 'Single Day Event'
        }, {
			date: thisMonth + '-6',
			title: 'Test'
		}
    ];

    calendars.clndr = $('.calendar').clndr({
        events: eventArray,
        clickEvents: {
            click: function (target) {
				a = target;
				console.log(target.date.day());
				this.options.extras.selected = target.date;
				this.compiledClndrTemplate = _.template(tmplts.clndrEvents);
				this.render();
				/*
                var clndrContainer = $('.calendar').find('.clndr-main');
				clndrContainer.toggleClass('show-event-menu', true);
				$('.calendar').find('.x-button').click( function() {
					clndrContainer.toggleClass('show-event-menu', false);
				});
				*/
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false,
		weekOffset: 1,
		forceSixRows: true,
		template: tmplts.clndr,
		extras: {
			selected: null
		}
    });

    $(document).keydown( function(e) {
        if (e.keyCode == 37) {
            calendars.clndr.back();
        }
        if (e.keyCode == 39) {
            calendars.clndr.forward();
        }
    });
});
</script>