JavaScript Calendar

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

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 id="InvisibleDateTimeInput" class=" DateTimeInputPart hidden">
<div style="margin: 10px;" id='jqxDateTimeInput' class="DateTimeInput">
</div>
</div>
<div class="datePart">

</div>

<button id="new">✚</button>
<button id="remove">✂</button>
<div style="margin: 10px;" id='jqxCalendar'></div>

CSS

.hidden{
  display:none;
}
.special1 {
  background-color: #bd5;
}

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

JavaScript

var CreateNewInstance = function()
{
	
		var $InvisibleDateTimeInput = $('#InvisibleDateTimeInput');
    var $datePart = $('.datePart'); 
    var $body = $('.body');
    var $clone = $InvisibleDateTimeInput.clone();
     $clone
      .removeAttr('id')
      .removeClass('hidden')
      .appendTo($datePart);
      $('.body').append($datePart);
}
$('#new').on('click', CreateNewInstance);
$("#jqxCalendar").jqxCalendar({
    theme: 'energyblue',
    width: '200px',
    height: '200px'
});

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

$(".DateTimeInputPart .DateTimeInput").val(null);
var dateArray = [];
var specialNum = 1;
$('.DateTimeInputPart .DateTimeInput').on('close', function (event) { 
		var range = $(".DateTimeInputPart .DateTimeInput").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');
});

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