Come bloccare le date in Fullcalendar oltre una certa data

Question

Ho una data futura che è sempre 30 giorni prima della data corrente. È memorizzato in un oggetto Date. Ho lavorato questo fuori uso:

var currentDate = new Date(); 
var futureBlockDate = new Date(); 
futureBlockDate.setDate(currentDate.getDate() + 30); 

Utilizzando la FullCalendar jQuery plugin voglio bloccare visivamente eventuali giorni passati questa data sul calendario con un diverso colore di sfondo in modo che un utente sa che non possono fare clic su di loro o creare un evento in quei giorni.

Qual è il modo migliore per farlo con FullCalendar? Forse disabilitare tutte le date per impostazione predefinita e abilitare solo per un intervallo specifico (dalla data di oggi fino a 30 giorni in futuro)?

credo di poter applicare uno stato disabilitato sfondo a tutte le cellule utilizzando il seguente codice:

$(".fc-widget-content").addClass("disabled"); 

.disabled .fc-day-content { 
    background-color: #123959; 
    color: #FFFFFF; 
    cursor: default; 
} 

Come si può fare?

Answer 1

Utilizzare l'opzione dayRender per aggiungere una classe "disabile" per uscire date gamma.

$('#calendar').fullCalendar({ 
    ... 
    dayRender: function(date, cell){ 
     if (date > maxDate){ 
      $(cell).addClass('disabled'); 
     } 
    } 
    ... 
}); 

È anche possibile utilizzare l'evento viewRender e il metodo gotoDate, per impedire agli utenti di navigare più lontano di 30 giorni a partire da oggi:

$('#calendar').fullCalendar({ 
    ... 
    viewRender: function(view){ 
     if (view.start > maxDate){ 
      $('#calendar').fullCalendar('gotoDate', maxDate); 
     } 
    } 
    ... 
}); 

Answer 2

How about this solution?

dayClick: function(date, allDay, jsEvent, view) { 
    var myDate = new Date(); 

    //How many days to add from today? 
    var daysToAdd = 15; 

    myDate.setDate(myDate.getDate() + daysToAdd); 

    if (date < myDate) { 
     //TRUE Clicked date smaller than today + daysToadd 
     alert("You cannot book on this day!"); 
    } else { 
     //FLASE Clicked date larger than today + daysToadd 
     alert("Excellent choice! We can book today.."); 
    } 

} 

Answer 3

per cellulare disabilitare il click (versione 2.0):

dayRender: function(date, cell) { 
    // It's an example, do your own test here 
    if(cell.hasClass("fc-other-month")) { 
      cell.addClass('disabled'); 
    } 

}, 
dayClick: function(date, jsEvent, view) { 
    if($(jsEvent.target).hasClass("disabled")){ 
     return false; 
    } 
    // Your code 
    // .... 
} 

Answer 4

per chi è alla ricerca di una soluzione per definire un min-display-date e max-display-date: (per fullcalendar v2)

$('#calendar').fullCalendar({ 
    defaultDate: new Date(), 
    viewRender: function(view, element) { 

     curdate = new Date(); 
     viewdate = new Date(view.start); 

     // PREV - force minimum display month to current month 
     if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
      new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){ 
      $('.fc-prev-button').prop('disabled', true); 
      $('.fc-prev-button').css('opacity', 0.5); 
     } else { 
      $('.fc-prev-button').prop('disabled', false); 
      $('.fc-prev-button').css('opacity', 1); 
     } 

     // NEXT - force max display month to a year from current month 
     if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
      new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){ 
      $('.fc-next-button').prop('disabled', true); 
      $('.fc-next-button').css('opacity', 0.5); 
     } else { 
      $('.fc-next-button').prop('disabled', false); 
      $('.fc-next-button').css('opacity', 1); 
     } 
    } 
}); 

Answer 5

questo ha scelto il periodo di mese corrente

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?> 
$('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next', 
       center: 'title', 
       right: 'today' 
      }, 
      defaultDate: moment(), 
      editable: false, 
      //height:'auto', 
      //weekends: false, 
      defaultView: 'agendaWeek', 
      eventLimit: true, 

      events: { 
       url: 'php/get-events.php', 
       error: function() { 
        $('#script-warning').show(); 
       } 

      }, 
      loading: function(bool) { 
       $('#loading').toggle(bool); 

      }, 
     viewRender: function(view,element) { 
      var now = new Date(); 
      var end = new Date(); 
      end.setMonth(now.getMonth()); 
      end.setDate(<?php echo $numerodias; ?>); 
      now.setDate(1); 
      if (end < view.end) { 
       $("#calendar .fc-next-button").hide(); 
       return false; 
       alert(end); 
      } 
      else { 
       $("#calendar .fc-next-button").show(); 
      } 

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