Rahmenbedingungen
HTML-Version:
zusätzliche Techniken:
Einschränkungen:
Browser & Betriebssystem: aktueller Chrome Browser
Editor: nodepad++
Problembeschreibung
Fehlermeldung/-beschreibung: Uhrzeiten von Terminen vom Google Kalender werden im FullCalendar falsch angezeigt
bisherige Lösungsversuche: Eingabe versuche der Timezone Parameter
Code:
Hallo Foren Gemeinde,
ich hoffe ich finde hier antworten. Ich nutze zur Haus Automatisierung die Software IP Symcon die auf PHP basiert und habe ein passendes Modul installiert um den Google Kalender auszulesen und in meine Visualisierung zu integrieren.
Es geht dabei um den:
und das passende
Habe soweit bei allem durch geblickt aber bei der Timezone bzw. das Anzeigen der richtigen Uhrzeit funktioniert einfach nicht. Ich habe schon einige Parameter probiert weiß aber nicht so recht wo der hin gehört.
Hier ist der gesamte Code den ich angelegt habe:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' />
<link href='https://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css' rel='stylesheet' />
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
weekends: true, // Samstag und Sonntag anzeigen
themeSystem: 'jquery-ui', // Theme System ändern: bootstrap3,bootstrap4,jquery-ui,standard
defaultView: 'month', // legt fest welche Ansicht beim öffnen zuerst gezeigt wird
locale: 'de', // Sprache auswählen für die Wochen/Monatsnamen
weekNumbers: true, // Anzeige Wochennummer
weekNumbersWithinDays: false, // Anzeige Wochennummer in der Tagspalte
weekNumberTitle: 'Woche ', // Anzeigenamen der Woche Beispiel: Woche 47 oder W 47
eventLimitText: 'weitere', // Zeichenfolge für die verdeckten Events
firstDay: '1', // Der Tag an dem jede Woche beginnt: Sunday=0, Monday=1, Tuesday=2, usw.
displayEventTime: true, // Gibt an, ob der Text für das Datum / die Uhrzeit eines Ereignisses angezeigt werden soll oder nicht
displayEventEnd: true, // Gibt an, ob die Endzeit eines Ereignisses angezeigt werden soll oder nicht
navLinks: true, // Datum oder Wochentag klickbar bzw. auswählbar zur Tag Ansicht
fixedWeekCount: false, // legt fest das nur die Wochen angezeigt werden, die ein Monat hat -> true: immer 6 Wochen / false: unabhängig vom Monat
showNonCurrentDates: true, // legt fest ob Termine angezeigt werden bei den Tagen vorher oder nachher eines Monats. Beispiel: Wenn der erste eines Monats auf Mittwoch fällt, werden Mon + Di die Termine angezeigt
timezoneParam: false,
views: { // Seperate Einstellungen der einzelnen Ansichten
basic: {
// options apply to basicWeek and basicDay views
titleFormat: 'MMMM YYYY', // Titel Ansicht von Tag, Monat, Jahr
columnHeaderFormat: 'ddd D/M', // Ansicht von Tag, Monat in der Wochenübersicht
eventLimit: '6' // Anzahl der Events die angezeigt werden sollen -> false zeigt alle Events an
},
agenda: {
// options apply to agendaWeek and agendaDay views
},
week: {
// options apply to basicWeek and agendaWeek views
titleFormat: 'D. MMMM YYYY', // Ansicht von Tag, Monat, Jahr
columnHeaderFormat: 'ddd D/M' // Ansicht von Tag, Monat in der Wochenübersicht
},
day: {
// options apply to basicDay and agendaDay views
titleFormat: 'D. MMMM YYYY' // Ansicht von Tag, Monat, Jahr
}
},
header: { // Ansicht Kopfzeile
left: 'month,agendaWeek,agendaDay,listMonth,basicWeek', // Ansicht und Auswahl des Kalenders
center: 'title',
right: 'prevYear,prev,next,nextYear'
},
footer: { // Ansicht Fußzeile
left: 'month,agendaWeek,agendaDay,listMonth,basicWeek', // Ansicht und Auswahl des Kalenders
center: 'title',
right: 'custom1,custom2,next,nextYear'
},
buttonText: { // Button Text umbenennung
today: 'Heute',
month: 'Monat',
week: 'Woche',
day: 'Tag',
list: 'Liste',
basicDay: 'Basis Tag',
basicWeek: 'Basis Woche',
listDay: 'Liste Tag',
listWeek: 'Liste Woche',
listMonth: 'Liste Monat',
listYear: 'Liste Jahr',
agendaDay: 'Agenda Tag',
agendaWeek: 'Agenda Woche',
timelineDay: 'Timeline Tag',
timelineWeek: 'Timeline Woche',
timelineMonth: 'Timeline Monat',
timelineYear: 'Timeline Jahr'
},
buttonIcons: { // Ansicht Button Icons / Pfeile für Standard Ansicht wenn kein Thema gewählt ist
prev: 'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
},
themeButtonIcons: { // Ansicht Button Icons / Pfeile für jQuery-ui Theme
prev: 'circle-triangle-w',
next: 'circle-triangle-e',
prevYear: 'seek-prev',
nextYear: 'seek-next'
},
bootstrapGlyphicons: { // Ansicht Button Icons für Bootstrap3 Theme / Liste Glyphicons: https://getbootstrap.com/docs/3.3/components/#glyphicons
close: 'glyphicon-remove',
prev: 'glyphicon-chevron-left',
next: 'glyphicon-chevron-right',
prevYear: 'glyphicon-backward',
nextYear: 'glyphicon-forward'
},
bootstrapFontAwesome: { // Ansicht Button Icons für Bootstrap4 Theme / Liste Awesome Glyphicons: https://fontawesome.com/icons?d=gallery
close: 'fa-times',
prev: 'fa-chevron-left',
next: 'fa-chevron-right',
prevYear: 'fa-angle-double-left',
nextYear: 'fa-angle-double-right'
},
customButtons: { // Eigene Button Erstellung
custom1: {
text: 'custom 1',
click: function() {
alert('clicked custom button 1!');
}
},
custom2: {
text: 'custom 2',
click: function() {
alert('clicked custom button 2!');
}
}
},
eventSources: [
{
url: 'feed.php',
data: {
InstanceID: 17299 // Reader Frühschicht
},
color: '#ffd700', // <- frei konfigurierbar
textColor: 'white', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}, // hier kann auch Schluss sein falls nur ein einziger Feed angezeigt werden soll
{
url: 'feed.php',
data: {
InstanceID: 59134 // Reader Mittagschicht
},
color: 'red', // <- frei konfigurierbar
textColor: 'white', // <- frei konfigurierbar
timezone: 'local',
error: function() {
$('#script-warning').show();
}
}, // hier können noch weitere Feeds angehängt werden
{
url: 'feed.php',
data: {
InstanceID: 48984 // Reader Nachtschicht
},
color: 'green', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
},
{
url: 'feed.php',
data: {
InstanceID: 10453 // Reader Freie Tage
},
color: '#1874cd', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
},
{
url: 'feed.php',
data: {
InstanceID: 41085 // Müllabfuhr Termine
},
color: '#008B8B', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
},
{
url: 'feed.php',
data: {
InstanceID: 46733 // <- ändern!
},
color: 'green', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}
]
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>Hier ein paar Screenshots:
Google Kalender
html-seminar.de/woltlab/attachment/1682/
Integration in meine Visualisierung:
html-seminar.de/woltlab/attachment/1683/
Desweiteren werden manchmal falsche Einträge angezeigt bzw. zwei mal die gleichen.
html-seminar.de/woltlab/attachment/1684/
Was ich auch noch nicht heraus gefunden habe, das die vergangenen Termine angezeigt bleiben, wie das z.B. im Google Kalender der Fall ist.
Ich hoffe es kann mir hier im 'Forum jemand einen Tipp geben.
Viele Grüße
Stefan