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

Question

我已经在我的管理员中设置了完整的日历，所以我可以将日历上的时间段拖到 select 我的客户可以预订 date/timeslots，日历工作完美，拖动项目很好，但是当我将它们放入日历时，它不会保存到我的模型和数据库中。

这是代码。

型号：

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 和类似内容的完整日历文档，但我不知道该怎么做，有没有一种简单的方法可以通过模型和数据库或者使用序列化作为 json?

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

Answer 1

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

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

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

Using full calendar in django admin; Saving the external dragged item to a model

django

django-models

django-admin

fullcalendar-3