Question

我有一个日历。我想在单击日期列时向其添加事件。当我单击日期列时，我打开一个模态并使用它来创建标题和描述等字段。但我只能在一整天的活动中这样做。我想从模态中选择事件的时间。我尝试了以下内容。但它不起作用。

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">New Calendar Entry</h4>
      </div>
      <div class="modal-body">
        <div id="testmodal" style="padding: 5px 20px;">
          <form id="antoform" class="form-horizontal calender" role="form">
            <div class="form-group">
              <label class="col-sm-3 control-label">Title</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="title" name="title">
              </div>
            </div>
            <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">Description</label>
              <div class="col-sm-9">
                <textarea class="form-control" style="height:55px;" id="descr" name="descr"></textarea>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default antoclose" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary antosubmit">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript如下： Timepicker：

       <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>

FullCalendar

 <script>
  $(window).load(function() {
    var date = new Date(),
        d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear(),
        started,
        categoryClass;

    var calendar = $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      selectable: true,
      selectHelper: true,
      select: function(start, end, allDay) {
        $('#fc_create').click();

        started = start;
        ended = end;

        $(".antosubmit").on("click", function() {
          var title = $("#title").val();
          if (end) {
            ended = end;
          }

          categoryClass = $("#event_type").val();

          if (title) {
            calendar.fullCalendar('renderEvent', {
                title: title,
                start: started,
                end: end
              },
              true // make the event "stick"
            );
          }

          $('#title').val('');

          calendar.fullCalendar('unselect');

          $('.antoclose').click();

          return false;
        });
      },
      eventClick: function(calEvent, jsEvent, view) {
        $('#fc_edit').click();
        $('#title2').val(calEvent.title);

        categoryClass = $("#event_type").val();

        $(".antosubmit2").on("click", function() {
          calEvent.title = $("#title2").val();

          calendar.fullCalendar('updateEvent', calEvent);
          $('.antoclose2').click();
        });

        calendar.fullCalendar('unselect');
      },
      editable: true,

      events: [{
        title: 'Timed Event',
        start:  '2016-08-01T14:30:00',
        end: '2016-08-01T16:00:00',
        allDay: false
      }, {
        title: 'Long Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)
      }, {
        title: 'Meeting',
        start: new Date(y, m, d, 10, 30),
        allDay: false
      }, {
        title: 'Lunch',
        start: new Date(y, m, d + 14, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
      }, {
        title: 'Birthday Party',
        start: new Date(y, m, d + 1, 19, 0),
        end: new Date(y, m, d + 1, 22, 30),
        allDay: false
      }, {
        title: 'Click for Google',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        url: 'http://google.com/'
      }]
    });
  });
</script>
<!-- /FullCalendar -->

如何在模态中添加timepicker

0 个答案: