title: Using full calendar in django admin; Saving the external dragged item to a model
body: <p>i have set up fullcalendar inside my admin, so i can drag timeslot on the calendar to select which date/timeslots are available for my clients to book, the calendar work perfectly, the drag items are fine, but when i put them in the calendar, it doesnt save to my model and to database.</p>
  
  <p>here is the code.</p>
  
  <p>model:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;script&gt;
      $(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();
              //  }
              //}
          });
  
      });
  &lt;/script&gt;
  
  &lt;style&gt;
      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;
      }
  &lt;/style&gt;
  {% endblock %}
  
  &lt;div class="container"&gt;
      &lt;div class="row calendar-row"&gt;
          &lt;div class="col-sm-10"&gt;
              &lt;div id='calendar-container'&gt;
                  &lt;div id='calendar' class="fc fc-bootstrap4 fc-ltr"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2"&gt;
              &lt;div id='external-events'&gt;
                  &lt;p&gt;
                      &lt;strong&gt;Draggable Events&lt;/strong&gt;
                  &lt;/p&gt;
                  &lt;div class="row style='z-index : 1;'"&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;div class='fc-event' data-event='1' time = '08:30' data-duration='00:30'&gt;08:30 – 09:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '09:00' data-duration='00:30'&gt;09:00 – 09:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '09:30' data-duration='00:30'&gt;09:30 – 10:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '10:00' data-duration='00:30'&gt;10:00 – 10:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '10:30' data-duration='00:30'&gt;10:30 – 11:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '11:00' data-duration='00:30'&gt;11:00 – 11:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '11:30' data-duration='00:30'&gt;11:30 – 12:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '12:00' data-duration='00:30'&gt;12:00 – 12:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '12:30' data-duration='00:30'&gt;12:30 – 13:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '13:00' data-duration='00:30'&gt;13:00 – 13:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '13:30' data-duration='00:30'&gt;13:30 – 14:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '14:00' data-duration='00:30'&gt;14:00 – 14:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '14:30' data-duration='00:30'&gt;14:30 – 15:00&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;div class='fc-event' data-event='1' time = '15:00' data-duration='00:30'&gt;15:00 – 15:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '15:30' data-duration='00:30'&gt;15:30 – 16:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '16:00' data-duration='00:30'&gt;16:00 – 16:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '16:30' data-duration='00:30'&gt;16:30 – 17:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '17:00' data-duration='00:30'&gt;17:00 – 17:3&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '17:30' data-duration='00:30'&gt;17:30 – 18:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '18:00' data-duration='00:30'&gt;18:00 – 18:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '18:30' data-duration='00:30'&gt;18:30 – 19:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '19:00' data-duration='00:30'&gt;19:00 – 19:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '19:30' data-duration='00:30'&gt;19:30 – 20:00&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '20:00' data-duration='00:30'&gt;20:00 – 20:30&lt;/div&gt;
                          &lt;div class='fc-event' data-event='1' time = '20:30' data-duration='00:30'&gt;20:30 – 21:00&lt;/div&gt;
  
                      &lt;/div&gt;
  </code></pre>
  
  <p>so i want to drag and drop a time on a date, and it to save to the  model i read the fullcalendar docs about the json and things like that but i dont know how to do it, is there a simple way to just do it trought the model and db or maybe using serialize as json?</p>
  
  <p>ej. i drag the timeslot 12:00 - 12:30 on the 01/septembre/2018, then in the db+admin, i get a new object event_name/2018-09-01T05:12:00:00/2018-09-01T05:12:30:00/null/null/null (as the 3 last field will be modified by hand)</p>