Current day Bootstrap Year Calendar

Question

Current day Bootstrap Year Calendar

Navigation

#1 by (1 votes)

1

How could you make me red in the current day in Bootstrap Year Calendar?

On the official website in the examples I found something similar but I can not make it work, I leave the link:

I just want you to mark the current day, because if I get that mark me that I can also make me mark certain days and so can also mark the holidays.

This is my code:

<!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>

Thank you very much for your help

javascript css bootstrap

asked by Joume Parra 04.07.2018 в 13:42

source

1 answer

declare list list as object attribute c # Consultation of two Models in Django

score 1 · Answer 1

Change the order of the labels in the since the order is influential.

<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>

There is a question from another user that gives a good explanation here

You can customize specific days, or the current day using the customDayRender option. According to the official documentation:

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

To personalize for example the current day, with a red border and highlighted in bold you can use something like this:

<!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>