FullCalendar Scheduling Example

Example of multiple views and features of fullcalendar

by Alejandro Lasebnik

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/locale-all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <div class="pane">
  <div>
   Employee Name
  </div>
  <div class="div-emp-container" style="height:38px;">
    <select size="8" class="sel-emp" id="sel-task" style="width: 300px;">
      <option value="1">John Doe</option>
      <option value="2">Cristian Sanderson</option>
      <option value="3">Raul Welsh</option>
      <option value="4">Ema Truman</option>
      <option value="5">Carl Simpson</option>
      <option value="6">Rober Donahue</option>
      <option value="7">Albert Dolin</option>
      <option value="8">Alessandra Mineli</option>
      <option value="9">Sarah Jones</option>
  </select>
  </div>
  
  <div>
   Task
  </div>
  <div style="height:285px;">
    <select size="8" class="sel-task" id="sel-task" style="width: 300px;">
      <option value="1">Washdishing</option>
      <option value="2">Cashier</option>
      <option value="3">Waiter</option>
      <option value="4">Restaurant Office</option>
      <option value="5">Hotel Reception</option>
      <option value="6">Housekeeping</option>
     ...

CSS

.drag-task {
  width:200px;
  padding: 6px;
  //background-color: #3465aa;
  border-radius: 5px;
  color: white;
}

.container {
  display: flex;
  padding: 10px;;
}

.pane {
  flex: 1;
  padding-right: 10px;
  border-right: 1px #333 solid;
}

#scheduler {
  flex: 3;
  padding-left: 10px;
}

.select2-container--default .select2-results>.select2-results__options {
    height: 200px;
    max-height: 200px;
}

.sel-task + .select2 .select2-selection__arrow {
    display: none
}

.select2-search input {
    margin-top: 5px;
    background: url(https://www.emplotime.com/img/select2.png) no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}


.sq {
  width: 14px;
  height: 14px;
  margin: 1px;
  padding-top:2px;
  border: 1px solid rgba(0, 0, 0, .2);
  display: inline-block;
}

.sel-color + .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 11px;
    margin-top: 4px;
}
.sel-color + .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__clear {
    line-height: 18px;
    margin-top: 0;
}

JavaScript

var isAllowToClose = false;

$(".addtask").on('click', function() {
    alert("task added!");
});

$(document).ready(function() {
  $('#scheduler').fullCalendar({
  themeSystem: 'bootstrap3',
  		eventRender: function(event, element, view) {
        var theDate = event.start
        var endDate = event.dowend;
				var startDate = event.dowstart;
        var excludedDate = event.excludedDate;
        var excludedDates = event.excludedDates;
        //console.log(event);
        if (theDate >= endDate) {
                return false;
        }

        if (theDate <= startDate) {
          return false;
        }
         
         var excludedTomorrrow = new Date(excludedDate);
         
        if( theDate > excludedDate && theDate < excludedTomorrrow.setDate(excludedTomorrrow.getDate() + 1) ) {
        	return false;
        }
          
      },
  editable: true,
droppable: true, // this allows things to be dropped onto the calendar
  businessHours: {
    // days of week. an array of zero-based day of week integers (0=Sunday)
    dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday

    start: '09:00', // a start time (09am in this example)
    end: '18:00', // an end time (6pm in this example)
},
scrollTime: '8:00',  //scroll pane initially scrolled down at...
        defaultView: 'agendaWeek',
        locale: 'en-US',
        dragOpacity: 0.4,
        header: {
            left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2017-08-29T16:00:00',
        allDaySlot:false,
        eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html("id:" + event.id + "<br/>" + event.description);
            $('#fullCalModal').modal();
        },
        drop: function( date, jsEvent, ui, resourceId ) {
        //console.log("this", this);
        var evtName = $(this).data('event').title;
    var evtID = $(this).attr('id').toString();
    
        },
...