Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

JS Animated. Wie arbeitet man mit FullCalendar Plugin

Dieses Tutorial zeigt Ihnen, wie man mit einem FullCalendar Plugin, das sich in JS animierte Vorlagen befindet, arbeiten kann.

JS Animated. Wie arbeitet man mit FullCalendar Plugin

FullCalendar ist ein jQueryPlugin, das eine Full-Size-, Drag & Drop Kalender bietet. Es nutzt AJAX, um Ereignisse abzurufen on-the-fly für jeden Monat und einfach konfiguriert werden.

Grundlegende Verwendung

Wenn Ihre Vorlage solche Kalender hat, bedeutet dies, dass dieses Plugin bereits mit JavaScript und CSS Dateien, einschließlich FullCalendar stylesheet sowie FullCalendar und jQuery JS Dateien , im <head> Bereich ihrer Seite eingebettet wird:

<link rel="stylesheet" href="css/fullcalendar.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

Neben den Abhängigkeiten muss Ihre Webseite den JavaScript Code haben, der die Kalender initialisiert. Wenn die Seite mit der Funktion jQuery’s $(document).ready, die im <script>-Tag im Head Ihrer Seite gekapselt wird, initialisiert worden ist, soll man dieser Code nach der Seite durchführen:

<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
</script>

wo:

  1. Die Methode new Date() erstellt ein neues Datum mit dem aktuellen Datum und der Uhrzeit
  2. Die Methode getDate() zeigt den Tag des Monats (von 1 bis 31) für das bestimmte Datum
  3. Die Methode getMonth() zeigt den Monat (von 0 bis 11) für das bestimmte Datum je nach Zeitzone (Januar ist 0, Februar ist 1, und so weiter)
  4. Die Methode getFullYear() zeigt den Jahr (vier Ziffern) vom bestimmten Datum (z.B.: 2013).

Den anderen Teil vom Code sollte so aussehen:

		$('#calendar').fullCalendar({
			editable: true,
			weekMode: 'liquid',
			url:'#',

  1. editable – bestimmt, ob man die Ereignisse im Kalender verändern kann
  2. weekMode – legt fest, wie viele Wochen in der Monatsansicht angezeigt werden sollen. Hier bestimmt man auch die Höhe der Woche. Es gibt solche Optionen:
  • ‘fixed’-Der Kalender wird immer 6 Wochen hohe sein. Die Höhe wird immer derselbe, wie man in height, contentHeight, oderr aspectRatio festgelegt hat.
  • ‘liquid’ – Der Kalender wird entweder 4,5 oder 6 Wochen (das hängt je nach dem Monat). Die Höhe den Wochen wird strecken, um die verfügbare Höhe, die durch height, contentHeight, oder aspectRatio bestimmt wird, auszufüllen.
  • ‘variable’– Der Kalender wird entweder 4,5 oder 6 Wochen (das hängt je nach dem Monat). Jede Woche wird dieselbe konstante Höhe haben, und das bedeutet, dass die Höhe des Kalenders sich von Monat zu Monat verändert.
  • url:’#’, – FullCalendar kann Ereignisse aus veröffentlichtem Google-Kalenderanzeigen. Es kann wie ein Backend dienen, die Ereignisdaten bearbeitet und persistent speichert (eine Funktion, die jetzt dem FullCalendar fehlt).

    Mehr Information über die allgemeinen Darstellung erhalten Sie hier http://arshaw.com/fullcalendar/docs/display/

    Als nächstes kommt so genanntes Ereignisquelle-Objekt. Ein "event source" (Ereignisquelle) ist etwas, das FullCalendar mit Veranstaltungsdaten bietet. Seit Version 1.5 können die Ereignisobjekte mit ihnen verbundenen "Optionen" haben:

    
    events: [
    				{
    					title: 'Praent vestibulum',
    					start: new Date(y, m, 1, 9, 00),
    					end: new Date(y, m, 1, 10, 00),
    					allDay: false
    				},
    				{
    					title: 'Vestibulum iaculis lacinia',
    					start: new Date(y, m, 2, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 4, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Aliquam erat volpat. Duis ac turpis',
    					start: new Date(y, m, 9, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Donec in velit vel ipsum',
    					start: new Date(y, m, 10, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Praent vestibulum',
    					start: new Date(y, m, 13, 9, 00),
    					allDay: false
    				},
    				{
    					title: 'Vestibulum iaculis lacinia',
    					start: new Date(y, m, 15, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 17, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'nteger rutrum ante eu lacusi',
    					start: new Date(y, m, 18, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 19, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 23, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'nteger rutrum ante eu lacus',
    					start: new Date(y, m, 24, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 27, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Integer rutrum ante eu lacus',
    					start: new Date(y, m, 28, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Vestibulum iaculis lacinia',
    					start: new Date(y, m, 29, 16, 00),
    					allDay: false
    				},
    				{
    					title: 'Praent vestibulum',
    					start: new Date(y, m, 30, 9, 00),
    					allDay: false
    				}
    			]
    		});
    		
    	});
        </script>
    

    Um neue Ereignisse anzuzeigen, bearbeiten Sie die bestehende Standard JavaScript Objekte, die von FullCalender verwendet werden, um die Information über eine Erinnerung zu speichern. Man kann sie kopieren, um mehr Ereignisse hinzufügen. Der unten angegebene Code ist ein Beispiel des Teils von Ihrem Code, der man bearbeiten oder kopieren kann:

    
    				{
    					title: 'Praent vestibulum',
    					start: new Date(y, m, 1, 9, 00),
    					end: new Date(y, m, 1, 10, 00),
    					allDay: false
    				},
                    
    

    Betrachten wir die Eigenschaften nun etwas näher:

    1. title (String. Required) – Der Text auf einem Element vom Ereignis. Man kann ihn, zum Beispiel, an ‘A new event’ verändern
    2. start (Date. Required) –Das Datum/ die Zeit vom Ereignis Anfang. Wenn Sie einen neuen Termin, der, zum Beispiel, am 05.23 (im laufenden Jahr) um 4.30 stattfindet, hinzufügen möchten, sollte die Zeile so verändert werden: start: new Date(y, m, 23, 16, 30);
    3. allDay (true oder false. Optional) – legt fest, ob das Ereignis zu einer bestimmten Uhrzeit entsteht. Diese Eigenschaft legt fest, ob die Uhrzeit eines Ereignisses angezeigt werden soll. Wenn Sie bei Bestimmung von Event Objects (Ereignisobjekte) für Ereignisse oder eventSources diese Eigenschaft weglassen, wird diese Eigenschaft allDayDefault geerbt, die normalerweiser auf „true“ steht.
    4. end (Date. Optional) – Das Beendigungsdatum-/ -zeitpunkt vom Ereignis.
    • Wenn der Termin den ganzen Tag dauert … ist das Enddatum inklusive. Dies bedeutet, dass der Termin, der am 10.Nov startet und am 12.November sich beendet, 3 Tagen auf dem Kalender dauert wird.
    • Wenn der Termin nicht den ganzen Tag dauert … ist das Enddatum exklusive. Dies bedeutet, dass Ihre Veranstaltung um Mitternacht zu Ende ist und am nächsten Tag nicht angezeigt wird.

    Hier finden Sie die Information über andere Ereignisse, die Sie nutzen können: http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

    Den Code soll man auf ein Element mit der ID "calendar" in den Körper Ihrer Seite setzen. Den Kalender platziert man innerhalb dieses DIVs:

    Dies ermöglicht die Erstellung von einem Monatskalender, wo sich einige zufällige Ereignisse befinden.

    Einstellungen

    Meisten Dokumentationen vom FullCalendar beschreiben die Optionen, die das Aussehen oder Verhalten des Kalenders beeinflussen. Normalerweise werden Einstellungen eingerichtet, wenn man den Kalender initialisiert. Wie zum Beispiel:

    $('#calendar').fullCalendar({
    weekends: false // will hide Saturdays and Sundays
    });
    

    Callbacks

    Callbacks sind eine Art “Gefällt mir”-Option, aber sie sind die Funktionen, die sich erscheinen wenn etwas Besonderes passiert. Im unten angegebenen Beispiel erscheint sich eine Alertbox nun wenn ein Benutzer auf einen Tag klickt:

    $('#calendar').fullCalendar({
    
        dayClick: function() { 
    
            alert('a day has been clicked!');
    
        }
    
    });
    

    Um mehr Information über das FullCalemdar Plugin zu erhalten, besuchen Sie http://arshaw.com/fullcalendar/. Hier kann man die neuesten Versionen dieses Plugins hochladen sowie die Unterstützung von Hersteller bekommen.

    Sehen Sie jetzt das ausführliche Video-Tutorial an:

    JS Animated. Wie arbeitet man mit FullCalendar Plugin
  •  
    Online-Chat
    We help you to choose the right product.
    Chat starten