full-calendar basic example

by arpitvicky

HTML

<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
<div id="employee">
  Name : <input id="name" type=text value="Mr Akqa" />
</div>
<div id='calendar'></div>
<div class='legends'>
  <div class='legend bank-holiday'>
    <span class='leave-count'>10</span>
    <input id="bankholiday" name="leaves" type="radio" class="with-font" value="Bank Holiday" disabled />
    <label for="bankholiday">Bank Holiday</label>
  </div>

  <div class='legend floating-holiday'>
    <span class='leave-count'>2</span>
    <input id="floatingholiday" name="leaves" type="radio" class="with-font" value="Floating Holiday" />
    <label for="floatingholiday">Floating Holiday</label>

  </div>
  <div class='legend sick-leave'>
    <span class='leave-count'>10</span>
    <input id="sickLeave" name="leaves" type="radio" class="with-font" value="Sick Leave" />
    <label for="sickLeave">Sick Leave</label>
  </div>
  <div class='legend planned-leave'>
    <span class='leave-count'>25</span>
    <input id="plannedLeave" name="leaves" type="radio" class="with-font" value="Planned Leave" />
    <label for="plannedLeave"> Planned Leave</label>
  </div>
</div>
<button id="getAll">
 Get All Dates
</button>
<button id="reset">
 Reset Calendar
</button>

CSS

.sick-leave {
  background-color: #9e2c2c;
}

.planned-leave {
  background-color: #208820;
}

.bank-holiday {
  background-color: #6d6dc3;
  word-wrap: break-word
}

.floating-holiday {
  background-color: #826f6f;
}

.legends {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  font-family: monospace;
}

.legend {
  padding: 8px;
  color: white;
  border-radius: 10px;
  position: relative;
  height: 35px;
}

.leave-count {
  position: absolute;
  bottom: 2px;
  padding: 2px;
  right: 40%;
  border-radius: 50%;
  border: 1px solid white;
  transition: all 5s ease-in;
}

.legends::hover {
  cursor: pointer;
}

.fc-day-grid-event>.fc-content {
  white-space: normal;
  letter-spacing: .75px;
  font-family: monospace
}

input[type=radio].with-font {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

input[type=radio].with-font~label:before {
  font-family: FontAwesome;
  display: inline-block;
  content: "\f1db";
  letter-spacing: 10px;
  font-size: 1.2em;
  color: #e2dab27a;
  width: 1.4em;
}

input[type=radio].with-font:checked~label:before {
  content: "\f00c";
  font-size: 1.2em;
  color: white;
  letter-spacing: 5px;
}

.removebtn {
  color: black;
  position: absolute;
  top: 0;
  right: 0;
  width: 13px;
  height: 13px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  background-color: #FFF
}

JavaScript

var leaveObj = {
  plannned: 25,
  sick: 10,
  floating: 2
}

function leavePlanner() {
  this.planned = 25;
  this.sick = 10;
  this.floating = 2;
  this.others = 50; // special leaves 
  applyLeaves = (n = 0, type = 'others') => {
    if (this[type] >= n) {
      this[type] = this[type] - n;
      return true;
    }
    return false;
  };
  undoLeave = (days = 1, type = 'others') => {
   console.log(type + '---' + days);
    this[type] = this[type] + days;
  };
  fetchLeaves = () => ({
    'planned': this.planned,
    'sick': this.sick,
    'floating': this.floating
  });
  return {
    applyLeaves,
    fetchLeaves,
    undoLeave
  }
}

var leaveObj = new leavePlanner();



function init() {

  $("#getAll").on('click', getAllDates);
  $("#reset").on('click', resetCalendar);

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,week'
    },
    selectOverlap: function(event) {
      return !event.block;
    },
    weekNumbers: true,
    selectable: true,
    unselectAuto: false,
    select: function(start, end, jsEvent, view) {
      // weekend check logic     
      var checkDay1 = moment(start).day();
      var checkDay2 = moment(end).day();
      alert(checkDay1);
      alert(checkDay2);
      var days = getDaysDiff(start, end);
      if (checkDay1 == 6 || checkDay2 == 6 || checkDay1 == 0 || checkDay2 == 0) {
        alert('weekend selection not allowed !');
        return false;
      }
      var holidayType = getHolidayType();
      var validLeave = 0;
      switch (holidayType) {
        case 'Planned Leave':
          validLeave = leaveObj.applyLeaves(days, 'planned');
          break;
        case 'Sick Leave':
          validLeave = leaveObj.applyLeaves(days, 'sick');
          break;
        case 'Floating Holiday':
          validLeave = leaveObj.applyLeaves(days, 'floating');
          break;
        default:
          validLeave = leaveObj.applyLeaves(days, 'others');
         ...