Ich möchte herausfinden, wie ich den Vollkalender auf einen Zeitraum von drei Monaten begrenzen kann und für den Rest der Monate wie für einen Datumsauswahlpunkt deaktiviert werden kann.
z. Der aktuelle Monat ist Mai 2010, ich möchte nur, dass der Kalender Mai und April (beim Klicken auf den vorherigen Monat) und Jun (beim Klicken auf den nächsten Monat) anzeigt, der Rest der Monate wird von der Benutzerauswahl abgewählt.
Ich bin mir nicht sicher, ob ich es verpasst habe, einen Teil der Vollkalenderdokumentation zu lesen. Freundlicher Hinweis. Danke.
Ich habe das nicht getan, also bin ich mir nicht sicher, ob das funktioniert. Aber Sie könnten zumindest versuchen und sehen.
Ich würde wahrscheinlich auf die Anpassung des viewDisplay Callbacks achten. Es erhält ein Objekt anzeigen , das unter anderem die Eigenschaft start enthält. Sie können die Eigenschaften des View-Objekts verwenden, um zu testen, welche Ansicht und welches Datum der Benutzer betrachtet, und dann Aktionen ausführen, die darauf basieren.
Ich bin nicht sicher, ob Fullcalendar auf diese Weise funktioniert, aber einige Plugins werden eine Aktion abbrechen, wenn Sie return false von einem Callback verwenden. Sie können also das start -Datum überprüfen, und wenn es außerhalb Ihrer akzeptablen Monate liegt, dann return false , um die Aktion abzubrechen.
Wenn das nicht funktioniert, können Sie innerhalb von viewDisplay erneut das start date überprüfen. Wenn der nächste Monat oder der vorherige Monat außerhalb des zulässigen Bereichs liegt, können Sie die jQuery-Selektoren verwenden, um die Schaltflächen für die vorherigen / nächsten Schaltflächen zu übernehmen und sie zu deaktivieren. Auf diese Weise kann der Benutzer nicht in einen Out of Range-Monat wechseln.
Wenn sich der Benutzer in einem Monat außerhalb des gültigen Bereichs befindet, können Sie auch sofort den Befehl gotoDate eingeben, um zu einem gültigen Monat zu wechseln.
Es gibt viele Möglichkeiten, die Logik zu machen und die Mathematik zu datieren, aber ich denke, Sie könnten etwas auf diese Weise erhalten.
Ich war in einer ähnlichen Situation: Ich habe ein Programm von Ereignissen und wollte den Vollkalender auf den Datumsbereich für die Ereignisse (z. B. 12 Wochen) begrenzen. Wenn also heute in Woche 6 ist, zeigt der Kalender nur die Daten von Woche 1 bis 12 an, wenn der Benutzer auf "Weiter" oder "Zurück" klickt. Ich schaute auf die Änderung von fullcalendar.js, aber ich habe keine Zeit, um von meiner Projekt-Timeline zu umleiten, um dies zu tun. Um dies zu umgehen, habe ich Folgendes gemacht:
Fügen Sie in Ihrer benutzerdefinierten jQuery-Datei .js die fullCalendar-Methode für dayClick hinzu, die das Datum als Variable akzeptiert:
if (+ Datum & lt; + jQuery.startDate || + Datum & gt; jQuery.endDate) {
var $ date_out_of_range_dialog = jQuery ('') .html ('
Leider liegt das ausgewählte Datum außerhalb des Datumsbereichs für das aktuelle Programm.
Startdatum: '+ (jQuery.startDate.getMonth () + 1) +' / '+ jQuery.startDate.getDate () +' / '+ jQuery.startDate.getFullYear () + '
Enddatum: '+ (jQuery.endDate.getMonth () + 1) +' / '+ jQuery.endDate.getDate () +' / '+ jQuery.endDate.getFullYear () + '
') .Dialog({ autoOpen: falsch, modal: stimmt, Titel: "Datum außerhalb der Reichweite", Breite: 600, Tasten: { "Ok": Funktion () { jQuery (this) .dialog ("close"); } } })$ date_out_of_range_dialog.dialog ('open');
} else {
// Machen Sie etwas anderes wie das Ereignis view / add / delete für diesen Tag im Bereich.
}
Die .dialog-Methode zum Öffnen des Dialogfelds stammt von mootools, aber in jQuery kann ähnliches verwendet werden. Ich habe jQuery vorangestellt. um startDate und endDate zu starten, damit die vars über meine .js-Datei verfügbar sind.
Hier ist der Code für den Datepicker, um das Datum auszuwählen und auf FullCalendar auszuwählen:
jQuery ('# datepicker_for_calendar'). datepicker ({ Standarddatum: jQuery.startDate, minDatum: jQuery.startDatum, maxDate: jQuery.endDate, Inline: stimmt, showButtonPanel: stimmt, onSelect: function (dateText, inst) { var d = neues Datum (dateText); jQuery ('# Kalender'). fullCalendar ('gotoDate', d); selectedDate = d; } });
Ich bin dran, eine Verbesserung hinzuzufügen. Dies basiert jedoch auf lewsid answer , das die notwendigen Datums-Mathe- und Vollkalender-Selektoren enthält, um es abzusetzen, aber mit einer Wendung.
Ich habe gerade zwei if's hinzugefügt, bei denen Sie wählen können, ob Sie eine oder beide oder keine verwenden möchten. Der Zweck von ihnen ist es, tagespezifisch zu sein, nur weil du zum Beispiel "2 Monate" vor und zurück erlaubst, wenn du auf einer Woche bist, kann das "Heute" + 2 Monate deaktiviert sein, und auch, nachdem du dich vorwärts bewegt hast könnte blockiert sein, zu "Today" zurückzukehren.
%Vor% Ich mochte die Antwort von lewsid sehr, aber es hat einige Probleme. Zunächst einmal ist der view.start ein Moment, kein Datum, also existiert getMonth() nicht. Zweitens ist das start einer Ansicht nur der erste sichtbare Tag in diesem Monat, was bedeutet, dass das Datum vom vorherigen Monat sein kann. Um dies zu umgehen, verwenden Sie die Eigenschaft intervalStart .
Hier ist meine Implementierung, um den Kalender das aktuelle Jahr aufzulisten.
%Vor%Tags und Links jquery fullcalendar