hasibdesk/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>datepicker demo</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
		<script src="//code.jquery.com/jquery-1.12.4.js"></script>
		<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<style>
			table.ui-datepicker-calendar tbody td.type-1 > a {
				background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom #ffeb80;
				color: #363636;
				border: 1px solid #ffde2e;
			}
			table.ui-datepicker-calendar tbody td.type-2 > a {
				background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom red;
				color: #fff;
				border: 1px solid red;
			}
			table.ui-datepicker-calendar tbody td.type-3 > a {
				background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom green;
				color: #fff;
				border: 1px solid green;
			}
			table.ui-datepicker-calendar tbody td.type-4 > a {
				background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom indigo;
				color: #fff;
				border: 1px solid indigo;
			}
			table.ui-datepicker-calendar tbody td.type-5 > a {
				background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom indianred;
				color: #363636;
				border: 1px solid indianred;
			}
		</style>
	</head>
	<body>
		<div id="datepicker"></div>

		<script>
			function dd_mm_yy(dateStr) {
				const date = new Date(dateStr);
				var day = date.getDate();
				var month = date.getMonth() + 1;
				var year = date.getFullYear();

				day = day < 10 ? '0' + day : day;
				month = month < 10 ? '0' + month : month;
				return day + '-' + month + '-' + year;
			}
			function yy_mm_dd(dateStr) {
				const date = new Date(dateStr);
				var day = date.getDate();
				var month = date.getMonth() + 1;
				var year = date.getFullYear();

				day = day < 10 ? '0' + day : day;
				month = month < 10 ? '0' + month : month;
				return year + '-' + month + '-' + day;
			}
			function mm_dd_yy(dateStr) {
				const date = new Date(dateStr);
				var day = date.getDate();
				var month = date.getMonth() + 1;
				var year = date.getFullYear();

				day = day < 10 ? '0' + day : day;
				month = month < 10 ? '0' + month : month;
				return mm + '-' + dd + '-' + yy;
			}

			var events = [
				{ info: 'Need to complete assignment', date: '2020-05-15T00:00:00', type: 1 },
				{ info: 'Complete your Project', date: '2020-05-20T00:00:00', type: 2 },
				{ info: 'Goto shopping Mall', date: '2020-05-25T00:00:00', type: 3 },
				{ info: 'Attend marrige ceremony', date: '2020-05-30T00:00:00', type: 4 },
				{ info: 'Complete the current task', date: '2020-06-05T00:00:00', type: 5 },
			];

			$('div').datepicker({
				dateFormat: 'yy-mm-dd',
				beforeShowDay: function (date) {
					var result = [true, '', null];
					var matching = events.find((event) => {
						return yy_mm_dd(event.date).valueOf() === yy_mm_dd(date).valueOf();
					});
					// var matching = $.grep(events, function (event) {
					// 	return event.Date.valueOf() === yy_mm_dd(date).valueOf();
					// });
					if (matching) {
						result = [true, dynamicClass(matching.type), null];
					}
					return result;
				},
				onSelect: function (dateText) {
					var selectedDate = new Date(dateText);
					var event = null;
					for (let i = 0; i < events.length; i++) {
						var eventDate = events[i].date;
						if (yy_mm_dd(selectedDate).valueOf() === yy_mm_dd(eventDate).valueOf()) {
							event = events[i];
						}
					}
					if (event) {
						alert(event.info);
					}
				},
			});

			function dynamicClass(type) {
				var className = '';

				switch (type) {
					case 1:
						className = 'type-1';
						break;
					case 2:
						className = 'type-2';
						break;
					case 3:
						className = 'type-3';
						break;
					case 4:
						className = 'type-4';
						break;
					case 5:
						className = 'type-5';
						break;

					default:
						className = '';
						break;
				}

				return className;
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>datepicker demo</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
	<script src="//code.jquery.com/jquery-1.12.4.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<style>
	table.ui-datepicker-calendar tbody td.type-1 > a {
	background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom #ffeb80;
	color: #363636;
	border: 1px solid #ffde2e;
	}
	table.ui-datepicker-calendar tbody td.type-2 > a {
	background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom red;
	color: #fff;
	border: 1px solid red;
	}
	table.ui-datepicker-calendar tbody td.type-3 > a {
	background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom green;
	color: #fff;
	border: 1px solid green;
	}
	table.ui-datepicker-calendar tbody td.type-4 > a {
	background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom indigo;
	color: #fff;
	border: 1px solid indigo;
	}
	table.ui-datepicker-calendar tbody td.type-5 > a {
	background: url('images/ui-bg_inset-hard_55_ffeb80_1x100.png') repeat-x scroll 50% bottom indianred;
	color: #363636;
	border: 1px solid indianred;
	}
	</style>
	</head>
	<body>
	<div id="datepicker"></div>

	<script>
	function dd_mm_yy(dateStr) {
	const date = new Date(dateStr);
	var day = date.getDate();
	var month = date.getMonth() + 1;
	var year = date.getFullYear();

	day = day < 10 ? '0' + day : day;
	month = month < 10 ? '0' + month : month;
	return day + '-' + month + '-' + year;
	}
	function yy_mm_dd(dateStr) {
	const date = new Date(dateStr);
	var day = date.getDate();
	var month = date.getMonth() + 1;
	var year = date.getFullYear();

	day = day < 10 ? '0' + day : day;
	month = month < 10 ? '0' + month : month;
	return year + '-' + month + '-' + day;
	}
	function mm_dd_yy(dateStr) {
	const date = new Date(dateStr);
	var day = date.getDate();
	var month = date.getMonth() + 1;
	var year = date.getFullYear();

	day = day < 10 ? '0' + day : day;
	month = month < 10 ? '0' + month : month;
	return mm + '-' + dd + '-' + yy;
	}

	var events = [
	{ info: 'Need to complete assignment', date: '2020-05-15T00:00:00', type: 1 },
	{ info: 'Complete your Project', date: '2020-05-20T00:00:00', type: 2 },
	{ info: 'Goto shopping Mall', date: '2020-05-25T00:00:00', type: 3 },
	{ info: 'Attend marrige ceremony', date: '2020-05-30T00:00:00', type: 4 },
	{ info: 'Complete the current task', date: '2020-06-05T00:00:00', type: 5 },
	];

	$('div').datepicker({
	dateFormat: 'yy-mm-dd',
	beforeShowDay: function (date) {
	var result = [true, '', null];
	var matching = events.find((event) => {
	return yy_mm_dd(event.date).valueOf() === yy_mm_dd(date).valueOf();
	});
	// var matching = $.grep(events, function (event) {
	// return event.Date.valueOf() === yy_mm_dd(date).valueOf();
	// });
	if (matching) {
	result = [true, dynamicClass(matching.type), null];
	}
	return result;
	},
	onSelect: function (dateText) {
	var selectedDate = new Date(dateText);
	var event = null;
	for (let i = 0; i < events.length; i++) {
	var eventDate = events[i].date;
	if (yy_mm_dd(selectedDate).valueOf() === yy_mm_dd(eventDate).valueOf()) {
	event = events[i];
	}
	}
	if (event) {
	alert(event.info);
	}
	},
	});

	function dynamicClass(type) {
	var className = '';

	switch (type) {
	case 1:
	className = 'type-1';
	break;
	case 2:
	className = 'type-2';
	break;
	case 3:
	className = 'type-3';
	break;
	case 4:
	className = 'type-4';
	break;
	case 5:
	className = 'type-5';
	break;

	default:
	className = '';
	break;
	}

	return className;
	}
	</script>
	</body>
	</html>