Fullcalendar: Events are not rendered correctly

问题

Hi peers,

My code is not rendered correctly. Previously, I got it working correctly but now it is not alive. I donot know how. Please tell me where am going wrong.

The HTML modal Modal Code.

<div class="form-group">
  <input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
  </div>
  <div class="form-group">
  <textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
       </div>
      <div class="row">
      <div class="control-label col-sm-3">
    <label for="start_date">Start Date</label>
    </div>
    <div class="col-sm-7">
    <input type="text" class="form-control" id="event_start_date" placeholder="Start Date">
    </div>

  </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="save_event">Save changes</button>
       </div>

The above is the code for the display of the modal form which is available to add an event. The following is the script:

 <script>
$(document).ready(function() {

$('#calendar').fullCalendar({ 
  customButtons: {
    EventButton: {
        text:'Add Event',
        click:function(event, jsEvent, view){
                   $('#modal_calendar').modal('show');
          }
    }
  },
utc: true, 
header: { 
left: 'prev,next today EventButton', 
center: 'title', 
right: 'month,agendaWeek,agendaDay' 
},   

editable: true, 
droppable: true, 

eventSources: ["calendar/show_events", "calendar/show_holidays"],
eventAfterRender: function(event, element, view) { 
element.append(event.title); 
} 
});

$('#event_start_date').datepicker();
$('#save_event').click(function() {
    $.ajax({
              cache: false,
              type: "POST",
              url:"<?php echo base_url() ?>common/calendar/save_event",
              data :  {'subject' : subject,'body' : body,'start_date' : start_date},
              dataType: 'json',
              success: function(result){
                if (result!=null){
                    }
                    }
                    });
});
        });
</script>
<style>
.event-full { 
color: #fff; 
 vertical-align: middle !important;
text-align: center; 
opacity: 1; 
}
.datepicker
{
    z-index:1151 !important;}

</style>

Now the events are not rendered correctly. What is the error in the previous code. Where am i going wrong?. Sorry for the long code, Thanks In Advance!

来源：https://stackoverflow.com/questions/37540578/fullcalendar-events-are-not-rendered-correctly

标签

ajax

javascript-events

fullcalendar