Comment rendre la date passée non sélectionnable dans le calendrier complet?

Le problème est de savoir comment désactiver les dates sélectionnables des dates passées dans la vue mensuelle / hebdomadaire du calendrier complet.

Je veux que l’utilisateur ne soit pas autorisé à cliquer / sélectionner les dates passées.

entrez la description de l'image ici

Voici un extrait de code googlé que j’essaie d’implémenter pour le rendu des événements:

selectable: true, selectHelper: false, select: function(start, end, allDay) { var appdate = jQuery.datepicker.formatDate('', 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; } }, 

Mais sa ne fonctionne pas bien.

J’ai essayé ci-dessous CSS aussi et cela m’aide à masquer le texte de la date passée uniquement, mais selectable travaille toujours sur la boîte pastdate.

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

Je suis vraiment coincé avec ce problème. S’il vous plaît quelqu’un m’aider. Merci…

Je l’ai fait dans mon calendrier complet et cela fonctionne parfaitement.

vous pouvez append ce code dans votre fonction select.

  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 } }, 

J'espère que cela vous aidera.

J’aime cette approche:

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

Il va essentiellement désactiver la sélection à des moments avant “maintenant”.

Désélectionner méthode

Grâce à cette réponse , j’ai trouvé la solution ci-dessous:

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

Vous pouvez combiner:

-hide text by CSS comme mentionné dans la question

– désactiver le bouton PREV sur le mois en cours

-check date sur 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 } } 

Dans FullCalendar v3.0, il existe la propriété selectAllow :

 selectAllow: function(info) { if (info.start.isBefore(moment())) return false; return true; } 

Voici la solution que j’utilise maintenant:

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

Pas besoin d’un long programme, essayez ceci.

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

Nous donne la date actuelle.

Dans fullcalendar 3.9, vous pouvez préférer le validRange function parameter :

 validRange: function(nowDate){ return {start: nowDate} //to prevent anterior dates }, 

Inconvénient: cela masque également les événements antérieurs à cette date / heure

Vous pouvez utiliser ceci

 var start_date= $.fullCalendar.formatDate(start,'YYYY-MM-DD'); var today_date = moment().format('YYYY-MM-DD'); if(check < today) { alert("Back date event not allowed "); $('#calendar').fullCalendar('unselect'); return false } 

C’est ce que j’utilise actuellement

Également ajouté la fonction .add () afin que l’utilisateur ne puisse pas append un événement à la même heure

 select: function(start, end, jsEvent, view) { if(end.isBefore(moment().add(1,'hour').format())) { $('#calendar').fullCalendar('unselect'); return false; } 

J’ai utilisé l’option validRange .

validRange: { start: Date.now(), end: Date.now() + (7776000) // sets end dynamically to 90 days after now (86400*90) }