How to Create a Website With a Calendar

Many times web authors need to place a calendar on their website to provide current information on events, deadlines, meetings and major milestones. There are a number of free and low-cost online calendar services available that can be customized for most required uses by web developers such as Calendar Pad, Connect Daily Calendar, and Hyper Office Calendar. Google Calendar is another example of a free calendar service online. Through the use of a calendar service such as Google's, the developer can focus greater time on the content of the calendar and remainder of the website vice on the HTML, JavaScript, or PHP code required to author a web-based calendar from scratch.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Google Gmail account

1. 
   Google Calendar with Events Populated

   Create a Google Gmail account at http://gmail.com to access Google's Calendar services. If you already have a Gmail account, log in to the account.

2. 
   Creating Google Calendar Events

   Input events into your Calendar on Google Calendar prior to publishing to your website. To accomplish this task, select the 'Create Calendar Event' menu item on the left side of the calendar and fill in the applicable information for the event (Date, Time, Description).

3. Enable guests to your website to edit desired Calendar Events Entered in the security section of the event creator if you desire input to the calendar from visitors. If not, ensure this option is not selected in order to keep the calendar from being modified by users.

4. Request the HTML code to embed the Google Calendar in a website. Select Settings, then Calendars. If there is more than one calendar present, select the one desired to use on your website.

5. Before copying the HTML code to use in the web page, configure specific calendar settings - such as the size, look and feel, and time zone - and apply through menu selections on the options page.

6. Copy the HTML calendar code provided by Google on the display screen to incorporate into the desired web-page code.

7. 

   Copy and paste the HTML source code provided by Google into the web page. Source code for this example:
   <iframe src="http://www.google.com/calendar/embed?src=javanx3d%40gmail.com&ctz=America/Chicago" style="border: 0" width="800" height="600" frameborder="0" scrolling="no">
   
   </iframe>

8. Change calendar settings in the web author's Gmail configuration section if a different look is desired once published to the web.

Tips & Warnings

• Test the look of the default size of the Google Calendar before final publishing to the web. Google Calendar can sync to Microsoft Outlook appointments through the options menu, which will prevent rework for posting calendar events to the web if your organization uses Microsoft Outlook.
• Ensure you have permission to post company events to the web if syncing your Google calendar to Outlook and posting to the web!

Resources

• Tutorial by C4LPT on Sharing Google Calendars on the Web.
• Google Calendar's Homepage
• Hyper Office Web-based Calendar Resource