title: How to make an appointment and save it to database Flask?
body: <p>I am making a small app where the client can make an appointment in a calendar, but I don't know how to save the appointment inside the database then show it to them after by date.</p>
  
  <p><strong>Full Edit:</strong></p>
  
  <p>I've created the calendar with some junk appointments as you can see below:</p>
  
  <p><a href="https://i.stack.imgur.com/zfJ0V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zfJ0V.png" alt="Click to see a full image."></a></p>
  
  <p>I want to save the appointment inside the database, so when any client hits on any date after submitting it, an ajax request will be sent to my views where I can handle the request, here is the <strong>view.py</strong>:</p>
  
  <pre><code>@abonent_panel_route.route('/panel/make/appointment/')
  @abonent_panel_route.route('/panel/make/appointment/', methods=['GET', 'POST'])
  def get_appo():
      # user = User.query.filter_by(id=current_user.id).first_or_404()
  
      import json
      getData = str(request.args.getlist('data'))
      data  = json.loads(getData)
  
      if data :
          print "\n\n\n\n" + str(data['title']) + "\n\n\n\n"
          return jsonify({'success': data})
      else:
          print "\n\n\n\n" + str(len(data)) + "\n\n\n\n"
          return jsonify({'error': 'No data!'})
  </code></pre>
  
  <p>And here is the <code>javascript</code> code:</p>
  
  <pre><code>$(document).ready(function() {
      var initialLocaleCode = 'ru';
      var d = new Date();
      var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
  
          $('#calendar').fullCalendar({
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay,listMonth'
          },
          defaultDate: strDate,
          height: 650,
          locale: initialLocaleCode,
          navLinks: true, // can click day/week names to navigate views
          selectable: true,
          selectHelper: true,
          select: function(start, end) {
              var title = prompt('Event Title:');
              var eventData;
              if (title) {
                  eventData = {
                      title: title,
                      start: start,
                      end: end
                  };
                  $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                  $(this).css({'background-color':'red'});
                  $.ajax({
                      type: 'POST',
                      url: '{{url_for("panel_abonent.get_appo")}}',
                      data: [eventData]
                  })
                  .done(function(data){
  
                      if(data.error){
                          console.log(eventData);
                      }
                      else {
                          console.log(eventData);
                      }
  
                  });
              }
              $('#calendar').fullCalendar('unselect');
          },
  
  
          editable: true,
          eventLimit: true,
          events: [
              {
                  title: 'All Day Event',
                  start: strDate
              },
              {
                  title: 'Long Event',
                  start: '2017-04-18',
                  end: '2017-04-20'
              },
              {
                  id: 999,
                  title: 'Repeating Event',
                  start: '2017-04-20'
              },
              {
                  id: 999,
                  title: 'Repeating Event',
                  start: '2017-04-29'
              },
          ]
      });
  
      $.each($.fullCalendar.locales, function(localeCode) {
          $('#locale-selector').append(
              $('&lt;option/&gt;')
                  .attr('value', localeCode)
                  .prop('selected', localeCode == initialLocaleCode)
                  .text(localeCode)
          );
      });
  
      $('#locale-selector').on('change', function() {
          if (this.value) {
              $('#calendar').fullCalendar('option', 'locale', this.value);
          }
      });
  });
  </code></pre>
  
  <p>Inside the console , I can see a list of data of the picked date, like title, start and end time, here it is:</p>
  
  <pre><code>Object {title: "asfawg", start: r, end: r}
  start : r{
      "_ambigTime":true,
      "_ambigZone":true,
      "_d" : "Thu Apr 06 2017 06:00:00 GMT+0600 (+06)",
      "_fullCalendar":true,
      "_i":"2017/4/19",
      "_isAMomentObject":true,
      "_isUTC":true,
      "_isValid":true,
      "_locale":e,
      "_offset":0,
      "_pf":Object,
      "__proto__":Object,
      "title":"asfawg"
  }
  </code></pre>
  
  <p>In <strong>view.py</strong>, I've converted the dictionary to a list to make it easy to fetch the data from the list, so you have a key and the value, as you've seen above where I print the title <strong>print "\n\n\n\n" + str(data['title']) + "\n\n\n\n"</strong> I should get the value of the title which is <strong>asfawg</strong>, but I got nothing and the request always return <strong>No data.</strong> and the <strong>length</strong> of the list returns <strong>0</strong>.</p>
  
  <p>Please , anybody tells me where is the mistake that I've made.</p>