Question

有没有办法模仿谷歌日历功能，例如点击每周和每日视图添加新活动？

我试着看其他例子，但仍然很难过。一个jsfiddle例子会很棒。

Answer 1

您可以使用以下代码示例：

$(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);
 }
});

结果： http://jsfiddle.net/cmedina/AzmJv/2074/

Fullcalendar通过单击使用bootstrap模式添加新事件

1 个答案: