Fullcalendar：如何添加时间（小时，分钟）来创建事件表单？

Question

然后，我尝试从“每日”或“星期”视图创建新事件，并在单击相应字段后自动添加开始时间。但是，当设置事件的结束时间时，只有日期可用，而没有时间。

如何在弹出窗口中添加选择时间的功能？

我当前的全日历脚本设置：

<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            dayClick: function(date, jsEvent, view) {
              var clickDate = date.format();
              $('#start-date').val(clickDate);
              $('#dialog').dialog('open');
            },
            theme: true,
        header: {
        left:   'title',
        center: '',
        right:  'today prev,next agendaDay,agendaWeek, month'
    },

    defaultView: 'agendaWeek',
    //date number are clickable
    navLinks: true,
    //minute delta display separate
    slotDuration: '00:15:00',
    eventLimit: true,

            eventSources: [

    // your event source
    {
      events: [
                {% for i in events %}
                {
                    title: "{{ i.event_name}}",
                    start: '{{ i.start_date|date:"Y-m-d" }}',
                    end: '{{ i.end_date|date:"Y-m-d" }}',

                },
                {% endfor %}

            ],
      color: 'red',     // an option!
      textColor: 'white' // an option!
    }

    // any other event sources...

  ]
        });
        //add new event
$( "#dialog" ).dialog({
    autoOpen: false,
    show: {
        effect: 'drop',
        duration: 500
    },
    hide: {
        effect: 'clip',
        duration: 500
    }
});
    $('.datepicker').datepicker({
        dateFormat: "yy.mm.dd"
    });
    });

</script>

还有我的html表单（我将Django框架用于后端）

<div class=" container clearfix mt- mb-5">
    <div id='calendar'></div>
    <div id="dialog" title="Basic dialog">
         <form method="POST">
              {% csrf_token %}
          <div class="form-group">
            <label for="event_name">Event name</label>
              {%  render_field  event_form.event_name class="form-control" id='event_name' %}
            <!-- <input type="text" class="form-control" id="event_name" > -->
          </div>
             <div class="form-group">
             <label for="start-date">Event start</label>
              {%  render_field  event_form.start_date class="form-control datepicker" id='start-date' %}

             <!--<input type="text" class="form-control datepicker" id="start-date"> -->
          </div>
             <div class="form-group">
            <label for="end-date">Event end</label>
                 {%  render_field  event_form.end_date class="form-control datepicker" id='end-date' %}
             <!--<input type="text" class="form-control datepicker" id="end-date"> -->
          </div>
          <button type="submit" class="btn btn-primary">Create event</button>
        </form>
    </div>