2013-02-20 14 views
17

Il problema è, come disabilitare selezionabile su DATE PASSATE nella vista mese/settimana di fullcalendar.Come rendere non selezionabile la data passata in fullcalendar?

Desidero all'utente non consentito fare clic/selezionare le date precedenti.

enter image description here

Ecco alcune frammento di codice Googled Sto cercando di implementare su eventi di rendering:

selectable: true, 
selectHelper: false, 
select: function(start, end, allDay) { 
     var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start)); 
     jQuery('#appdate').val(appdate); 
     jQuery('#AppFirstModal').show(); 
    }, 
    eventRender: function(event, element, view) 
    { 
     var view = 'month' ; 
     if(event.start.getMonth() !== view.start.getMonth()) { return false; } 
    }, 

Ma la sua non funziona però.

Ho provato a soffiare anche CSS e questo mi aiuta a nascondere solo il testo della data passata, ma selezionabile sta ancora lavorando sulla casella del passato.

.fc-other-month .fc-day-number { 
    display:none; 
} 

Sono davvero bloccato con questo problema. Per favore qualcuno mi aiuti. Grazie ...

risposta

23

Ho fatto questo nel mio fullcalendar e funziona perfettamente.

è possibile aggiungere questo codice nella funzione di selezione.

select: function(start, end, allDay) { 
    var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd'); 
    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd'); 
    if(check < today) 
    { 
     // Previous Day. show message if you want otherwise do nothing. 
     // So it will be unselectable 
    } 
    else 
    { 
     // Its a right date 
     // Do something 
    } 
    }, 

Spero che ti possa aiutare.

+0

Ciao Mate, hai reso la mia giornata. Grazie mille ... – Frank

+1

Qui sto usando questo. Grazie. appointzilla.com/wordpress-google/?page_id=8 – Frank

+0

È tutto a posto Frank .. Siete i benvenuti .. – Mausami

4

È possibile combinare:

testo -hide da CSS come accennato in questione

-disable PREV button on current month

data -check su dayClick/eventDrop etc:

dayClick: function(date, allDay, jsEvent, view) { 
    var now = new Date(); 
    if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){ 
     alert('test'); 
    } 
    else{ 
     //do something 
    } 
} 
+0

Grazie mille @Lukasz Koziara – Frank

1

sotto è la soluzione che sto usando ora:

 select: function(start, end, jsEvent, view) { 
      if (moment().diff(start, 'days') > 0) { 
       $('#calendar').fullCalendar('unselect'); 
       // or display some sort of alert 
       return false; 
      } 
15

Mi piace questo approccio:

select: function(start, end) { 
    if(start.isBefore(moment())) { 
     $('#calendar').fullCalendar('unselect'); 
     return false; 
    } 
} 

Sarà selezione essenzialmente disabilitazione sui tempi di prima "ora".

Unselect method

+3

Questo è di gran lunga un approccio migliore rispetto alla risposta scelta. Ho solo bisogno di aggiungere questo per eventDrop e sono a posto :) –

1

Grazie a this answer, ho trovato la soluzione qui di seguito:

$('#full-calendar').fullCalendar({ 
    selectable: true, 
    selectConstraint: { 
     start: $.fullCalendar.moment().subtract(1, 'days'), 
     end: $.fullCalendar.moment().startOf('month').add(1, 'month') 
    } 
}); 
0

Non c'è bisogno di un lungo programma, basta provare questo.

checkout.setMinSelectableDate(Calendar.getInstance().getTime());  
Calendar.getInstance().getTime() 

ci dà la data corrente.

Problemi correlati