Tengo un calendario hecho con el fullcalendar
, quisiera saber si hay un evento que me ayude a detectar en que rango de fecha me encuentro, que este evento se ejecute cada vez que cambio de fecha, bien si hago clic en la lista de "semana", "mes", "dia", etc, cualquiera de los items de la cabecera del calendario.
Ej de un calendar:
$(document).ready(function() {
var datos = [{
"id": 27,
"numero": 700022,
"fecha": "2017-03-09",
"color": "#ffff00",
"hora_inicio": "00:00:00",
"hora_final": "05:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 13,
"numero": 700009,
"fecha": "2017-03-02",
"color": "#ffff00",
"hora_inicio": "00:00:00",
"hora_final": "05:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 11,
"numero": 700006,
"fecha": "2017-03-08",
"color": "#ffff00",
"hora_inicio": "00:00:00",
"hora_final": "05:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 10,
"numero": 700007,
"fecha": "2017-03-07",
"color": "#ff0000",
"hora_inicio": "13:00:00",
"hora_final": "16:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 6,
"numero": 700003,
"fecha": "2017-03-08",
"color": "#0000ff",
"hora_inicio": "06:00:00",
"hora_final": "11:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 5,
"numero": 700002,
"fecha": "2017-03-08",
"color": "#ffff00",
"hora_inicio": "00:00:00",
"hora_final": "05:59:00",
"codigo": "14523",
"productos_nombres": "Miovit",
"concat_presentacion": "Inyectable 154 ml",
"lineas_de_produccion": "L\u00edquidos Esteriles"
}, {
"id": 14,
"numero": 700010,
"fecha": "2017-03-07",
"color": "#0000ff",
"hora_inicio": "06:00:00",
"hora_final": "11:59:00",
"codigo": "10000",
"productos_nombres": "Miovit",
"concat_presentacion": "Jarabe 155 gg",
"lineas_de_produccion": "Solidos"
}, {
"id": 21,
"numero": 700016,
"fecha": "2017-03-09",
"color": "#ff0000",
"hora_inicio": "13:00:00",
"hora_final": "16:59:00",
"codigo": "10000",
"productos_nombres": "Miovit",
"concat_presentacion": "Jarabe 155 gg",
"lineas_de_produccion": "Solidos"
}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month listDay,listWeek,listMonth,listYear'
},
views: {
listDay: {
buttonText: 'Listado: Día'
},
listWeek: {
buttonText: 'Listado: Semana'
},
listMonth: {
buttonText: 'Listado: Mes'
},
listYear: {
buttonText: 'Listado: Año'
}
},
defaultView: 'month',
defaultDate: new Date(),
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback) {
var events = [];
if (datos) {
$.map(datos, function(v) {
events.push({
id: v.id,
title: v.numero,
start: v.fecha + ' ' + v.hora_inicio,
end: v.fecha + ' ' + v.hora_final,
button: '<button type="button" class="btn btn-default" data-toggle="popover" data-trigger="focus" title="Datos del Producto" data-content="Nombre: ' + v.productos_nombres + '<br />Presentación: ' + v.concat_presentacion + '<br />Linea de Producción: ' + v.lineas_de_produccion + '">' + v.codigo + '</button>',
//url: '#',
backgroundColor: v.color, //color de la db
borderColor: "#000", // borde negro
color: '#000',
textColor: invertColor(v.color) // invierto el color para q se aprecie el texto
});
});
}
callback(events);
},
});
});
function invertColor(hexTripletColor) {
var color = hexTripletColor;
color = color.substring(1); // remove #
color = parseInt(color, 16); // convert to integer
color = 0xFFFFFF ^ color; // invert three bytes
color = color.toString(16); // convert to hex
color = ("000000" + color).slice(-6); // pad with leading zeros
color = "#" + color; // prepend #
return color;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>