¿Fullcalendar limita la visualización de los meses disponibles?

Question

Me gustaría saber cómo puedo limitar el calendario completo para mostrar un período de tres meses y no seleccionable para el resto de los meses, como en un datepicker?

E.g. El mes actual es mayo de 2010, solo me gustaría que el calendario muestre mayo y abril (al hacer clic en el mes anterior) y junio (al hacer clic en el mes próximo), el resto de los meses se anularán de la selección del usuario.

No estoy seguro de si me olvidé de leer alguna parte en la documentación del calendario completo. Consejo amable. Gracias.

Answer 1

No he hecho esto, así que no estoy seguro de que esto funcione. Pero al menos podrías intentar y ver.

Probablemente veré la personalización de la devolución de llamada viewDisplay. Recibe un View Object que contiene una propiedad start, entre otros. Puede usar las propiedades del objeto Ver para probar qué vista y fecha está mirando el usuario y luego realizar acciones basadas en él.

No estoy seguro de si fullcalendar funciona de esta manera, pero algunos complementos anularán una acción si return false de una devolución de llamada. Por lo tanto, puede verificar la fecha start y si está fuera de su rango de meses aceptables, entonces return false para cancelar la acción.

Si eso no funciona, dentro de viewDisplay podría verificar nuevamente la fecha start. Si el mes siguiente o el mes anterior están fuera de rango, puede usar los selectores jQuery para tomar los botones prev/next y deshabilitarlos. De esta forma, el usuario no podrá cambiar a un mes fuera de rango.

Además, si el usuario está en un mes fuera de rango, puede emitir inmediatamente un comando gotoDate para cambiar a un mes válido.

$('#calendar').fullCalendar({ 
    viewDisplay: function(view) { 
     // maybe return false aborts action? 
     if (view.start > lastDayOfNextMonth) { 
      return false; 
     } 
     // or disable next button if this is last valid month 
     if (view.end + oneDay >= lastValidDate) { 
      $("#calendar #fc-button-next").attr("disabled","disabled"); 
     } 
     // or gotoDate if view.start is out of range 
     if (view.start > lastValidDate) { 
      // gotoDate 
     } 
    } 
}); 

Hay muchas maneras de hacer la lógica y la fecha de matemática allí, pero creo que podría obtener algo que funcione de esta manera.

Answer 2

Me enfrentaba a una situación similar: tengo un programa de eventos y quería limitar el Fullcalendar al rango de fechas para los eventos (por ejemplo, 12 semanas). Entonces, si hoy está en la semana 6, entonces el calendario solo muestra las fechas de la semana 1 a la 12 cuando el usuario hace clic en siguiente o anterior. Analicé la modificación de fullcalendar.js pero no tuve tiempo de desviarme de la línea de tiempo de mi proyecto para hacerlo. Así como una solución aquí es lo que hice:

1. Añadir un selector de fechas en un div en el lado izquierdo de la página, con el fullCalendar a la derecha.
2. Establezca un startDate y endDate para el intervalo de fechas de su programa.
3. Establezca las variables minDate y maxDate en datepicker utilizando startDate y endDate para el intervalo de fechas del programa en datepicker, para atenuar todas las demás fechas fuera del rango. El objetivo de esto es indicarle al usuario que se mantenga dentro del rango. Además, agregué un código para que cuando un usuario hace clic en la fecha en datepicker, el día se muestre en fullCalendar.

4. En sus archivos personalizados js jQuery, añadir al método fullCalendar para dayClick que tiene fecha tan variables:

   si (+ fecha + < jQuery.startDate || + fecha> jQuery.endDate) {

   var $ = date_out_of_range_dialog jQuery ('') .html ('

   Lo sentimos, la fecha que ha seleccionado está fuera del intervalo de fechas para el programa actual

   Fecha de Inicio:.' + (jQuery. startDate.getMonth() + 1) + '/' + jQuery.startDate.getDate() + '/' + jQuery.startDate.getFullYear() + '

   Fecha de finalización:' + (jQuery.endDate.getMonth () + 1) + '/' + jQuery.endDate.getDate() + '/' + jQuery.endDate.getFullYear() + '

   ') .dialog ({ AutoOpen: false, modal: true, título : 'Fecha fuera de rango', ancho: 600, botones: { "Ok": función() { jQuery (this) .dialog ("cerrar"); }} })

   $ date_out_of_range_dialog.dialog ('abierto');

   } else {

   // hacer algo más como ver/añadir/eliminar eventos para ese día en el rango.

   }

5. El método .dialog para abrir la ventana de diálogo es de mootools, pero algo similar se puede utilizar en jQuery. Arreglé jQuery. to startDate y endDate para que los vars estuvieran disponibles a través de mi archivo .js.

6. Aquí está el código para el selector de fecha para recoger la fecha y seleccionar el fullCalendar:.

   jQuery ('# datepicker_for_calendar') selector de fechas ({ defaultDate: jQuery.startDate, MinDate: jQuery.startDate, MaxDate: jQuery.endDate, en línea: true, showButtonPanel: true, onSelect: function (dateText, inst) {var d = new Date (dateText); jQuery ('# calendario') fullCalendar ('GoToDate'. , d); selectedDate = d; } });

Answer 3

Esto se basa en tauren 's answer, sino que incluye los cálculos fecha necesaria y selectores fullcalendar de llevarlo a cabo (este código utiliza una gama de 12 meses):

jQuery('#edit-calendar').fullCalendar({ 
    viewDisplay : function(view) { 
     var now = new Date(); 
     var end = new Date(); 
     end.setMonth(now.getMonth() + 11); //Adjust as needed 

     var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
     var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
     var end_date_string = end.getMonth()+'/'+end.getFullYear(); 

     if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 

     if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
    } 
}); 

Answer 4

$('#calendar').fullCalendar({ 
      viewDisplay : function(view) { 
       var now = new Date(); 
       var end = new Date(); 
       var begin = new Date(); 

       end.setMonth(now.getMonth() + 12); //Adjust as needed 
       begin.setMonth(now.getMonth() - 12); //Adjust as needed 

       var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
       var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
       var end_date_string = end.getMonth()+'/'+end.getFullYear(); 
       var begin_date_string = begin.getMonth()+'/'+begin.getFullYear(); 

       if(cal_date_string == begin_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
       else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 

       if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
       else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
      } 

Answer 5

  var academicYearStartDate = new Date('2013/4/10'); 
      var academicYearEndDate = new Date('2014/4/10'); 

      viewDisplay: function (view) { 
       //========= Hide Next/ Prev Buttons based on academic year date range 
       if (view.end > academicYearEndDate) { 
        $("#SchoolCalender .fc-button-next").hide(); 
        return false; 
       } 
       else { 
        $("#SchoolCalender .fc-button-next").show(); 
       } 

       if (view.start < academicYearStartDate) { 
        $("#SchoolCalender .fc-button-prev").hide(); 
        return false; 
       } 
       else { 
        $("#SchoolCalender .fc-button-prev").show(); 
       } 

      } 

Answer 6

Mi turno de agregar una modificación. Sin embargo, esto se basa en lewsid 's answer que incluye los selectores matemáticos de fecha necesarios y de calendario completo para llevarlo a cabo, pero con un giro.

Acabo de agregar dos if's, que puede optar por usar uno o ambos, o ninguno. El propósito de ellos es ser un día específico, solo porque permite, por ejemplo, "2 meses" adelante y atrás, si está en una semanaVer el "Hoy" + 2 meses pueden estar deshabilitados, y también, después de seguir adelante es posible que esté bloqueado de volver a "Hoy".

jQuery('#edit-calendar').fullCalendar({ 
    viewDisplay : function(view) { 
     var now = new Date(); 
     var end = new Date(); 
     end.setMonth(now.getMonth() + 2); //Adjust as needed 

     var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
     var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
     var end_date_string = end.getMonth()+'/'+end.getFullYear(); 
     // TWEAK: Day Specific Vars 
     var cal_date_month_day = parseInt(view.start.getDate()); 
     var cur_date_month_day = parseInt(now.getDate()); 

     // TWEAK: Only Disable if I can see today! 
     if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 
     // TWEAK: Only Disable if I really did reach "Today" + months 
     if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
    } 
}); 

Answer 7

Para FullCalendar en la versión 2 cambio viewDisplay : function(view) { a viewRender: function(view,element) { (solución mixta de los ejemplos en esta página):

$('#calendar').fullCalendar({ 

     //restricting available dates to 2 moths in future 
     viewRender: function(view,element) { 
      var now = new Date(); 
      var end = new Date(); 
      end.setMonth(now.getMonth() + 2); //Adjust as needed 

      if (end < view.end) { 
       $("#calendar .fc-next-button").hide(); 
       return false; 
      } 
      else { 
       $("#calendar .fc-next-button").show(); 
      } 

      if (view.start < now) { 
       $("#calendar .fc-prev-button").hide(); 
       return false; 
      } 
      else { 
       $("#calendar .fc-prev-button").show(); 
      } 
     } 
    }); 

Answer 8

puede utilizar la opción

$('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      validRange: { 
       start: '2017-05-01',//start date here 
       end: '2017-07-01' //end date here 
      }, 
      defaultDate: '2017-05-12' 
      }); 

Answer 9

me ha gustado la respuesta de lewsid mucho pero tiene algunos problemas. En primer lugar, view.start es un Momento, no una fecha, por lo que getMonth() no existe. En segundo lugar, el start de una Vista es solo el primer día visible de ese mes, lo que significa que la fecha puede ser del mes anterior. Para evitar esto, use su propiedad intervalStart.

Aquí está mi implementación para que el calendario muestre el año actual.

viewRender: function(view, element) { 
    var now = new Date(new Date().getFullYear(), 0, 1); 
    var end = new Date(new Date().getFullYear(), 11, 31); 

    var calDateString = view.intervalStart.month()+'/'+view.intervalStart.year(); 
    var curDateString = now.getMonth()+'/'+now.getFullYear(); 
    var endDateString = end.getMonth()+'/'+end.getFullYear(); 

    if (calDateString === curDateString) { 
     jQuery('.fc-prev-button').addClass("fc-state-disabled"); 
    } else { 
     jQuery('.fc-prev-button').removeClass("fc-state-disabled"); 
    } 

    if (endDateString === calDateString) { 
     jQuery('.fc-next-button').addClass("fc-state-disabled"); 
    } else { 
     jQuery('.fc-next-button').removeClass("fc-state-disabled"); 
    } 
}