1

¿Cómo se podría hacer para que me remarcara en rojo el dia actual en Bootstrap Year Calendar?

En la web oficial en los ejemplos he encontrado algo similar pero no consigo hacer que me funcione, os dejo el link:

Ejemplo

Sólo quisiera que me marcara el dia actual, ya que si consigo que me marque eso también podré hacer que me marque días determinados y así poder marcar también los días festivos.

Este es mi código:

<!DOCTYPE html>
<html lang="es">
<?php
if (strpos(getcwd(), 'apen_files') !== false) {
	define('_PS_ADMIN_DIR_', getcwd());
} else {
	define('_PS_ADMIN_DIR_', getcwd().'/includes/apen_files/');
}
require (_PS_ADMIN_DIR_."/config.php"); 

?>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="slick/slick.min.js"></script>
<link rel="stylesheet" href="slick/slick.css">
<script src="js/bootstrap-year-calendar.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<link rel='stylesheet' href="css/bootstrap-year-calendar.css"/>

</head>
<body>
<script type="text/javascript">
            ;(function($){
	$.fn.calendar.dates['es'] = {
		days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
		daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
		daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
		months: ["ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE"],
		monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
		weekShort: 'S',
		weekStart: 1
	};
}(jQuery));          

        </script>
<div id="calendar" data-provide="calendar"></div>
</body>
</html>

Muchas gracias por vuestra ayuda

4
  • En el enlace que pones, en el menú de la izquierda > Custom Day Rendering te especifica como personalizar un día en concreto. Si ya lo has probado, puedes editar la pregunta y poner tu código?
    – DevCodeG
    Commented el 4 jul. 2018 a las 12:00
  • Sí, habia puesto ese link pero se ve que no entra directo, la duda que tengo es esa, porque copio el código que tienen debajo y no me funciona, sigue igual...@DevCodeG Commented el 4 jul. 2018 a las 12:38
  • Lo he probado con un ejemplo de los que vienen y me funciona correctamente. Comprueba que tienes todos los frameworks necesarios y linkados en el orden correcto.Te recomendaria que añadieras tu código a la pregunta para poder darte una mejor respuesta o ver el problema.
    – DevCodeG
    Commented el 5 jul. 2018 a las 9:58
  • He añadido mi código @DevCodeG si puedes échale un vistazo a ver si me falta algo...Gracias por tu aportación Commented el 9 jul. 2018 a las 13:45

1 respuesta 1

1

Cambia el orden de las etiquetas en el ya que el orden es influyente.

<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<!-- Calendario -->
<link rel="stylesheet" href="bootstrap-year-calendar.min.css">
<script src="bootstrap-year-calendar.min.js"></script>
<!-- Slick -->
<script src="slick/slick.min.js"></script>
<link rel="stylesheet" href="slick/slick.css">
</head>

Hay una pregunta de otro usuario que da una buena explicación aquí

Puedes personalizar días concretos, o el día actual mediante la opción customDayRender. Según la documentación oficial:

Type: function(element, date)
Default: null
Get/Set methods: getCustomDayRenderer(), setCustomDayRenderer()

Para personalizar por ejemplo el día actual, con un borde rojo y resaltado en negrita puedes utilizar algo como esto:

<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Javascripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <!-- Calendario -->
    <link href="http://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.css" rel="stylesheet"/>
    <script src="http://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.js"></script>
</head>
<body>

	<div id="calendar" data-provide="calendar"></div>

	<script type="text/javascript">
  $(function() {
	    var currentYear = new Date().getFullYear();
	    var currentMonth = new Date().getMonth();
	    var currentDay = new Date().getDate();

	    var currentDate = new Date(currentYear, currentMonth, currentDay).getTime();

	    $('.calendar').calendar({ 
	        customDayRenderer: function(element, date) {
	            if(date.getTime() == currentDate) {
	            	$(element).css('font-weight', 'bold');
	            	$(element).css('border-bottom', '2px solid red');
	            }
	        }

	    });
	});
	</script>
</body>
</html>

9
  • Ya lo he ordenado, gracias por tu ayuda, pero sigue sin funcionarme lo del día..debo poner la función de la parte de abajo de Custom Day Reendering en el bootstrap-year-calendar.js en la parte del final, no? Commented el 10 jul. 2018 a las 10:58
  • He editado la respuesta con un ejemplo @JoumeParra. Sólo tienes que añadir el código del <script> al tuyo y debería funcionar.
    – DevCodeG
    Commented el 10 jul. 2018 a las 12:18
  • Me sigue sin funcionar...no entiendo porque me pasan estas cosas, se supone que está todo correcto...De todas formas muchas gracias por tu ayuda... Commented el 10 jul. 2018 a las 12:45
  • Has visto que lo que cambia es en este caso el dia 10 de Julio de 2018 que es el día actual? Como has integrado el ejemplo en tu código?
    – DevCodeG
    Commented el 10 jul. 2018 a las 12:58
  • Sí, pero no me lo resalta, no hace nada. He copiado la parte del <script> como me has dicho, y la he pegado en mi código HTML sustituyendo la parte que tenía puesta... Commented el 10 jul. 2018 a las 13:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.