5

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">&times;</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?

1
  • 1
    Eai Rafael, cara eu tenho um projeto no github que eu faço um sistema de agendamento com Python Django usando o Full Calendar. Se quiser da uma olhada [github.com/khalilmlk/api]. Vai sanar suas dúvidas quanto ao que você quer fazer.
    – K4L1
    25/04/2019 às 1:32

1 Resposta 1

1
+50

Seu problema está no Javascript, não no Python.

Você precisa retornar o seu HTML uma única vez (por exemplo, no endpoint /home ou /), a partir daí você gerencia a lógica de negócio no frontend, e para criar o CRUD você envia chamadas Ajax para seus controllers no Django, nos endpoints (/event/add, event/{id}, event/{id}/edit, event/{id}/delete). Suas views deveriam retornar apenas JSON, com as informações necessárias para atualizar as partes da interface que você deseja, e no próprio Javascript você escreve um callback para processar os resultados do Django e atualizar sua interface sem recarregar a página.

Resumindo, você não precisa de uma view para cada evento. Gerencie os eventos no Javascript diretamente, e considere usar Vue ou React ao invés de jQuery (dá pra fazer com jQuery, mas é mais difícil se o seu projeto crescer).

Não vou escrever código aqui, pois teria que praticamente reescrever toda a estrutura, mas tem um bom tutorial aqui: https://quickadminpanel.com/blog/laravel-fullcalendar-edit-events-with-bootstrap-modal/

O tutorial não é em Django (é em Laravel), mas acredito que você poderia facilmente implementá-lo em Django, já que o frontend não muda de um para o outro.

A parte mais importante do tutorial para a sua pergunta é essa aqui:

$(document).ready(function() {
    // ... All the calendar functionality

    $('#appointment_update').click(function(e) {
        e.preventDefault();
        var data = {
            _token: '{{ csrf_token() }}',
            appointment_id: $('#appointment_id').val(),
            start_time: $('#start_time').val(),
            finish_time: $('#finish_time').val(),
        };

        $.post('{{ route('admin.appointments.ajax_update') }}', data, function( result ) {
            $('#calendar').fullCalendar('removeEvents', $('#event_id').val());

            $('#calendar').fullCalendar('renderEvent', {
                title: result.appointment.client.first_name + ' ' + result.appointment.client.last_name,
                start: result.appointment.start_time,
                end: result.appointment.finish_time
            }, true);

            $('#editModal').modal('hide');
        });
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .