Estou tentando utilizar o FullCalendar
no meu projeto Django
e estou com dificuldades em fazer o CRUD dos dados.
Eu gostaria que tudo funcionasse na mesma tela,ou seja, quando o usuário seleciona datas no calendário, o modal aparece para inserir os valor (título e datas), quando clica em um evento, aparece o modal para editar o evento e um botão para removê-lo.
Até agora o que eu consegui fazer foi o seguinte:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function (start, end) {
$('#cadastrar #start').val(moment(start).format('DD/MM/YYYY HH:mm:ss'));
$('#cadastrar #end').val(moment(end).format('DD/MM/YYYY HH:mm:ss'));
$('#cadastrar').modal('show');
},
});
});
<script>
No meu template (agenda/agenda.html) fiz isso, que corresponde a agenda e ao modal que é aberto quando é selecionado alguma data no calendário.
<section class="content">
<div id='calendar'></div>
<div class="modal fade" id="cadastrar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title text-center">Cadastrar Evento</h4>
</div>
<div class="modal-body">
<form role="form" action="" method="post">
{% csrf_token %}
<div class="form-group">
{{form.event_name}}
</div>
<div class="form-group">
{{form.start_date}}
</div>
<div class="form-group">
{{form.end_date}}
</div>
<div class="form-group">
{{form.event_type}}
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Em models.py criei o seguinte
class Evento(models.Model):
event_name = models.CharField(max_length=255, null=True, blank=True)
start_date = models.DateTimeField(null=True, blank=True)
end_date = models.DateTimeField(null=True, blank=True)
event_type = models.CharField(max_length=10, null=True, blank=True)
def __str__(self):
return self.event_name
E essas são as minhas views
class AdicionarEventoView(CustomCreateView):
form_class = EventoForm
template_name = "agenda/agenda.html"
permission_codename = 'add_evento'
def get_success_message(self, cleaned_data):
return self.success_message % dict(cleaned_data, descricao=self.object.descricao)
def get_context_data(self, **kwargs):
context = super(AdicionarEventoView, self).get_context_data(**kwargs)
return context
def get(self, request, *args, **kwargs):
return super(AdicionarEventoView, self).get(request, *args, **kwargs)
def post(self, request, *args, **kwargs):
self.object = None
form_class = self.get_form_class()
form = self.get_form(form_class)
if form.is_valid():
self.object = form.save(commit=False)
self.object.save()
return self.form_valid(form)
return self.form_invalid(form)
class EventosListView(CustomListView):
template_name = 'agenda/agenda.html'
model = Evento
context_object_name = 'all_eventos'
permission_codename = 'view_eventos'
def get_context_data(self, **kwargs):
context = super(EventosListView, self).get_context_data(**kwargs)
return context
class EditarEventoView(CustomUpdateView):
form_class = EventoForm
model = Evento
template_name = "agenda/agenda.html"
success_message = "Evento editado com sucesso."
permission_codename = 'change_evento'
def get_success_message(self, cleaned_data):
return self.success_message % dict(cleaned_data, descricao=self.object.descricao)
def get_context_data(self, **kwargs):
context = super(EditarEventoView, self).get_context_data(**kwargs)
return context
def post(self, request, *args, **kwargs):
self.object = self.get_object()
form_class = self.get_form_class()
form = form_class(request.POST, instance=self.object)
if form.is_valid():
self.object = form.save()
return self.form_valid(form)
return self.form_invalid(form)
E finalmente as urls
url(r'agenda/adicionar/$',
views.AdicionarEventoView.as_view(), name='addeventoview'),
url(r'agenda/$',
views.EventosListView.as_view(), name='listaeventosview'),
url(r'agenda/editar/(?P<pk>[0-9]+)/$',
views.EditarEventoView.as_view(), name='editarservicoview'),
Como faço para chamar o modal
de forma que eu consiga cadastrar, editar e excluir os eventos? Até agora o modal abre, mas nenhuma informação aparece. O problema certamente está na view, mas como eu faço para que ele Crie, Edite e Delete na mesma página e no mesmo modal?