Fullcalendar通过使用引导模态单击来添加新事件

Question

有什么方法可以模仿Google日历功能，例如通过单击每周和每日视图来添加新事件？

我尝试查看其他示例，但仍然遇到困难。一个jsfiddle的例子会很棒。

Answer 1

You can use this code example:

$(document).ready(function() {
  var calendar = $('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  editable: true,
    selectable: true,
  //header and other values
  select: function(start, end, allDay) {
      endtime = $.fullCalendar.formatDate(end,'h:mm tt');
      starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
      var mywhen = starttime + ' - ' + endtime;
      $('#createEventModal #apptStartTime').val(start);
      $('#createEventModal #apptEndTime').val(end);
      $('#createEventModal #apptAllDay').val(allDay);
      $('#createEventModal #when').text(mywhen);
      $('#createEventModal').modal('show');
   }
});

$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
  e.preventDefault();

  doSubmit();
});

function doSubmit(){
$("#createEventModal").modal('hide');
  console.log($('#apptStartTime').val());
  console.log($('#apptEndTime').val());
  console.log($('#apptAllDay').val());
  alert("form submitted");

  $("#calendar").fullCalendar('renderEvent',
    {
        title: $('#patientName').val(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        allDay: ($('#apptAllDay').val() == "true"),
    },
    true);
 }
});

Result: http://jsfiddle.net/cmedina/AzmJv/2074/