0

Estoy intentando utilizar el Bootstrap Year Calendar, para crear un calendario anual, haciéndolo igual que en su web. Pero cuando o inicializo, me aparecen solo los 4 primeros meses, y en columna, es decir, sólo un mes por fila como en esta imagen:

Mi calendario

A continuación os dejo mi código, a ver si no he puesto algo bien, soy bastante inexperto en este tema:

<?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>
<link rel='stylesheet' href="css/bootstrap-year-calendar.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="js/bootstrap-year-calendar.js"></script>
</head>
<body>
<div data-provide="calendar"></div>
</body>
<script>$(function() {
    $('#calendar').calendar();
});</script>

Muchas gracias por su ayuda.

1
  • Lo he solucionado poniendo un float: left; pero algunos años me salen desordenados, por ejemplo en 2019 me sale mayo a la parte derecha dejando todo un hueco debajo de Enero, Febrero...no sé como solucionar eso el 28 jun. 2018 a las 15:20

2 respuestas 2

0

Según el código que as enseñado tienes varios errores:

  1. En la estructura del html te falta el Doctype y el tag <html>
  2. El script javascript del final de la página no esta dentro del body.
  3. El div donde tiene que cargar, le falta el ID que hace referencia al scrip: <div id="calendar" data-provide="calendar"></div>

Aparte de lo de antes, he visto que el chico que a creado el código Creo que es esta pagina: http://www.bootstrap-year-calendar.com/ no esta utilizando la misma version de bootstrap que tu.

Tu has cargado la version 4.1.1 y el esta utilizando la version v3.3.5

4
  • Gracias por tu ayuda, pero me sigue funcionando igual, me salen los meses de uno en uno...todos en una columna el 28 jun. 2018 a las 14:50
  • 1
    Para que te funcione con flex tendrás que hacer: .months-container { display: flex !important; flex-wrap: wrap; } .calendar .month-container { flex-basis: 19.7%; } la propiedad flex-basis tendrás que ir adaptandola con media queries y por ultimo tendrás que mirar como se llama la clase del modal para que aparezca por encima del contenido. Espero que te sirva para poder seguir al menos el 28 jun. 2018 a las 15:20
  • Por fiiiiiin! Ahora si que me ha servido! Muchas gracias @Daniel Bardaji Torres , por cierto, lo último que has escrito no se a que te refieres, me sale todo correctamente. el 28 jun. 2018 a las 15:29
  • Me alegro! Marca como solucionado esta respuesta y así se cerrara la pregunta en StackOverflow! Un placer haberte ayudado! el 28 jun. 2018 a las 15:31
0

A mi me funciona importando en este orden

<script src="js/jquery-1.11.0.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="js/bootstrap-year-calendar.js"></script>
<link rel='stylesheet' href="css/bootstrap-year-calendar.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
1
  • No me funciona igual... el 28 jun. 2018 a las 14:41

Tu Respuesta

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

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