Bootstrap-Calendar

by David Kyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<div class="container-fluid bg-dark">
  <section aria-role="commands">
    <div class="row h-25 bg-light">
      <div class="bg-secondary h-25 col-12 text-center">
        <h1>Commands</h1>
      </div>
      <div class="bg h-25 m-2 calendar-control">
        <label for="select-year">Year:</label>
        <select name="select-year" id="select-year" class="custom-select"></select>
        <label for="select-month">Month:</label>
        <select name="select-month" id="select-month" class="custom-select">
         <option selected val="">--Select--</option>
        </select>
      </div>
    </div>
  </section>
  <div id="calendar-wrapper" class="auto bg-light">
    <div class="row header bg-secondary" data-header="true">
      <div class="col" data-day-of-week="0">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="1">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="2">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="3">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="4">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="5">
        <span class="week-header"></span>
      </div>
      <div class="col" data-day-of-week="6">
        <span class="week-header"></span>
      </div>
    </div>
    <div class="row body">
      <div class="date col" data-slot="1" data-day-of-week="0" data-toggle="tooltip" data-placement="top">

      </div>
      <div class="date col"...

CSS

.date {
  border: solid 1px #000000;
  min-height: 60px;
}

.day-status-template {
  display: none;
}

.future-date {
  color: #ababab;
  background-color: #dedede;
}

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

JavaScript

var Utils = (function() {
  var self = this;

  self.Calendar = (function() {
    var cal = this;
    var $calendarWrapper = null;
    var $calendarControls = null;
    var configuredYears = [];
    var initialized = false;
    var currentDate = null;
    var loadMonthStatusCallback = null;

    cal.DaysOfWeek = {
      0: "Sunday",
      1: "Monday",
      2: "Tuesday",
      3: "Wednesday",
      4: "Thursday",
      5: "Friday",
      6: "Saturday"
    }

    cal.StatusMessages = {
      0: "Passed",
      1: "No Data",
      2: "Out of Control",
      3: "Failed"
    }

    cal.MonthsOfYear = {
      0: "January",
      1: "February",
      2: "March",
      3: "April",
      4: "May",
      5: "June",
      6: "July",
      7: "August",
      8: "September",
      9: "October",
      10: "November",
      11: "December"
    }

    function populateYears() {
      var selectOptions = [];
      for (let i = 0; i < configuredYears.length; i++) {
        selectOptions.push('<option value="', configuredYears[i], '"', currentDate.getFullYear() == configuredYears[i] ? ' selected' : '', '>', configuredYears[i], '</option>');
      }

      $calendarControls.find("#select-year").html(selectOptions.join(''));
    }

    function populateMonths() {
      var selectOptions = [];
      for (let i = 0; i < 12; i++) {
        selectOptions.push('<option value="', i, '"', currentDate.getMonth() == i ? ' selected' : '', '>', cal.MonthsOfYear[i], '</option>');
      }

      $calendarControls.find("#select-month").html(selectOptions.join(''));
    }

    function bindActions() {
      $calendarControls.find("#select-year").on("change", function(e) {
        currentDate.setDate(1);
        currentDate.setFullYear($(this).val());
        $(document).trigger("updateCalendar", {
          Year: currentDate.getFullYear(),
          Month: currentDate.getMonth()
        });
      });

      $calendarControls.find("#select-month").on("change", function(e) {
       ...