Bootstrap and Fullcalendar

by Glynne Turner

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css">
<script src="//cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js"></script>
<script src="//cdn.jsdelivr.net/fullcalendar/1.5.4/gcal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-resize/1.1/jquery.ba-resize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<div class="container" style="padding-top:50px;">
  <div class="row">
    <div class="col-xs-12">
      <div id="calendar"></div>
    </div>
  </div>
</div>

<div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel1">Create Appointment</h3>
  </div>
  <div...

JavaScript

$(document).ready(function() {

  var calendar = $('#calendar').fullCalendar({
    defaultView: 'month',
    editable: true,
    selectable: true,
    editable: true,
    //header and other values
    header: {
      left: 'prev,next ',
      center: 'title', 
    },

    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);
      
      // Reset values for new modal
      $('#createEventModal #event_name').val('Course');
      $('#createEventModal #from').val('');
      $('#createEventModal #to').val('');
      
      // Prefill modal values based on selection
      $('#createEventModal #when').text(mywhen);
      $('#createEventModal #from').val(start);
      $('#createEventModal #to').val(end);
	
  
  	$('#from').datetimepicker();
  	$('#to').datetimepicker();

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

    $("#calendar").fullCalendar('renderEvent', {
        title: $('#event_name').val() + " | " + $('#location option:selected').text(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        location: $('#location').val(),
        allDay: ($('#apptAllDay').val() == "true")
      },
      true);
      
      var store = JSON.stringify($("#calendar").fullCalendar("clientEvents").map(function(e) {
        return {
         ...