Tweet
Live Demo: http://sedona.vbulletin.net/SedonaCalendar
1) First make sure you have a Google account and are signed into it. (If you have Gmail or use any Google services you already have a Google account.)
2) Go to Google Calendar - https://www.google.com/calendar/render
3) On the side expand "My Calendars" and choose Create new calendar.
4) Now fill in the details for the new calendar. Give it a name, a description, set a location if appropriate, choose the timezone you will be entering events into, and make sure you check the box to make sure it is public. When done click the Create Calendar button at the bottom.
5) You will be brought back to the main calendar page. Refresh/reload the page and then expand My Calendars and you'll see your new calendar listed- click on it.
6) If you still see tasks (events) you have saved from other calendars than click on Tasks and choose to Display only this Calendar- that will clear everything else from view.
7) If you want, take this time to add events to the calendar. You can always come back and add more later.
8) When you are ready go back to the side, and click on the drop down icon next to your calendar name and choose Calendar Settings from the menu.
9) On the next page find the Embed This Calendar section and click on the Customize the color... link.
10) Make the customizations you want including height and width. Make sure you click the Update HTML after making changes, then copy and the HTML text, you will need it for the next step. At this point we are done with Google Calendars for now.
Note- You may edit the HTML code and change the code that says width="800" to width="100%" this will look best on your VB5 forum. It is not an option you can otherwise choose.
At this point you have IFRAME code.
The next step is to embed the IFRAME code into a a new vBulletin powered page. Do not name the new page "Calendar" as this may conflict should a real calendar be added to VB5 someday- choose some other more specific name for your page.
To complete the process now proceed to this How To to add an IFRAME to your VB5 site: http://www.vbulletin.com/forum/blogs/joe-d/3932613-
Once you have completed your calendar you may be used to showing a list of upcoming events on your forum homepage. While not exactly the same you can instead show your Google Calendar Agenda in another Static HTML module you can put on your forum homepage or anywhere else on your site. The agenda is too wide to fit in the standard 300 pixel wide VB5 sidebar but it fits fine in the larger column as can be seen at http://sedona.vbulletin.net or at full width as can be seen below the main calendar at http://sedona.vbulletin.net/SedonaCalendar.
To make the Agenda repeat the process above beginning at Step 8. One the page where you choose the settings for your calendar make sure you change to the Agenda View rather than the Monthly view which is default. Set a more reasonable height for the Agenda, I use 300 pixels.
And that is it, follow the rest of the steps. When you get to the point you are going to create the new Static HTML module on your forum you will likely want to create it on your forum homepage. Drag the Static HTML module to the bottom of the existing modules or otherwise place it where you want.
Attached Files
