Html5 Calendar

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

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxCalendar'></div>

CSS

.jqx-calendar-cell-restrictedDate {
    background-color: yellowgreen;
}

JavaScript

var businessMeetingSet = new Date();
businessMeetingSet.setHours(0,0,0);
businessMeetingSet.setDate(7);

var data = {
    meeting: {
    	date: '2015/11/27',
        time: '15:35'
    }, 
    match: {
    	date: '2015/11/26',
        time: '17:00'
    }, 
    report: {
    	date: '2015/11/01',
        time: '10:15'
    },
    businessMeeting: {
		date: businessMeetingSet,
        time: '10:00'
	}
};

var restrictedDates = new Array();

for	(var prop in data) {
    var takeDate = new Date(data[prop].date);
    restrictedDates.push(takeDate);
};

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