在django admin中使用完整日历;将外部拖动的项目保存到模型

Posted 2021-04-10

我在我的管理员里面设置了fullcalendar，所以我可以在日历上拖动时间段来选择哪些日期/时间段可供我的客户预订，日历工作完美，拖动项目很好，但当我把它们放在日历中时，它不会保存到我的模型和数据库。

这是代码。

模型：

class Event(models.Model):
    event_name = models.CharField(max_length=255,null=True,blank=True)
    start = models.DateTimeField(null=True,blank=True)
    end = models.DateTimeField(null=True,blank=True)
    available = models.BooleanField(default=True)
    patient_name = models.CharField(max_length=60, null=True, blank=True)
    phone_number = PhoneNumberField(blank=True,null=True)

    def __unicode__(self):
        return self.event_name

html

<script>
    $(function () {

        // initialize the external events
        // -----------------------------------------------------------------

        $('#external-events .fc-event').each(function () {

            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true, // will cause the event to go back to its
                revertDuration: 0 //  original position after the drag
            });

        });

        // initialize the calendar
        // -----------------------------------------------------------------
        $('#calendar').fullCalendar({
            eventDrop: function (event, dayDelta, minuteDelta) {
                saveMyData(event);
            },
            eventLimit: true, // for all non-agenda views
                views: {
                    agenda: {
                        eventLimit: 5 // adjust to 5 only for agendaWeek/agendaDay
                    }
                },
            buttonIcons: {
                prev: 'fa-chevron-left',
                next: 'fa-chevron-right',
            },
            themeSystem: 'bootstrap4',
            header: {
                left: false,
                center: 'title',
                right: 'prev,next today',
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            //drop: function () {
                // is the "remove after drop" checkbox checked?
            //  if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
            //      $(this).remove();
            //  }
            //}
        });

    });
</script>

<style>
    html,
    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
    }

    #external-events {
        width: 150px;
        padding: 0 10px;
        border: 1px solid #ccc;
        background: #eee;
    }

    #external-events .fc-event {
        margin: 1em 0;
        cursor: move;
    }

    #calendar {
        max-width: 900px;
        margin: 20px auto;
    }
</style>
{% endblock %}

<div class="container">
    <div class="row calendar-row">
        <div class="col-sm-10">
            <div id='calendar-container'>
                <div id='calendar' class="fc fc-bootstrap4 fc-ltr"></div>
            </div>
        </div>
        <div class="col-sm-2">
            <div id='external-events'>
                <p>
                    <strong>Draggable Events</strong>
                </p>
                <div class="row style='z-index : 1;'">
                    <div class="col-sm-6">
                        <div class='fc-event' data-event='1' time = '08:30' data-duration='00:30'>08:30 – 09:00</div>
                        <div class='fc-event' data-event='1' time = '09:00' data-duration='00:30'>09:00 – 09:30</div>
                        <div class='fc-event' data-event='1' time = '09:30' data-duration='00:30'>09:30 – 10:00</div>
                        <div class='fc-event' data-event='1' time = '10:00' data-duration='00:30'>10:00 – 10:30</div>
                        <div class='fc-event' data-event='1' time = '10:30' data-duration='00:30'>10:30 – 11:00</div>
                        <div class='fc-event' data-event='1' time = '11:00' data-duration='00:30'>11:00 – 11:30</div>
                        <div class='fc-event' data-event='1' time = '11:30' data-duration='00:30'>11:30 – 12:00</div>
                        <div class='fc-event' data-event='1' time = '12:00' data-duration='00:30'>12:00 – 12:30</div>
                        <div class='fc-event' data-event='1' time = '12:30' data-duration='00:30'>12:30 – 13:00</div>
                        <div class='fc-event' data-event='1' time = '13:00' data-duration='00:30'>13:00 – 13:30</div>
                        <div class='fc-event' data-event='1' time = '13:30' data-duration='00:30'>13:30 – 14:00</div>
                        <div class='fc-event' data-event='1' time = '14:00' data-duration='00:30'>14:00 – 14:30</div>
                        <div class='fc-event' data-event='1' time = '14:30' data-duration='00:30'>14:30 – 15:00</div>
                    </div>
                    <div class="col-sm-6">
                        <div class='fc-event' data-event='1' time = '15:00' data-duration='00:30'>15:00 – 15:30</div>
                        <div class='fc-event' data-event='1' time = '15:30' data-duration='00:30'>15:30 – 16:00</div>
                        <div class='fc-event' data-event='1' time = '16:00' data-duration='00:30'>16:00 – 16:30</div>
                        <div class='fc-event' data-event='1' time = '16:30' data-duration='00:30'>16:30 – 17:00</div>
                        <div class='fc-event' data-event='1' time = '17:00' data-duration='00:30'>17:00 – 17:3</div>
                        <div class='fc-event' data-event='1' time = '17:30' data-duration='00:30'>17:30 – 18:00</div>
                        <div class='fc-event' data-event='1' time = '18:00' data-duration='00:30'>18:00 – 18:30</div>
                        <div class='fc-event' data-event='1' time = '18:30' data-duration='00:30'>18:30 – 19:00</div>
                        <div class='fc-event' data-event='1' time = '19:00' data-duration='00:30'>19:00 – 19:30</div>
                        <div class='fc-event' data-event='1' time = '19:30' data-duration='00:30'>19:30 – 20:00</div>
                        <div class='fc-event' data-event='1' time = '20:00' data-duration='00:30'>20:00 – 20:30</div>
                        <div class='fc-event' data-event='1' time = '20:30' data-duration='00:30'>20:30 – 21:00</div>

                    </div>

所以我想在一个日期上拖放时间，并保存到模型我读了关于json和类似的事情的fullcalendar文档，但我不知道该怎么做，是否有一个简单的方法来做到这一点使用模型和数据库或者使用序列化作为json？

EJ。我在01 / septembre / 2018上拖动时间段12:00 - 12:30，然后在db + admin中，我得到一个新对象event_name / 2018-09-01T05：12：00：00 / 2018-09-01T05 ：12：30：00 / null / null / null（因为最后3个字段将手动修改）

答案

根据您分享的代码和评论中的讨论，似乎问题存在于以下几行：

eventDrop: function (event, dayDelta, minuteDelta) {
    saveMyData(event);
},

saveMyData没有履行职责。一种可能的实现是使用Jquery发出Ajax请求（考虑到您提供的代码，似乎您正在使用它）。所以eventDrop函数看起来像这样：

eventDrop: function (event, dayDelta, minuteDelta) {
    // Gather the required data event, dayDelta, minuteDelta, or other
    data = {
        // and put it here
        ...,
        "csrfmiddlewaretoken": "<something" // You will also need to gather the CSRF token 
    }

    $.post( "/admin/<your_app>/event/add", data, function( data ) {
        // Your code when the request succeeds 
    }).fail(function() {
        // Your code when something fails
    });
},

您可以阅读有关jquery ajax请求here的更多信息