jQuery proporciona un complemento CLNDR de calendarioutiliza plantillas HTML que se utilizan principalmente en el sistema de gestión de eventos de un solo día o de varios días. Se utiliza para designar fechas de varios eventos en el formato de calendario.
Debe descargar los archivos necesarios en la carpeta de trabajo para que el programador pueda incluirlos en la sección principal de la página de estructura HTML como se implementa en los siguientes programas.
Nota: Incluya las bibliotecas «underscore.js» y «moment.js» en la sección principal, antes de «clndr.js», ya que el complemento CLNDR se apoya en estas bibliotecas. Enlace de descarga para el complemento CLNDR .
Ejemplo 1: El siguiente ejemplo demuestra el uso básico del complemento CLNDR que muestra el mes actual en formato de calendario. Las opciones como «showAdjacentMonths» y «adjacentDaysChangeMonth» están configuradas como verdaderas para un recorrido rápido y fácil de los meses anteriores y siguientes.
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Calendar Plugin</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="clndr.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="clndr.js"></script>
<style>
body {
font-family: Arial;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<b>jQuery CLNDR Plugin</b>
<div class="container">
<div class="cal1"></div>
</div>
<script>
var calendar = {};
$(document).ready(function () {
calendar.clndr = $(".cal1").clndr({
// Able to display adjacent months
showAdjacentMonths: true,
// Visible adjacent days will show
// corresponding month on click
adjacentDaysChangeMonth: true,
});
// Going forward monthwise
calendar.forward();
// Going back to previous month
calendar.back();
});
</script>
</body>
</html>
Producción :
Ejemplo 2: El siguiente ejemplo demuestra el paso de eventos para la visualización de información utilizando el complemento CLNDR . En el código jQuery, la lista de eventos se pasa al evento de clic CLNDR en forma de array. Muestra la fecha en color «rojo» y el título del evento en la parte inferior, una vez que el usuario hace clic en la fecha del evento. Los días de la semana también se establecen en un formato particular. El programador puede establecer otras opciones según los requisitos de la aplicación.
html
<html>
<head>
<title>jQuery CLNDR Plugin</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="clndr.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</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>
var calendar = {};
$(document).ready(function () {
var 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");
var titleInfo = target.events[0].title;
$("#eventInfoID").text(titleInfo);
},
},
showAdjacentMonths: true,
adjacentDaysChangeMonth: false,
});
});
</script>
</body>
</html>
Salida: el complemento CLNDR también puede manejar eventos de varios días de manera similar a los eventos de un solo día al acceder a la fecha de inicio y finalización de su evento en el objeto de array.
Ejemplo 3: El siguiente ejemplo muestra el complemento CLNDR con algunas restricciones, como elegir fechas dentro de un rango particular en el calendario. Ayuda a manejar muchas validaciones de usuarios y fechas en aplicaciones web.
html
<!DOCTYPE html>
<html>
<head>
<title>jQuery CLNDR plugin</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="clndr.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="clndr.js"></script>
<style>
body {
font-family: Arial;
}
.msg-row {
padding: 5px;
}
.container {
width: 650px;
}
#constraintInfoID {
margin-top: 5px;
margin-left: 5px;
width: 600px;
text-align: center;
font-weight: bold;
padding: 10px 10px;
box-sizing: content-box;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<b>jQuery CLNDR Plugin</b>
<div class="container">
<div id="calendarID" class="cal1"></div>
<div id="constraintInfoID"></div>
</div>
<script>
var calendar = {};
$(document).ready(function () {
calendar.clndr = $("#calendarID").clndr({
constraints: {
startDate: "2020-05-06",
endDate: "2020-05-16",
},
clickEvents: {
click: function (target) {
if (!$(target.element).hasClass("inactive")) {
var msg = "Valid date within the constraints!";
$("#constraintInfoID")
.append("<div class='msg-row'
style='background-color:green'>"
+ msg + "</div>");
} else {
var msg = "Date chosen is outside the constraint range";
$("#constraintInfoID")
.append("<div class='msg-row'
style='background-color:red'>"
+ msg + "</div>");
}
},
},
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA