JavaScript Calendar

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

HTML

<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>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.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 dateArray = [];
    var specialNum = 1;
    var $InvisibleDateTimeInput = $('#InvisibleDateTimeInput');
    var $datePart = $('.datePart');
    var $body = $('.body');
    var $clone = $InvisibleDateTimeInput.clone();
    $clone
        .removeAttr('id')
        .removeClass('hidden')
        .jqxDateTimeInput({
            width: '250px',
            height: '25px',
            theme: 'energyblue',
            selectionMode: 'range',
            allowNullDate: true
        })
        $clone.on('close', function (event) { 
		var range = $clone.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);
        console.log(date);
        date.setDate(date.getDate() + 1);
        
        //dateArray.push(date);
    }
    //specialNum += 1;
    
    $clone.jqxCalendar('render');
});
$clone.on('open', function (event) {
	 $('#jqxCalendar').jqxCalendar('specialDates', []);
}).appendTo($datePart);
    $("input", $clone).val('');
    $('.body').append($datePart);
}
$('#new').on('click', CreateNewInstance);
$("#jqxCalendar").jqxCalendar({
    theme: 'energyblue',
    width: '200px',
    height: '200px'
});