JavaScript Calendar

Set the forwardText property of the jqxCalendar. Author: http://jqwidgets.com

by txhi

HTML

<script src="http:\\jqwidgets.com\jquery-widgets-demo\jqwidgets\globalization/globalize.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div style="margin: 10px;" id='jqxDateTimeInput'></div>
<div style="margin: 10px;" id='jqxCalendar'></div>

CSS

.special1 {
  background-color: #bd5;
}

/* .special2 {
  background-color: #5db;
} */

JavaScript

$("#jqxCalendar").jqxCalendar({
    theme: 'energyblue',
    width: '200px',
    height: '200px'
});

$("#jqxDateTimeInput").jqxDateTimeInput({
    width: '250px',
    height: '25px',
    theme: 'energyblue',
    selectionMode: 'range',
    allowNullDate: true    
});

$("#jqxDateTimeInput").val(null);
var dateArray = [];
var specialNum = 1;
$('#jqxDateTimeInput').on('close', function (event) { 
		var range = $("#jqxDateTimeInput").jqxDateTimeInput('getRange');
    var from = range.from;
    var to = range.to;
    var date = from;    
    while (date < to)
    {
        $("#jqxCalendar").jqxCalendar('addSpecialDate', date, 'special' + specialNum, '');
        date = new Date(date);
        date.setDate(date.getDate() + 1);
        
        //dateArray.push(date);
    }
    //specialNum += 1;
    
    $("#jqxCalendar").jqxCalendar('render');
});

$('#jqxDateTimeInput').on('open', function (event) {
    $('#jqxCalendar').jqxCalendar('specialDates', []);
});