With the release of Web Calendar 5.0, the process of adding your calendar to your website is a wee bit different than it used to be. This is because the latest version of Web Calendar no longer uses Flash — instead, it's powered by CSS, HTML, and JavaScript, which are far more stable, compatible, and accessible.

Here's what you gotta do to add your calendar to a website created in Visual Site Designer:

Step 1:

After you're done making your calendar, export it to the same folder where your Visual Site Designer website is saved. (Essentially what you're doing in this step is saving your calendar files to a specific location.) To do this, click the Export button on the toolbar, select the calendar(s) and date ranges you want to export, and then click Export Files. This opens a window that allows you to choose the location on the computer where you want to save your files. Remember, this has to be the same folder that contains your Visual Site Designer website files. This folder is going to have the name of your website appended by _website. For example, if you saved your website under the name jasonsite, the folder would be called jasonsite_website

After you've chosen the folder where you want to save your files, click OK. This opens the Calendar Code window, which we'll talk about more in Step 2.

Step 2:

In the Calendar Code window, you'll see two blocks of code that you need to paste into Visual Site Designer for your calendar to work.

We'll start with the top block first. Click the first Copy Code button.

Step 3:

Switch on over to Visual Site Designer, and then go to Edit > Edit Header. This opens the Head Section HTML and Onload Events window.  Paste the code into the provided field by clicking the clipboard icon on the far right. By now, the window should look like this:

You're all done here — click OK.

Step 4:

Next, go to Edit > Add Files. This opens the Add Files window. Before you go adding any files, you'll first need to create four folders called calendar, imagesjavascripts, and stylesheets, formatted just like that, with no capital letters. To create a folder, click the folder icon with the green plus sign icon, all the way over in the bottom left-hand side of the window. When you're done, the window will look like this:

NOTE: If you have named your calendar something other then the default name of calendar, you will need to rename the calendar folder to whatever name you chose. For instance, if you named your calendar mycompanycalendar, you would need to change the name of the calendar folder to mycompanycalendar.

Step 5:

All right! The next step is to add your calendar files to the corresponding folders. First, click the javascript folder, and then click the icon of the page with the green plus sign icon (third from the left). This opens a window that lets you browse your computer for the files you want to add. Go to the location where you saved your calendar files, and then open the javascript folder. Select all the files and then click Open. This adds all the JavaScript files to the javascript folder you just created. Repeat this process for each folder, and then add all the files ending in ".html" to the calendar folder. When you're all done, the window will look like something like this:

Click OK to close this window.

Step 6:

All your files have been added; now we just need to add the calendar to your page. First, switch back to Web Calendar and copy the second block of code. Next, go back to Visual Site Designer and click the Add HTML icon on the left toolbar. Click anywhere on the page. This opens the Insert HTML window. Paste the code under the Body HTML tab. When you're done, the window will look like this:

Click OK. You'll be taken back to the main workspace, where you'll see a box labeled "Preview Not Available." This is your calendar! Drag it to the location on the page where you want it to appear.

Congrats, you've just added your calendar to your website! Now all you have to do is upload it. 

Pro Tip: If you upload your work directly from Web Calendar, you can go ahead and skip steps 4 and 5. That way, when you make changes to your calendar, you won't need to republish your entire website through Visual Site Designer. That's a time-saver!

Note: These instructions are for Visual Site Designer 7.0.