Toni Michel Caubet Toni Michel Caubet - 1 month ago 13
Javascript Question

Datepicker: Show days from next/prev month (if in ending/starting week of current one)

This is how datepicker shows a month by default, numbers start the first of the month and end the last of the month:

enter image description here

The thing is that I need to fill the whole calendar with numbers, like this:

enter image description here

So I found that the option

showOtherMonths
to
true
does the trick:

enter image description here

But if you notice, it adds an extra week, Wich I dont need,

Any idea why?

-EDIT-

The whole code:

jQuery('.datepicker').each(function (i) {
var $item = jQuery(this);
var fechas = $item.data('fechas') != '' ? $item.data('fechas') : '';
var urls = $item.data('urls') != '' ? $item.data('urls') : '';
var tipos = $item.data('tipos') != '' ? $item.data('tipos') : '';
var titulos = $item.data('titulos') != '' ? $item.data('titulos') : '';
var options = {
'dateFormat' : dateFormat,
'display' : $item.data('display') == '' ? '' : $item.data('display'),
firstDay: 1,
numberOfMonths: $item.data('months') == '' ? 1 : $item.data('months'),
showOtherMonths: true,
selectOtherMonths: false
}
/* Marcar los dias con sesion */
if (fechas.length) {
options.beforeShowDay = function(datestr) {
var fecha = jQuery.datepicker.formatDate( dateFormat, datestr);
var arr = [true, ''];
for( var j = 0 ; j < fechas.length ; j++ ) {
if ( fecha == fechas[j] ) {
return [true, 'dia-con-evento '+tipos[j], titulos[j], 'link'];
}
}
return arr;
}
}
/* Agregar links a los días */
options.onSelect = function (datestr) {
if ( fechas.indexOf(datestr) != -1 ) {
location.href = urls[ fechas.indexOf(datestr) ];
}
}
$item.datepicker( options );
});


Markup:

<div class="datepicker year"
data-display="inline"
data-fechas='["13\/05\/2015","11\/02\/2015","11\/03\/2015","10\/06\/2015","08\/04\/2015","08\/07\/2015","30\/03\/2015","30\/03\/2015","04\/05\/2015","04\/05\/2015","14\/05\/2015","24\/05\/2015","03\/06\/2015","18\/06\/2015","28\/06\/2015","03\/06\/2015","03\/06\/2015","13\/06\/2015","07\/07\/2015","08\/07\/2015","09\/07\/2015","07\/08\/2015","17\/08\/2015","15\/11\/2015"]'
data-urls='["\/sescam-la-ventana\/?q=sesion\/1","\/sescam-la-ventana\/?q=sesion\/2","\/sescam-la-ventana\/?q=sesion\/3","\/sescam-la-ventana\/?q=sesion\/4","\/sescam-la-ventana\/?q=sesion\/5","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6"]'
data-tipos='["caso","caso","caso","caso","caso","caso","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito"]'
data-titulos='["El tratamiento del asma: \"a la carta\" vs \"menu\u0301 del di\u0301a","El caso del Sr. Minotaruro en el laberinto de los ARA II","A vueltas con el protector...","El humor es como el colesterol, unos tienen del bueno, otros del malo","Deprescripcio\u0301n: En busca de la cordura","Mesa redonda BBPP Premio 1a edicio\u0301n","Programaci\u00f3n del caso en La Ventana","Preparaci\u00f3n del materia","Preparaci\u00f3n del materia","Entrega del material","Aprobaci\u00f3n del material y lanzamiento de la sesi\u00f3n cl\u00ednica","Reuni\u00f3n de preproducci\u00f3n","Grabaci\u00f3n","Validaci\u00f3n del v\u00eddeo","Validaci\u00f3n del v\u00eddeo","Publicaci\u00f3n de material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Publicaci\u00f3n de v\u00eddeo en web y plataforma","Emisi\u00f3n de la sesi\u00f3n cl\u00ednica","Apertura m\u00f3dulos eformaci\u00f3n","Finalizaci\u00f3n del curso","Presentaci\u00f3n de alumnos aprobados","Pago a ponente"]'
data-months='6'
>
</div>

Answer

Everything seems to be running fine. If the problem persists, i would assume is a different type of script or CSS conflicting with what you have already, perhaps an outdated jquery library.

$('.datepicker').each(function (i) {
    var $item = $(this);
    var fechas = $item.data('fechas') != '' ? $item.data('fechas') : '';    
    var urls = $item.data('urls') != '' ? $item.data('urls') : '';
    var tipos = $item.data('tipos') != '' ? $item.data('tipos') : '';
    var titulos = $item.data('titulos') != '' ? $item.data('titulos') : '';
    var options = {
        'dateFormat' : "dd/mm/yyyy",
        'display' : $item.data('display') == '' ? '' : $item.data('display'),
        firstDay: 1,
        numberOfMonths: $item.data('months') == '' ? 1 : $item.data('months'),
        showOtherMonths: true,
        selectOtherMonths: false
    }
    
    /* Marcar los dias con sesion */
    
    if (fechas.length) {
        options.beforeShowDay = function(datestr) {
            var fecha = $.datepicker.formatDate("dd/mm/yyyy", datestr);
            var arr = [true, ''];
            for( var j = 0 ; j < fechas.length ; j++ ) {  
                if ( fecha == fechas[j] ) {
                    return [true, 'dia-con-evento '+tipos[j], titulos[j], 'link'];
                } 
            }
            return arr;
        }
    }       
   
    /* Agregar links a los días */
    
    options.onSelect = function (datestr) {
        if ( fechas.indexOf(datestr) != -1 ) {
            location.href =  urls[ fechas.indexOf(datestr) ];                   
        }
    }   
       
    $item.datepicker( options );
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>


<div class="datepicker year" 
             data-display="inline"
             data-fechas='["13\/05\/2015","11\/02\/2015","11\/03\/2015","10\/06\/2015","08\/04\/2015","08\/07\/2015","30\/03\/2015","30\/03\/2015","04\/05\/2015","04\/05\/2015","14\/05\/2015","24\/05\/2015","03\/06\/2015","18\/06\/2015","28\/06\/2015","03\/06\/2015","03\/06\/2015","13\/06\/2015","07\/07\/2015","08\/07\/2015","09\/07\/2015","07\/08\/2015","17\/08\/2015","15\/11\/2015"]'
             data-urls='["\/sescam-la-ventana\/?q=sesion\/1","\/sescam-la-ventana\/?q=sesion\/2","\/sescam-la-ventana\/?q=sesion\/3","\/sescam-la-ventana\/?q=sesion\/4","\/sescam-la-ventana\/?q=sesion\/5","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6"]'
             data-tipos='["caso","caso","caso","caso","caso","caso","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito"]'
             data-titulos='["El tratamiento del asma: \"a la carta\" vs \"menu\u0301 del di\u0301a","El caso del Sr. Minotaruro en el laberinto de los ARA II","A vueltas con el protector...","El humor es como el colesterol, unos tienen del bueno, otros del malo","Deprescripcio\u0301n: En busca de la cordura","Mesa redonda BBPP Premio 1a edicio\u0301n","Programaci\u00f3n del caso en La Ventana","Preparaci\u00f3n del materia","Preparaci\u00f3n del materia","Entrega del material","Aprobaci\u00f3n del material y lanzamiento de la sesi\u00f3n cl\u00ednica","Reuni\u00f3n de preproducci\u00f3n","Grabaci\u00f3n","Validaci\u00f3n del v\u00eddeo","Validaci\u00f3n del v\u00eddeo","Publicaci\u00f3n de material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Publicaci\u00f3n de v\u00eddeo en web y plataforma","Emisi\u00f3n de la sesi\u00f3n cl\u00ednica","Apertura m\u00f3dulos eformaci\u00f3n","Finalizaci\u00f3n del curso","Presentaci\u00f3n de alumnos aprobados","Pago a ponente"]'  
             data-months='6'
        >
        </div>