Overview

The Save as Web Page feature can be used to easily add a read-only calendar to your website. The look-and-feel of the generated web pages will be similar to the main window, including color-coding and a "Details" area which shows detailed information about a clicked item. You can also customize the colors of the generated web page, add custom content to the web page header and footer, and automatically upload to an FTP server. This feature makes it easy to share your calendars with other people, regardless of the calendar software they are using. All they'll need to see your calendar is a web browser. Also, since the generated output is simple HTML, integration into websites is very straightforward. There are no scripts or other dependencies to install.

Below is an example the generated output using the default settings, as viewed in Google Chrome.

Content

To generate your calendar to a web page, click the "Save as Web Page (HTML)" commando on the File menu or main toolbar. When commanded, the Save As Web Page window will appear. The window will remember any previous settings and initialize those as defaults. The Content tab can be used to adjust the date range and output settings.

Date Range

Fields at the top of the Content tab allow selection of the desired beginning and ending date range. You could generate web pages for a single month or several years - there's no limit. To specify the date range, type in a date or click the drop-down button to select from a calendar. Only the month is used, so you can specify any day of the month.

Show Legend and Details

You can optionally include 'Details' and 'Legend' areas of the generated output. The Details area will show information about clicked items, similar to the Details Pane. The Legend area will show color-coding. The content of the Legend and the color-coding of items will depend on whether the main window is configured to color items based on calendar, category, priority, or location. Also, items that are filtered from being displayed in the main window will also be filtered from the generated output. For example, if you have a personal calendar that you don't want other people to see, you could uncheck that calendar's box in the calendar list prior to saving to a web page.

Output Folder

You can specify the output folder by typing in a full path or clicking the "..." button to select the path. This will usually be a location on your local computer, which can then be uploaded to your website via FTP. When the "Clean output folder" box is checked, any existing HTML files in the output path will be deleted. A warning message will appear before existing HTML files are removed, in case you accidentally specify the wrong output path or prefer to keep the previous files in addition to the newly generated ones. When the calendar web pages are generated, you'll see a separate HTML file for each month, as well as a "Details" subdirectory containing information for each event, task, or note.

Open Generated Web Page in Browser

When this box is checked, the generated web page (for the first month selected in the date range) will automatically open in your default web browser. You can use this to ensure the generated output matches what you expect.

Colors

The Colors tab allows customization of the generated calendar color scheme.

Use Default CSS And Colors

When this option is selected, the generated web pages use a default CSS file, which defines a gray and white color scheme. Visually, it's similar to the main window when using the default appearance theme. There are no additional settings when this option is selected.

Use Custom CSS

When this option is selected, a custom CSS file can be specified, which will allow the output to more closely match the look-and-feel of your website. The CSS file should be a complete URL or relative path to the output of your generated files. For example, if you have a CSS file named "example.css" and you intend to have this file in the same directory as the generated pages, simply enter "example.css".

Here's an example of the generated output when using a custom CSS file, as viewed in Google Chrome:

The following style names are used and can be modified to customize the output:

• body - Use this to customize the overall font, background color or image, page width, etc.
• a - The style for links.
• #details_section - The style used for the Details box.
• .legend_title - The title style in the Legend area.
• .legend_row - The row style in the Legend area. Each key is a row.
• .month_table - The month area style, which is a table.
• .month_name - The month name style.
• .month_name a - The style of the left/right arrows to the left of the month name.
• .day_names - The style of day names (Sunday, Monday, Tuesday, etc).
• .days - The style of the overall area (table) where days are shown.
• .day_cell - The style of each day block, which is a cell in the table.
• .day_cell_alt - The style of the day cells belonging to the previous or next month. This can be used to give those dates a different color.
• .day_number - The style of the day numbers.
• .day_number_alt - The style of the day numbers for days belonging to the previous or next month.
• .event_cell - The style used for events within days. Also used for tasks and notes.
• .details - The style used for the Details area.
• .details_title - The style used for the title of the Details area.
• .details_label - The style used for the labels of the Details area.
• .details_text - The style used for non-label text in the Details area.
• .vueminder_footer - The style used for the "Generated by VueMinder Calendar" footer, shown below the calendar.

Specify Colors

If you don't know CSS or would like a simpler method of specify colors, you can use the "Specify colors" option to select colors for each area of the generated output. A preview will show the selected colors. Click an item to select it and modify its colors.

HTML

The HTML tab allows additional content to be added to the generated output. This content could include metadata tags, scripts, menus, headers, footers, and many other things. To specify this additional content, click the desired section and them enter the HTML code you'd like to include in the output.

FTP

The web pages will be generated to a folder on your local computer. The FTP tab can be used to automate uploading the generated pages to your FTP server, for display on your website. Note, this feature will not work if you're behind a proxy server. Also, the specified folder on the FTP server needs to be manually created and have a subfolder named "details".

 

Copyright © 2008-2011 VueSoft LLC. All rights reserved. Microsoft Excel, Microsoft Outlook, and Microsoft SQL Server are trademarks of Microsoft Corporation. Google Calendar is a trademark of Google Inc. This documentation is subject to change without notice.