Created
May 11, 2020 12:31
-
-
Save hasibdesk/85d1bdd322a78f658a222dee96432558 to your computer and use it in GitHub Desktop.
Jquery Calendar with printed event list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment