These: https://amzn.to/3FoGFQQ which I have mounted in my 20x20 dog pen. They light the whole thing up brightly, and I've tested them after about 11 hours and they were still bright. I also have these on my fence lining my driveway. https://amzn.to/3tskRRQ
Google Calendar is amazing, but the embed code is pretty old. They haven't updated it in many years.
Since everything is Mobile First today, I needed a way to display better on cell phones.
The following code does the following:
- Define a Responsive Cal types so that it uses 100% of the frame
- Define a DeskContent and a PhoneContent sizes (with a width of 768 being the switch point)
- Wrap all of it in the Responsive Call Div so it all resizes automatically
- Display the Month view of the calendar if it's a desktop resolution
- Display the Agenda view of the calendar if it's a mobile resolution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .responsiveCal { | |
| position: relative; padding-bottom: 75%; height: 0; overflow: hidden; | |
| } | |
| .responsiveCal iframe { | |
| position: absolute; top:0; left: 0; width: 100%; height: 100%; | |
| } | |
| @media all and (min-width: 768px) { | |
| .deskContent {display:block;} | |
| .phoneContent {display:none;} | |
| } | |
| @media all and (max-width: 767px) { | |
| .deskContent {display:none;} | |
| .phoneContent {display:block;} | |
| } | |
| </style> | |
| <div class="responsiveCal"> | |
| <div class="deskContent"><iframe src="https://calendar.google.com/calendar/embed?src=m7djtqdm8q7b43kol0nu295sko%40group.calendar.google.com&ctz=America%2FNew_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> | |
| </div> | |
| <div class="phoneContent"><iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=400&wkst=1&src=m7djtqdm8q7b43kol0nu295sko%40group.calendar.google.com&ctz=America%2FNew_York" style="border: 0" width="280" height="500" frameborder="0" scrolling="no"></iframe></div></div> |
I've formatted this so that it can be placed inline in your HTML file.
The first Embed should be your calendar code set to the Month view.
The second Embed should be your calendar code set to the Agenda view.
Works great; thanks for the help!
ReplyDeleteThank you so much! I was looking everywhere to find the correct code and multipe tries. Worked like a charm. Thank you again so much!
ReplyDeleteI just used this and it totally worked!! Thank you for taking the time to put this together!!!! Easy to work out.
ReplyDelete