Integrerar Google Kalender med din webbplats
Google Kalender är ett bra verktyg för att bädda in på din webbplats, och det är otroligt enkelt att göra med en iFrame.
Innan jag går in i ytterligare styling för kalendern, går jag snabbt igenom hur du bäddar in din Google Kalender var som helst på din webbplats.
Du kan bädda in en levande kalender för att andra kan redigera tillsammans med dig eller redigera den privata medan alla besökare kan se dina uppdateringar av händelser som de händer.
Allt detta görs med Googles varumärkes enkelhet och användarvänlighet, men om du vill använda CSS för att ytterligare ställa in din kalender måste du spendera lite tid på att klara av rättegång och fel för att få det som du vill.
Först måste du välja kalendern som du vill bädda in på din webbplats under fliken Kalendrar på din inställningssida.
IFrame-koden finns på följande sida, som visas nedan, men du kan ytterligare anpassa kalendern i Google.
I gränssnittet du får, kan du justera grundläggande inställningar, till exempel titel, färger och vilka element som ska visas. IFrame-koden ovan uppdateras när du ändrar inställningarna. När du väl är nöjd med dina grundläggande inställningar kan du släppa koden överallt du vill ha på din webbplats, eftersom det bara är HTML.
Inställningarna som erbjuds av Google är dock bara grundläggande, och så att det passar den unika stilen på din webbplats, vill du ha lite extra redigeringseffekt. Tyvärr kan inte CSS-regler läggas till förlagsdokumentet, även om man lägger till ett viktigt direktiv för varje regel. Anledningen till detta är dubbelt:
1. Värddokumentet och dokumentet i iFrame är helt separata. Detta verkar vara ett uppenbart uttalande för att göra men ganska lätt att förbise, trots allt.
2. Dokumentet i iFrame är värd på en separat domän (Google.com) vilket naturligtvis innebär att de flesta webbläsare blockerar eventuella försök från en annan domän för att ändra innehållet i det dokumentet.
Om du tittar på iFrame-koden från tidigare kan du se kodens kod, som liknar följande:
https://www.google.com/calendar/embed?src="u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/LondonDet här är var din iFrame pekar på, och är platsen för basdokumentet för din kalender. Gå till webbadressen och visa källan, med din webbläsare eller något föredraget verktyg. Skapa en ny sida på din webbplats med markeringen som hämtats från URL-källan, det finns bara två rader i koden som behöver uppdateras:
Som du kan se innehåller båda taggarna relativa webbadresser, de måste prefixa med "https://www.google.com/calendar/" så de ser så här ut:
Detta pekar din iFrame till den nya sidan på din domän och inte Googles, vilket betyder att den (effektivt) är värd för dig. Nästa steg är att lägga till anpassade CSS-deklarationer till det nya dokumentet för att åsidosätta element i Google-kalendern.
Du måste skapa 2 nya PHP-filer, den första: custom_calendar.php är den faktiska kalenderfilen och custom_calendar.css, en CSS-fil för att ställa in kalendern. Den första filen är den viktigaste som gör det möjligt. Den andra filen tillåter dig att ändra någon av CSS-egenskaperna. Med lite CSS magi borde du kunna anpassa den ytterligare för att passa din webbplats perfekt!
CSS
Nu har du din kalender helt konfigurerad, du vill ändra CSS för att matcha webbplatsens behov och förmodligen färgschema.
De klasser du vill titta på är nedan.
För det första kan du, för att passa ditt färgschema, önska att redigera kalenderns övergripande gräns / bakgrundsfärg. För att göra detta lägg till .view-cap , .view-container-border till CSS och ändra bakgrunden till din valda färg.
.mv-dayname Det här är klassen som kontrollerar namnen på dagarna högst upp i kalendern. Lägg bara till .mv-dayname till din custom_calendar.css och lägg till några variabler för att komma igång.
Det finns även en .mv-daynames-table som styr cellen som varje namn på varje dag sitter i. Kom ihåg att också ändra gränsernas färg samt bakgrunden själv.
.st-bg Det här är den klass som styr bakgrunden för vart och ett av cellerna. Det finns också .st-bg-today och .st-bg-next som styr skärmen för aktuell dag och imorgon så att du kan skilja mellan dem.
.st-dtitleDenna klass styr datumen för dagarna i kalendern. Dessutom har Google inkluderat
.st-dtitle-today och .st-dtitle-next
vilka klasser som kontrollerar visning av datum för aktuell dag respektive nästa dag. Dessa klasser är användbara för att markera idag och imorgon.
Också inom .st-dtitle klass det finns .st-dtitle-nonmonth vilket är klassen som styr textens visning för datum i en ny månad som inte är närvarande under den aktuella månaden.
En annan viktig klass att komma ihåg när du redigerar .st-bg och använda .st-dtitle är .st-dtitle-down detta tillämpas på cellen nedanför idag; När standard har detta en kant längst upp som matchar gränsen som omger den aktuella dagen.
Genom att ändra .st-bg , .st-bg-today , .st-dtitle och .st-dtitle-today Följande exempel skapades.
Här är CSS:
.st-bg { background:black; }.st-bg-today { background:yellow; border-left:1px solid yellow; border-right:1px solid yellow; }.st-dtitle { background:white; } Med .view-cap , .view-container-border satt till svart och .mv-dayname-table satt till vit skapas följande resultat.
Här är CSS-koden:
.view-cap, .view-container-border { background-color:black; }.mv-daynames-table { color:white; background:black; }.mv-event-container { border-top:1px solid black; }Gränserna på cellerna kan avlägsnas genom att redigera gränserna till vänster, gräns och högra gränser inom CSS för varje klass, vilket exemplet nedan visar.
Här är koden:
.st-bg { border-left:none; }.st-dtitle { border:none; background:white; }Genom att använda dessa CSS-klasser kan du anpassa din Google Kalender och integrera den helt med resten av din webbplats.