Dialog box of jQuery UI is visible even if it's event isn't fired

Question

I have this fullcalendar displayed on my web app page:

And when I click on a specific date, I get a pop up form using jQuery UI plugin.

The problem is that the form that should only pop up when I click on a date, is visible after the calendar:

Logically, it should not be visible until it is popped up.

Here is my fullCalendar and jQuery UI scripts:

$('#calendar').fullCalendar({
          dayClick: function(date, allDay, jsEvent, view) {
          //var title = prompt('Event Title:');
          if (allDay) {
            // Clicked on the entire day
            $('#calendar')
                .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
                .fullCalendar('gotoDate',
                    date.getFullYear(), date.getMonth(), date.getDate());
                    console.log($(this).data("date"));
                    $("#app_date").val($(this).data("date"));
                    $('#dialog').dialog({
                      autoOpen: false, 
                      hide: "puff",
                      show : "slide",
                      width: 800,
                      modal: true //,
                    });
                    $( "#dialog" ).dialog( "open" );
                    $("#add_app_btn").click(function()
                    {
//Some Variables used in the if condition
                      if((userTxt != "" && dateTxt != "" && select_old == 0) || (userTxt == "" && dateTxt != "" && select_old != 0))
                      {
                        $.ajax
                        ({
                          url: 'add_appoint.php',
                          type: 'POST',
                          data: {old_patient_id: select_old, patient_name: userTxt, app_date: dateTxt, app_time: timeTxt, app_reason: reasonTxt, dob: dobTxt, phone: phoneTxt, address: addressTxt},
                          dataType: 'text',

                          success:function(res)
                          {
                              alert("Appointment Added");
                              $( "#dialog" ).dialog( "close" );
                          },
                          error:function(res)
                          {
                              console.log(res);
                          }
                        });
                      }
                      }
                    });
                  }
          },

And here is my div that contain the form:

  <div class="box" id="dialog" title="Add New Appointment">
              <form class="form-horizontal" id="add_app_form">
                <table class="table table-striped table-hover" style="width:650px;">
                  <tr><th><label for="patient_name" style="text-align:left;width:150px">Old Patient</label></th>
                    <td><select id="select_old" name="select_old" style="width:185px" class="control-label pull-left">
                      <option value="0">Choose Name</option>
                      <?php foreach($name_array as $na) { ?>
                      <option value="<?php echo $na['id'] ?>"><?php echo $na['patient_name'] ?></option>
                      <?php } ?>
                    </select></td>
                  <th><label for="patient_name" style="text-align:left;width:150px">Or New Patient</label></th>
                    <td><input type="text" id="patient_name" style="text-align:left;width:150px" name="patient_name" placeholder="New Patient Name"></td></tr>
                  <tr><th><label for="app_date" style="text-align:left;width:150px">Date</label></th>
                    <td><input type="date" id="app_date" name="app_date"></td></tr>
                  <tr><th><label for="app_time" style="text-align:left;width:150px">Time</label></th>
                    <td><input type="time" id="app_time" name="app_time" style="text-align:left;width:185px"></td></tr>
                  <tr><th><label for="app_reason" style="text-align:left;width:150px">Reason of Visit</label></th>
                    <td><textarea class="form-control" id="app_reason" name="app_reason" placeholder="Reason"></textarea></td></tr>
                <tr><td colspan="3"><button type="button" id="add_app_btn" class="btn btn-info pull-right">Add Appointment</button></td></tr>
                <table>
            </form>

Answer 1

Set autoOpen to false on load of the page:

$(function() {
    $("#dialog").dialog({ autoOpen: false});
});

Or set the style of dialog to display:none see here for a working example:

<div class="box" id="dialog" title="Add New Appointment" style="display:none">

Answer 2

I think you should do this in the $(document).ready(function(){...})

$('#dialog').dialog({
    autoOpen: false, 
    hide: "puff",
    show : "slide",
    width: 800,
    modal: true //,
});