How do I know which date range I am in?

Question

How do I know which date range I am in?

Navigation

#1 by (1 votes)

2

I have a calendar made with the fullcalendar , I would like to know if there is an event that helps me to detect in what date range I am, that this event is executed every time I change the date, or if I click on the list of "week", "month", "day", etc, any of the items in the calendar header.

Ex of a 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>

javascript jquery fullcalendar

asked by Pablo Contreras 10.03.2017 в 22:48

source

1 answer

Differences between SetCursorPosition and CursorTop, CursorLeft in C # libc ++ abi.dylib: terminating with uncaught exception of type NSException

score 1 · Accepted Answer

To obtain the start and end date that the user is viewing can be obtained as follows:

var calendar = $('#calendario').fullCalendar('getCalendar');
var view = calendar.view;
console.debug(view.start._d);
console.debug(view.end._d);

The only thing I can not do is capture the view change event of fullcalendar .

To obtain the viewing event in which the user is (day, week, month, etc.) we do it in the following way:

$('#calendario').fullCalendar({
    ...
    viewRender: function(view, element) { alert('new view: ' + view.name); }
});