web-dev-qa-db-fra.com

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 les 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.

enter image description here

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

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

Mais sa ne fonctionne pas bien.

J'ai aussi essayé ci-dessous CSS 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...

jquerydatefullcalendar
21
Frank

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

vous pouvez ajouter 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.

28
Mausami

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 précédant "maintenant".

Désélectionner la méthode

24
Michal Gallovic

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')
    }
});
7
dap.tci

Vous pouvez combiner:

-hide text by CSS comme mentionné dans la question

- désactive le bouton PREV du 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
    }
}
4
Lukasz Koziara

FullCalendar v3.0 contient la propriété selectAllow :

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

J'ai essayé cette approche, fonctionne bien.

$('#calendar').fullCalendar({
   defaultView: 'month',
   selectable: true,
   selectAllow: function(select) {
      return moment().diff(select.start) <= 0
   }
})

Prendre plaisir!

2
Novasol

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;
            }
1
david

Pas besoin d'un long programme, essayez ceci.

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

Nous donne la date actuelle.

1
Akila Jayasinghe

J'ai utilisé l'option validRange.

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

1
Deniz Kaplan

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
   }
1
P P

C'est ce que j'utilise actuellement 

Également ajouté la fonction .add () afin que l'utilisateur ne puisse pas ajouter 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;
             }
1
André Fernandes

Dans la version complète 3.9, vous préférerez peut-être 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 et heure

1
nicolallias

En Fullcalendar, je l'ai atteint par l'événement dayClick. Je pensais que c'était le moyen le plus simple de le faire.

Voici mon code ..

 dayClick: function (date, cell) {
              var current_date = moment().format('YYYY-MM-DD')
              // date.format() returns selected date from fullcalendar
              if(current_date <= date.format()) {
                //your code
              }
            }

J'espère que ça aide les dates passées et futures seront indélébiles.

0
Parthiban.S