Announcement

Collapse
No announcement yet.

How to add a Google Calendar to VB5

Collapse
X
Collapse

  • How to add a Google Calendar to VB5

    This will show you how to add a Google Calendar to your VB5 Connect or vBCloud site. The calendar will be on a custom page in an IFRAME.

    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
    Last edited by Joe D.; Tue 1st Apr '14, 4:22am.
      Posting comments is disabled.

    About the Author

    Collapse

    Joe D. The details of my life are quite inconsequential... Find out more about Joe D.

    Article Tags

    Collapse

    advanced (5) android (2) api (29) array (17) beginner (17) blog (4) calendar (2) center (1) cms (2) forum (3) forums (4) https (1) Intermediate (7) iphone (3) mapi (30) methods (10) mobile (34) post (1) security (2) style (2) threadbits (1) threads (4) tutorial (1) vb5howto (5) vBulletin (5)

    Latest Articles

    Collapse

    • The Basic Anatomy of a vBulletin Page
      Wayne Luke
      vBulletin 5's user output is created using a system of pages that are customizable by the site administrator. This system is called Site Builder. By breaking the system down into pages, a lot of control is given to the system administrator. By using Site Builder, you can create a unique site without any knowledge of HTML or CSS.

      vBulletin's pages are created using layers built upon a grid layout. Each page starts with a layout which defines the content areas of the page. Layouts define...
      Mon 11th Sep '17, 9:55am
    • Enabling Push Notifications in vBulletin 5.3.2 and Mobile Suite 1.16
      Wayne Luke
      vBulletin Mobile Suite 1.16 includes functionality for Push Notifications. One of the requirements to add this functionality is that you must be running vBulletin 5.3.2 Connect on your site and create a project with Google's Firebase Cloud Messaging (FCM) platform. The steps below will walk you through the process of enabling this functionality in vBulletin and in your Mobile Apps.

      Add a project to your Firebase account






      Setup Push Notifications...
      Thu 27th Jul '17, 9:56am
    • Enabling Two-Factor Authentication
      Wayne Luke
      vBulletin 5.3.0 and higher will allow site owners to enable Two-Factor Authentication for Administrator and Moderator functionality. This is an extra layer of security provided to make sure your user data remains as safe as possible. Two-Factor Authentication works in conjunction with an app on the user's smartphone, tablet, or computer. These apps provide a security token that lasts a limited time before expiring. The security token is created using industry standard algorithms and a unique string...
      Tue 4th Apr '17, 9:38am
    • How to moderate the posts of new users only
      Wayne Luke
      To help combat spam, many users opt to have new user’s posts moderated until they’ve made a specific number of posts. This allows the Admin/Moderator team to keep potentially malicious posts out of the public eye until a user has effectively passed a ‘probationary period’ as a member of the site.

      In order to do this, you will need to create a custom usergroup and a promotion.

      Creating a Custom Usergroup
      First, you need to setup the usergroup for your non-Moderated...
      Wed 22nd Feb '17, 10:13am
    • Rebuilding the Sphinx index
      Wayne Luke
      From time to time, we will need to update the indexing schema for the Sphinx server. In order for this fix to take effect, you will need to update the sphinx schema for the index. Follow these steps to rebuild your Sphinx Search Schema.
      1. Stop the Sphinx service on your server.
      2. Replace your existing Sphinx configuration file (vbulletin-sphinx.php) with the one provided in the current version of vBulletin 5 Connect. You can find this file in the do_not_upload directory.
      3. Update the file as provided
      ...
      Fri 3rd Feb '17, 2:01pm
    • Using the Search JSON
      Dominic
      Using the advanced editor you can create powerful search modules. Following you find possible filters / parameters for using within these modules:
      The search JSON parameter has the following format:

      :
      { "filter": <value>, "filter": <value>, ... }
      <value> may be any valid string, number or JSON structure and will be interpreted by the specified filter. Filters not listed below are ignored.

      Filters

      The valid filters...
      Wed 28th Jan '15, 1:51pm
    Working...
    X