2019-04-25 23:50:31 +02:00
|
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/calendar.css') }}">
|
|
|
|
|
2019-05-10 08:24:13 +02:00
|
|
|
<div class="calendar">
|
|
|
|
<script type="text/template" id="tmplt-clndr">
|
|
|
|
<div class='clndr-controls'>
|
|
|
|
<div class='clndr-control-button'>
|
|
|
|
<span class='clndr-previous-button'>‹ previous</span>
|
|
|
|
</div>
|
|
|
|
<div class='month'><%= month %> <%= year %></div>
|
|
|
|
<div class='clndr-control-button rightalign'>
|
|
|
|
<span class='clndr-next-button'>next ›</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'>‹ previous</span>
|
|
|
|
</div>
|
|
|
|
<div class='month'><%= extras.selected.format("LL") %></div>
|
|
|
|
<div class='clndr-control-button rightalign'>
|
|
|
|
<span class='clndr-next-button'>next ›</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>
|
2019-04-25 23:50:31 +02:00
|
|
|
|
|
|
|
<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 = {};
|
2019-05-10 08:24:13 +02:00
|
|
|
var tmplts = {};
|
|
|
|
var a;
|
2019-04-25 23:50:31 +02:00
|
|
|
|
|
|
|
$(document).ready( function() {
|
2019-05-10 08:24:13 +02:00
|
|
|
tmplts.clndr = $('#tmplt-clndr').html();
|
|
|
|
tmplts.clndrEvents = $('#tmplt-clndr-events').html();
|
2019-04-25 23:50:31 +02:00
|
|
|
|
|
|
|
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'
|
2019-05-10 08:24:13 +02:00
|
|
|
}, {
|
|
|
|
date: thisMonth + '-6',
|
|
|
|
title: 'Test'
|
|
|
|
}
|
2019-04-25 23:50:31 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
calendars.clndr = $('.calendar').clndr({
|
|
|
|
events: eventArray,
|
|
|
|
clickEvents: {
|
|
|
|
click: function (target) {
|
2019-05-10 08:24:13 +02:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
*/
|
2019-04-25 23:50:31 +02:00
|
|
|
},
|
|
|
|
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,
|
2019-04-26 03:28:27 +02:00
|
|
|
adjacentDaysChangeMonth: false,
|
2019-05-10 08:24:13 +02:00
|
|
|
weekOffset: 1,
|
|
|
|
forceSixRows: true,
|
|
|
|
template: tmplts.clndr,
|
|
|
|
extras: {
|
|
|
|
selected: null
|
|
|
|
}
|
2019-04-25 23:50:31 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
$(document).keydown( function(e) {
|
|
|
|
if (e.keyCode == 37) {
|
|
|
|
calendars.clndr.back();
|
|
|
|
}
|
|
|
|
if (e.keyCode == 39) {
|
|
|
|
calendars.clndr.forward();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|