83 lines
3.5 KiB
HTML
83 lines
3.5 KiB
HTML
|
{% extends 'base.html' %}
|
||
|
|
{% load static %}
|
||
|
|
|
||
|
|
{% block head %}
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.css" />
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function register(id) {
|
||
|
|
$.ajax({
|
||
|
|
url: '{% url 'register' %}',
|
||
|
|
method: 'post',
|
||
|
|
data: {id: id}
|
||
|
|
}).done(function() {window.location += '?id=' + id})
|
||
|
|
}
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
$('[id^=details-]').hide();
|
||
|
|
|
||
|
|
if(window.location.search.indexOf('id=') != -1) {
|
||
|
|
var id = new RegExp(/id=(\d+)/).exec(window.location);
|
||
|
|
$('#details-' + id[1]).show();
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#calendar').fullCalendar({
|
||
|
|
events: [
|
||
|
|
{% for event in events %}
|
||
|
|
{id: {{ event.id }}, title: '{{event.title}}', start: '{{event.date|date:'c'}}', backgroundColor: '#4ec8ff'},
|
||
|
|
{% endfor %}
|
||
|
|
],
|
||
|
|
eventClick: function(calEvent) {
|
||
|
|
$('[id^=details-]').hide();
|
||
|
|
$('#details-' + calEvent.id).show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div class="container-fluid bg-dark-primary">
|
||
|
|
<div class="row p-3">
|
||
|
|
<div class="col-8 bg-white p-3 rounded">
|
||
|
|
<div id="calendar"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 pr-0">
|
||
|
|
<div class="ml-3 rounded bg-white h-100 p-3" style="position:relative">
|
||
|
|
{% for event in events %}
|
||
|
|
<div id="details-{{ event.id }}" style="display:none">
|
||
|
|
<h3>{% if event.attendees.all|length >= event.max_attendees %}<strong>(FULL)</strong>{% endif %} {{ event.title }}</h3>
|
||
|
|
<h6 class="text-muted">{{ event.date }}</h6>
|
||
|
|
<br>
|
||
|
|
<h6><strong>Description:</strong></h6>
|
||
|
|
<p>{{ event.description|safe }}</p>
|
||
|
|
{% if event.location %}
|
||
|
|
<h6><strong>Where:</strong> {{ event.location }}</h6>
|
||
|
|
{% endif %}
|
||
|
|
{% if event.cost %}
|
||
|
|
<h6><strong>Cost: </strong> ${{ event.cost }}</h6>
|
||
|
|
{% endif %}
|
||
|
|
{% if event.attendees.all %}
|
||
|
|
<h6><strong>Attendees ({{ event.attendees.all|length }}{% if event.max_attendees %}/{{ event.max_attendees }}{% endif %}):</strong></h6>
|
||
|
|
{% for attendee in event.attendees.all %}
|
||
|
|
{{attendee.name}},
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
{% if request.user.is_authenticated %}
|
||
|
|
{% if not event.max_attendees or event.attendees.all|length < event.max_attendees %}
|
||
|
|
<div class="fixed-bottom p-3" style="position:absolute">
|
||
|
|
<button class="btn btn-primary float-right" onclick="register({{ event.id }})">Register</button>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|