118 lines
4.1 KiB
HTML
118 lines
4.1 KiB
HTML
{% extends "listing.html" %}
|
|
|
|
{% block datacontent %}
|
|
<div class="card mb-0">
|
|
<div class="card-header">
|
|
<h4 class="card-title"> Calendar</h4>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<div id="fullCalendar"></div>
|
|
</div>
|
|
<div class="card-footer text-right text-muted pt-0">
|
|
<a href="{% url 'event_create' %}">
|
|
<button type="submit" value="add" class="btn btn-icon btn-warning ">
|
|
<i class="tim-icons icon-simple-add"></i>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('[data-sort="table"]').tablesorter({
|
|
headers: {
|
|
0: { sorter: false }, // disable first column
|
|
},
|
|
dateFormat: "uk",
|
|
sortList: [[3,1], [1,0]]
|
|
});
|
|
|
|
$calendar = $('#fullCalendar');
|
|
|
|
today = new Date();
|
|
y = today.getFullYear();
|
|
m = today.getMonth();
|
|
d = today.getDate();
|
|
|
|
$calendar.fullCalendar({
|
|
viewRender: function(view, element) {
|
|
// We make sure that we activate the perfect scrollbar when the view isn't on Month
|
|
if (view.name != 'month') {
|
|
$(element).find('.fc-scroller').perfectScrollbar();
|
|
}
|
|
},
|
|
header: {
|
|
left: 'title',
|
|
center: 'month,agendaWeek,agendaDay,listMonth',
|
|
right: 'prev,next,today'
|
|
},
|
|
// locale: 'fr',
|
|
firstDay: 1,
|
|
defaultDate: today,
|
|
selectable: true,
|
|
selectHelper: true,
|
|
views: {
|
|
month: { // name of view
|
|
titleFormat: 'MMMM YYYY'
|
|
// other view-specific options here
|
|
},
|
|
week: {
|
|
titleFormat: "D MMMM YYYY"
|
|
},
|
|
day: {
|
|
titleFormat: 'D MMMM YYYY'
|
|
}
|
|
},
|
|
|
|
select: function(start, end) {
|
|
// on select we show the Sweet Alert modal with an input
|
|
swal({
|
|
title: 'Create an Event',
|
|
html: '<div class="form-group">' +
|
|
'<input class="form-control" placeholder="Event Title" id="input-field">' +
|
|
|
|
'</div>',
|
|
showCancelButton: true,
|
|
confirmButtonClass: 'btn btn-success',
|
|
cancelButtonClass: 'btn btn-danger',
|
|
buttonsStyling: false
|
|
}).then(function(result) {
|
|
|
|
var eventData;
|
|
event_title = $('#input-field').val();
|
|
|
|
if (event_title) {
|
|
eventData = {
|
|
title: event_title,
|
|
start: start,
|
|
end: end
|
|
};
|
|
$calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
|
|
}
|
|
|
|
$calendar.fullCalendar('unselect');
|
|
|
|
});
|
|
},
|
|
editable: true,
|
|
eventLimit: true, // allow "more" link when too many events
|
|
|
|
|
|
// color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
|
|
events: [
|
|
{% for event in event_list %}
|
|
{
|
|
title: '{{ event.name }}',
|
|
start: new Date({{ event.datebegin | date:"Y"}}, {{ event.datebegin | date:"n"}}-1, {{ event.datebegin | date:"j, G, i"}}),
|
|
end: new Date({{ event.dateend | date:"Y"}}, {{ event.dateend | date:"n"}}-1, {{ event.dateend | date:"j, G, i"}}),
|
|
url: "{% url 'event_details' event.id %}",
|
|
className: {% if event.eventtype.name == 'Compétition' %}'event-red'{% elif event.eventtype.name == 'Démonstration' %}'event-orange'{% else %}'event-green'{% endif %},
|
|
},
|
|
{% endfor %}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |