<
html
>
<
head
>
<
title
>jQuery CLNDR Plugin</
title
>
<
meta
charset
=
"UTF-8"
/>
<
link
rel
=
"stylesheet"
href
=
"clndr.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
"clndr.js"
></
script
>
<
style
>
body {
font-family: Arial;
text-align: center;
}
div#eventInfoID {
margin-top: 5px;
width: 90%;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: content-box;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green;"
>
GeeksForGeeks
</
h1
>
<
b
>jQuery CLNDR Plugin</
b
>
<
div
class
=
"container"
>
<
div
class
=
"cal1"
></
div
>
<
div
id
=
"eventInfoID"
><
b
></
b
></
div
>
</
div
>
<
script
>
let calendar = {};
$(document).ready(function () {
let eventsList = [
{
date: "2020-05-08",
title: "Open lecture on web",
},
{
date: "2020-05-20",
title: "Another Long Event",
},
{
title: "Birthday Party",
date: "2020-05-27",
},
];
calendar.clndr = $(".cal1").clndr({
// Displays days of the week in given format
daysOfTheWeek: ["Sun", "Mon", "Tue",
"Wed", "Thu", "Fri", "Sat"],
events: eventsList,
clickEvents: {
click: function (target) {
$(".day .day-contents").css("color", "#000");
// Displays the event date in red, once clicked
$(".calendar-day-" + target["date"]["_i"] + " .day-contents")
.css("color", "#FF0000");
let titleInfo = target.events[0].title;
$("#eventInfoID").text(titleInfo);
},
},
showAdjacentMonths: true,
adjacentDaysChangeMonth: false,
});
});
</
script
>
</
body
>
</
html
>