wake-up-neo.net

So sperren Sie Datumsangaben im Fullcalendar nach einem bestimmten Datum

Ich habe ein Datum in der Zukunft, das immer 30 Tage vor dem aktuellen Datum liegt. Es wird in einem Date-Objekt gespeichert. Ich habe das herausgefunden mit:

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

Mit dem jQuery-Plugin FullCalendar möchte ich alle Tage nach diesem Datum im Kalender mit einer anderen Hintergrundfarbe visuell ausblenden, sodass ein Benutzer weiß, dass er an diesen Tagen nicht auf sie klicken oder ein Ereignis erstellen kann.

Was ist der beste Weg, dies mit dem FullCalendar zu tun? Deaktivieren Sie möglicherweise alle Datumsangaben standardmäßig und aktivieren Sie sie nur für einen bestimmten Bereich (vom heutigen Datum bis zu 30 Tagen in der Zukunft).

Ich denke, ich kann einen deaktivierten Hintergrundstatus auf alle Zellen anwenden, indem ich folgenden Code verwendet:

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

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

Wie geht das?

9
user unknown

Verwenden Sie die Option dayRender , um außerhalb des Bereichs liegende Daten mit einer "deaktivierten" Klasse zu versehen.

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

Sie können auch die Methode viewRender event und die Methode gotoDate verwenden, um zu verhindern, dass Benutzer weiter als 30 Tage nach heute navigieren:

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

Wie wäre es mit dieser Lösung?

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..");
   }

}
6
dezman

dieser wählte den aktuellen Monatszeitraum

<?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();
            }
        }
        });
    });
1
Gio Valle

Für jemanden, der nach einer Lösung zum Definieren von min-display-date und max-display-date: sucht (für 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);
        }
    }
});
1
CIRCLE

zum Deaktivieren der Zelle bei Klick (Version 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
    // ....
}
0
altore

Fügen Sie einfach diesen Code in Fullcalendar hinzu:

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

                 var currentDate = moment(start).format('YYYY/MM/DD'));
                 alert(currentDate);
            } 
        }

Einfach und schnell. Genießen!

0
Wajid khan