webentwicklung-frage-antwort-db.com.de

Wie kann ich das Datum der Vergangenheit in fullcalendar nicht auswählen?

Das Problem ist, wie man die Auswahl für PAST DATES in der Monats-/Wochenansicht von fullcalendar deaktivieren kann.

Ich möchte, dass der Benutzer nicht auf vergangene Daten klicken kann.

enter image description here

Hier ist ein gegoogeltes Code-Snippet, das ich beim Event-Rendering implementieren möchte:  

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

Aber es funktioniert nicht.

Ich habe auch die folgende Version von CSS ausprobiert, und dies hilft mir, nur den Text des letzten Datums zu verbergen.

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

Ich bin wirklich bei diesem Problem geblieben. Bitte hilf mir jemand. Vielen Dank...

21
Frank

Ich habe das in meinem vollen Kalender gemacht und es funktioniert perfekt.

sie können diesen Code in Ihrer Auswahlfunktion hinzufügen.

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

Ich hoffe es hilft dir.

28
Mausami

Ich mag diesen Ansatz:

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

Die Auswahl wird vor "jetzt" grundsätzlich deaktiviert.

Auswahl aufheben

24
Michal Gallovic

Dank dieser Antwort habe ich die Lösung unten gefunden:

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

Sie können kombinieren:

-Verbindung von CSS-Text wie angegeben

- PREV-Taste im aktuellen Monat deaktivieren

-check Datum auf 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

In FullCalendar v3.0 gibt es die Eigenschaft selectAllow :

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

Ich habe diesen Ansatz ausprobiert, funktioniert gut.

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

Genießen!

2
Novasol

unten ist die Lösung, die ich jetzt verwende:

        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

Keine Notwendigkeit für ein langes Programm, versuchen Sie es einfach.

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

Gibt uns das aktuelle Datum.

1

Ich habe die Option validRange verwendet.

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

1
Deniz Kaplan

Sie können dies verwenden

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

Das verwende ich momentan 

Außerdem wurde die .add () - Funktion hinzugefügt, damit der Benutzer kein Ereignis zur selben Stunde hinzufügen kann

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

In fullcalendar 3.9 bevorzugen Sie vielleicht den validRange function parameter :

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

Nachteil: Dadurch werden auch Ereignisse vor dieser Datumszeit ausgeblendet

1
nicolallias

In Fullcalendar habe ich es per dayClick-Event erreicht. Ich dachte, es ist der einfache Weg, es zu tun.

Hier ist mein 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
              }
            }

Hoffe, es hilft, vergangene und zukünftige Termine werden nicht auswählbar.

0
Parthiban.S

wenn eine der Antworten für Sie nicht funktioniert, versuchen Sie es bitte. Ich hoffe, dass es für Sie funktioniert.

 select: function(start, end, allDay) {                

              var check = formatDate(start.startStr);
              var today = formatDate(new Date());

              if(check < today)
              {
                 console.log('past');                     
              }
              else
              {                    
                console.log('future');
              }
}

und erstellen Sie auch die Funktion für das Datumsformat (siehe unten)

function formatDate(date) {
      var d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
  }

ich habe alle oben genannten Frage versucht, aber nicht für mich arbeiten

sie können dies versuchen, wenn eine andere Antwort für Sie funktioniert.

vielen Dank

0
dev_ramiz_1707