使用Django和完整日历JS在同一视图中处理POST和GET Mehtods

时间:2018-12-01 19:56:38

标签: django bootstrap-4 fullcalendar

首先,对不起我的英语不好,我的解释很多余,因为我是这个编程语言和这个社区的新手。

所以,让我们开始吧,我已经安装了完整日历本身的所有结构,并且在日期中单击空白处以添加新事件并可以完美地将事件添加到模型中时使用模式弹出窗口。用JSON渲染时,真正的问题是:单击时如何更新现有事件?这是我的代码:

我的views.py

from django.shortcuts import render, redirect
from django.http import HttpResponse, JsonResponse
from apps.calendarDCC.forms import EventForm
from apps.calendarDCC.models import EventsCalendar
import json

def show_calendar(request):
    return render(request, 'calenar/events_fullcalendar.html')#to show the calendar

def json_events(request):
    events = EventsCalendar.objects.all().values('id', 'title', 'description', 'start', 'end', 'className', 'editable', 'allDay', 'customer').order_by('id')
    events_list = list(events)
    return JsonResponse(events_list, safe=False)#render my events in JSON

def modal_addevent(request): #use 'Eventform' in a modal to add events
    if request.method == 'POST':
        form = EventForm(request.POST)
        if form.is_valid():
            form.save()
    return redirect('events_calendar')
else:
    form = EventForm()
return render(request, 'events/events_calendar.html', {'form':form})

我的HTML模板

{% extends 'base/base.html' %}

{% block content %}
<div class="container">
<div class="col" id= "calendar">
    <script>
        $(function() {
            $('#calendar').fullCalendar({
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                locale: 'en',
                //timezone: 'local',
                themeSystem: 'bootstrap4',
                handleWindowResize: true, 
                header: { 
                    left: 'prevYear,prev,next,nextYear, today', 
                    center: 'title',  
                    right: 'month,agendaWeek,agendaDay,list' 
                },
                events: '/calendar/json/events', #the url with JSON coded events
                editable: true, 
                navLinks: true, 
                nowIndicator: true, 
                weekNumbers: true, 
                eventLimit: true, 
                selectable: true, 
                displayEventTime: true,
                dayClick:function(date,jsevent,view){
                    $("#ModalAddEvents").modal(); // calls the modal to add events with ‘EventForm’
                },
                eventClick:function(calEvent,jsEvent,view){
                    // here is where I need help, how to edit an existing event and save to my model?
                },
            });
        });
    </script>
</div>
</div>
<div>
<!--modal(Add events to the calendar)-->
    <div class="modal fade" id="ModalAddEvents" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Add a new event!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <br/>
            <div></div>
            <button type="button submit" class="btn btn-success" href="{{ 'events_calendar' }}">Save</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </form>
    </div>
    <div class="modal-footer">
    </div>
    </div>
</div>
</div>
</div>
{% endblock content %}

我尝试了所有我想做的事情,但是没有任何答案,在两周不满意的努力之后,我决定在此处发布一个问题,请向我展示方法!并对这个新手保持温柔,请让我知道我是否对这个问题感到困惑。

谢谢。

0 个答案:

没有答案