How to Create a Widget Calendar for Web Site
A widget is a small piece of software or web-based code (e.g. JavaScript) designed to run a simple program. Typically, widgets are used by webmasters to add a tool or utility to their website in order to increase their website's usefulness to their visitors. Such a widget accesses an external server and serves the data to the visitor using a single piece of embedded code, allowing the webmaster to have a continually-updated website without editing actual code. Learn how to create a widget calendar for a web site to help your audience keep track of important dates.
- Difficulty:
- Moderate
Instructions
-
Create a Calendar Widget Using Javascript
-
1
Open your FTP client (e.g. Fetch on a Windows PC or Cyberduck on a Mac). Connect to your website server.
-
2
Download a JavaScript file to begin building a widget calendar for your website. Various websites can assist you by automating the process with pre-built JavaScript files. One of the easiest is Simple Calendar Widget (JavaScript download link in the Resources section).
-
3
Upload the JavaScript file to your website's root directory using your FTP client.
-
4
Create a new text file on your computer desktop. Name it "scwblank.html". The file itself should be blank. Upload it to the same directory as the JavaScript file you downloaded in Step 2. This blank file is necessary to prevent JavaScript errors if you load the calendar widget in an iFrame and are using older versions of the Microsoft Internet Explorer web browser.
-
5
Open the HTML file in which you wish to display the calendar widget. Locate a point in the page where you want the calendar to appear. Insert the JavaScript by typing the following code: <script type='text/JavaScript' src='<<LOCATION>>'></script>.
-
6
Change "LOCATION" in the code in Step 5 to the specific location of the JavaScript file (e.g. "home/scw.js").
-
7
Save the HTML file and refresh the page in your browser to view the result. You will now see a small calendar widget displayed on your website.
Create a Widget Calendar Using Google Calendar
-
1
Log in to your Google account (link in the Resources section).
-
2
Click "Calendar" in the top of the page.
-
3
Click "Create" in the left-hand portion of the menu that reads "My Calendars." Edit your calendar by changing its colors and inserting events on important dates.
-
4
Click the arrow next to the name of the calendar and select "Calendar Settings." A small window will appear with several lines of code displayed.
-
5
Select and copy the code by pressing "CTRL+C" on your keyboard.
-
6
Paste the code into the area in your website in which you wish to display the widget calendar. Save the HTML and refresh the website to see the changes. Your visitors will now see the miniature calendar widget every time they visit your website.
-
1
Tips & Warnings
Use a calendar to remind your visitors of important dates, such as contests or deadlines for projects you are running.
