KB - Wijmo 5 - Only Dates In Current Month

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Calendar
  </h1>

  <p>
    The Calendar control displays a one-month calendar and allows users
    to select a date.</p>
  <p>
    Use the <b>value</b> property to get or set the currently selected date.
    Use the <b>min</b> and <b>max</b> properties to restrict the range of
    dates that the user can select.
    Use the <b>selectionMode</b> property to determine whether users should
    be allowed to select days, months, or no values at all.</p>
  <input id="theCalendar">
  <div>
    The current date is <b><span id="theCalendarOutput"></span></b>.
  </div>
</div>

CSS

.wj-calendar {
  max-width: 21em;
}

body {
  margin-bottom: 36px;
}

JavaScript

onload = function() {

	// This will get all of our elements that are tagged as 'button'
	var monthButtons = document.getElementsByTagName("button");
  
  // A list of the number of days in each month
  // Need to implement something to check if its a leap year
  var numberOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  var currentYear = 2020;

	// the calendar
  var theCalendar = new wijmo.input.Calendar('#theCalendar', {
  	valueChanged: function(s, e) {
    	showCurrentDate();
    },
    min: new Date(2020, 1, 1),
    max: new Date(2020, 1, 29)
  });
  
  // Used to determine what happens when the back button is pressed
  monthButtons[0].onclick = function(){
  	var previousMonth = getCurrentMonth() - 1;
    // Checks to see if we've reached the beginning of the current year
    if(previousMonth < 0){
    	currentYear = currentYear - 1;
      previousMonth = 11;
    }
  	theCalendar.min = new Date(currentYear, previousMonth, 1);
    theCalendar.max = new Date(currentYear, previousMonth, numberOfDays[previousMonth]);
    theCalendar.displayMonth = theCalendar.min;
  }
  
  // Used to determine what happens when the forward button is pressed
  monthButtons[2].onclick = function(){
  	var nextMonth = getCurrentMonth() + 1;
    // Checks to see if we've reached the end of the current year
    if(nextMonth > 11){
    	currentYear = currentYear + 1;
      nextMonth = 0;
    }
  	theCalendar.min = new Date(currentYear, nextMonth, 1);
    theCalendar.max = new Date(currentYear, nextMonth, numberOfDays[nextMonth]);
    theCalendar.displayMonth = theCalendar.min;
  }
  
  // Returns the current month
  // You have to use the 'min' property, because 'value' won't work because it will return the month of the currently selected date. This causes an error if the user doesn't change the selected date because then you won't be able to move forward/backward through the calendar
  function getCurrentMonth(){
  	return theCalendar.min.getMonth();
  }
  
	// show the...