Integrerer Google Kalender med dit websted
Google Kalender er et godt værktøj til at integrere i dit websted, og det er utrolig nemt at gøre ved hjælp af en iFrame.
Før jeg går ind i yderligere styling til kalenderen, går jeg hurtigt igennem, hvordan du integrerer din Google Kalender overalt i dit websted.
Du kan integrere en live kalender for andre at redigere sammen med dig eller redigere det privat, mens alle besøgende kan se dine opdateringer til begivenheder, som de sker.
Alt dette gøres med Googles varemærke enkelhed og brugervenlighed, men hvis du ønsker at bruge CSS til yderligere at style din kalender, skal du bruge lidt tid på at tilpasse prøve og fejl for at få det til din smag.
Først skal du vælge den kalender, som du ønsker at indlejre på dit websted under fanen 'Kalendere' på din indstillingsside.
IFrame-koden er tilgængelig på den følgende side, som vist nedenfor, men du kan yderligere tilpasse kalenderen i Google.
I den grænseflade, du får, kan du justere grundlæggende indstillinger, såsom titel, farver og hvilke elementer der skal vises. IFrame-koden ovenfor opdateres, når du ændrer indstillingerne. Når du er tilfreds med dig grundlæggende indstillinger, kan du droppe koden hvor som helst du vil have på dit websted, da det simpelthen er HTML.
Indstillingerne, som tilbydes af Google, er dog kun grundlæggende, og så det passer til den unikke stil på dit websted, vil du have lidt ekstra redigeringsevne. Desværre tilføjer CSS-regler til forældredokumentet ikke, selv når der tilføjes et vigtigt direktiv til hver regel. Årsagen til dette er to gange:
1. Værtsdokumentet og dokumentet i iFrame er helt adskilte. Dette synes en åbenbar erklæring at gøre, men ganske let at overse ikke desto mindre.
2. Dokumentet i iFrame er hostet på et separat domæne (Google.com), hvilket naturligvis betyder, at de fleste browsere vil blokere ethvert forsøg fra et andet domæne for at ændre indholdet i det pågældende dokument.
Hvis du kigger på iFrame-koden fra tidligere, kan du se kodens kodestykke, der ligner følgende:
https://www.google.com/calendar/embed?src="u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/LondonDet er her, hvor din iFrame peger på, og er placeringen af basisdokumentet for din kalender. Gå til webadressen og se kilden, ved hjælp af din browser eller ethvert foretrukket værktøj. Opret en ny side på dit websted med markeringen hentet fra URL-kilden, der er kun to linjer i koden, der skal opdateres:
Som du kan se indeholder begge tags relative relative webadresser, de skal prefixes med "https://www.google.com/calendar/" så de ser sådan ud:
Dette peger din iFrame på den nye side på dit domæne og ikke på Google, hvilket betyder, at det er (effektivt) hostet af dig. Det næste trin er at tilføje brugerdefinerede CSS-deklarationer til det nye dokument for at tilsidesætte elementer i Google-kalenderen.
Du skal oprette 2 nye PHP-filer, den første: custom_calendar.php er den egentlige kalenderfil og custom_calendar.css, en CSS-fil, der skal formatere kalenderen. Den første fil er den vigtigste, der gør det muligt; Den anden fil giver dig mulighed for at ændre nogen af CSS-egenskaberne. Med en lille CSS magi skal du kunne tilpasse det yderligere for at passe dit websted perfekt!
CSS
Nu har du din kalender helt oprettet, du vil ændre CSS til at matche dit websteds behov og sandsynligvis farveskema.
De klasser, du vil se på, er nedenfor.
For det første kan du, hvis du vil tilpasse dit farveskema, redigere kalenderens overordnede grænse / baggrundsfarve. For at gøre dette tilføjes .view-cap , .view-container-border til CSS og ændre baggrunden for din valgte farve.
.mv-dayname Dette er den klasse, der styrer navnene på dagene øverst i kalenderen. Du skal blot tilføje .mv-dayname til din custom_calendar.css og tilføj nogle variabler for at komme i gang.
Der er også en .mv-daynames-table som styrer cellen, at hvert navn på hver dag sidder i. Husk også at ændre farven på grænserne såvel som baggrunden selv.
.st-bg Dette er den klasse, der styrer baggrunden for hver af cellerne. Der er også .st-bg-today og .st-bg-next som styrer skærmen for den aktuelle dag og i morgen, så du kan skelne mellem dem.
.st-dtitleDenne klasse styrer datoerne for dagene i kalenderen. Også har medtaget Google
.st-dtitle-today og .st-dtitle-next
hvilke klasser styrer displayet af datoerne for den aktuelle dag og den næste dag. Disse klasser er nyttige til at fremhæve i dag og i morgen.
Også inden for .st-dtitle klasse der er .st-dtitle-nonmonth hvilket er den klasse, der styrer visning af teksten for datoer i en ny måned, der ikke er til stede i den aktuelle måned.
En anden vigtig klasse at huske, når du redigerer .st-bg og bruger .st-dtitle er .st-dtitle-down dette gælder for cellen nedenfor i dag; Når standard er der en grænse øverst, der matcher grænsen omkring den aktuelle dag.
Ved at ændre .st-bg , .st-bg-today , .st-dtitle og .st-dtitle-today Følgende eksempel blev oprettet.
Her er 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 indstillet til sort og .mv-dayname-table sat til hvid, oprettes følgende resultat.
Her er 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ænserne på cellerne kan fjernes ved at redigere grænsen til venstre, grænseregion og grænseklasse inden for CSS for hver af klasserne, som eksemplet nedenfor viser.
Her er koden:
.st-bg { border-left:none; }.st-dtitle { border:none; background:white; }Ved at bruge disse CSS-klasser kan du tilpasse din Google Kalender og integrere den fuldt ud med resten af dit websted.