Validate events and visualize at the moment in full calendar

1

I have a reservation calendar. The problem I have is the following: with a URL and a view I keep the events. to show the events I have another URL as a view for it.

And what I want to do is to save the events that can be shown to me in the same calendar. I would appreciate it very much

My code is as follows:

  

full calendar

<script>
  $(document).ready(function() {
        $('#calendario').fullCalendar({
            header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay,listMonth,listWeek,listDay'
            },
            allDay: false,
            defaultDate: new Date(),
            locale: 'es',
            defaultView: 'agendaWeek',//hace una vista a la semana del calendario
            navLinks: true,
            weekNumbers: true,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            timezone: 'UTC',// revisarrrrrrrr
            displayEventTime: true, //quita la hora del evento
            events: [
                {% for i in events %}
                {
                    title: "{{ i.id_cliente}}",
                    start: '{{ i.inicio|date:"Y-m-d HH:mm" }}',
                    end: '{{ i.fin|date:"Y-m-d HH:mm" }}',

                },  
                {% endfor %}
           ],
  
          selectable: true,
          selectHelper: true,
          select: function(startDate, endDate) {
          $('#fc_create').click();
                    alert('selected ' + startDate.format("h:mm") + ' to ' + endDate.format("h:mm"));
                    $("#fecha_inicio").val(startDate.format("h:mm"));                    
                    $("#fecha_fin").val(endDate.format("h:mm"));
                    $("#fecha").val(startDate.format("YYYY-MM-DD"));
                    //horas inicio y fin separadas de la fecha, despues sumarlas y cargarlas al form
                    var hora_inicio = $('#fecha_inicio').val();
                    var hora_fin= $("#fecha_fin").val();
                    var fecha = $('#fecha').val();
                    var hora_inicio = fecha +' '+ hora_inicio;
                    var hora_fin = fecha +' '+ hora_fin;

                    $('#id_inicio').val(hora_inicio);
                    $('#id_fin').val(hora_fin);  
                  },
        });
    });
</script>
  

Views

def guardar_reserva(request):
if request.method == 'POST':
    form = Reservacion_form(request.POST)
    print (form.errors)
    if form.is_valid():
        form.save()
        print ('sii')
        return redirect('eventos')
else:
    form = Reservacion_form()
return render(request, 'canchas/cancha_cesped.html', {'form':form})


def event(request):
all_events = Reserva.objects.all()
if request.GET:       
    event_arr = []
    for i in events:
        event_sub_arr = {}
        event_sub_arr['id_cliente'] = i.titulo
        start_date = datetime.datetime.strptime(str(i.inicio.date()), "%Y-%m-%d %H:%M").strftime("%Y-%m-%d %H:%M")
        end_date = datetime.datetime.strptime(str(i.fin.date()), "%Y-%m-%d %H:%M").strftime("%Y-%m-%d %H:%M")
        event_sub_arr['inicio'] = inicio
        event_sub_arr['fin'] = fin 
        event_arr.append(event_sub_arr)
    return HttpResponse(json.dumps(event_arr))
else:
    form = Reservacion_form(request.POST)
    if form.is_valid():
        form.save()
        print ('sii')
        return redirect('eventos')

context = {
    "events":all_events,

}
return render(request, 'canchas/cancha_cesped.html',context)
  

urls

url(r'^reserva/', login_required(guardar_reserva), name=''),
url(r'^ver_calendario/', event, name='eventos'),
    
asked by Hernán 02.08.2018 в 06:59
source

1 answer

0

By having the events built from the server, you need to update the page to show the events once added. I would recommend you to take the events from the server, according to the documentation you can do:

$('#calendar').fullCalendar({
  events: '/getEvents' //donde esta url te dará un JSON con los eventos
});

And then update once added:

$('#calendar').fullCalendar('refetchEvents');

Of course, you need to create a new page or a new function where the JSON returns you with the events.

    
answered by 03.08.2018 в 13:27