JS Animated. Wie arbeitet man mit FullCalendar Plugin

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: