How to embed a published Diary in your own webpage

MyOffice provides a mechanism by which published diaries can be embedded within your own website. This allows you to seemlessly integrate your published diaries with your existing content. In order to accomplish this you will need a little knowlege of the environment in which your website was developed, and the ability to update the website in question. If you wish to embed a MyOffice published diary within your website but are unsure as to how to proceed, please contact either the relevant technical support organisation for your own website, or MyOffice support.

On this page, we will attempt to describe the process of embedding a MyOffice published diary within a webpage in the simplest possible terms. Those of you with a bit more technical knowhow will no doubt be able to accomplish this task by various different means and should feel free to do so. The example page we will use will be a basic HTML page. Whilst you'll clearly not want to end up with a page that looks like the one we're going to use in the example, the same basic principles apply to embedding the diary in one of your existing pages.

Embedding a diary your web page

The service provided MyOffice enables you to embed HTML displaying your published diary into an area of your webpage. This is accomplished by placing an IFRAME on your web page and setting it's source to the published diary HTML generator on the MyOffice website. Below is an example of the HTML required to do this.

     <iframe src="publisheddiary.ashx?diary=1-5001" />

The above code will embed a MyOffice published diary in your page using an IFRAME. In order to make sure it's showing your diary and not our demonstration diary, you will need to change the part shown in red. The part shown in read is the diary code. This is used to indentify the diary to display. Your diary code can be found by opening the Published Diary admin window in the MyOffice windows client (Tools -> Published Diaries), selecting the diary you wish to publish, and pressing the 'View Code' button. To show your diary, simply replace the red part of the above HTML with your diary code.

Changing the appearance of diary HTML

When embedding a published diary in your own site, you'll probably want to make it's appearance fit with that of your site. This can be acheived by via a stylesheet. In order to make these changes, a degree of knowledge of CSS is required. Whilst this is not an especially complex area, "How CSS works" is beyond the scope of this page.

In order to change the stylesheet used by the published diary HTML generator, you will first need to create a copy of the default published diary stylesheet on your website. The default published diary stylesheet can be found at http://www.myoffice.net/publisheddiary/myofficepublisheddiary.css. Once you have your own copy of this stylesheet (which you will use to alter the appearance of the diary), you must then alter the HTML used to embed the diary to tell the published diary HTML generator to use your stylesheet.

<iframe
src="publisheddiary.ashx?diary=1-5001&stylesheet=http://website.com/mystyles.css" />

To point the published diary HTML generator at your stylesheet, you'll need to use the HTML shown above, replacing the diary code in the same way as shown in the previous example. However, you'll also need to replace the text shown in blue with the absolute URL to the stylesheet you wish to use.

Each element type of the diary HTML produced by MyOffice has a style definied. These are listed below.

MO_Global

The whole of the returned diary HTML is enclosed in a DIV of class MO_Global.

MO_TitleDiv

The optional diary title is enclosed in a DIV of class MO_TitleDiv

MO_DateSpan

When showing a diary as grouped by day, the date for each day is enclosed in a span of class MO_DateSpan.

MO_DateHR

The optional horizontal rules displayed above or below dates are of class MO_DateHR

MO_AptTable

Regardless of the formatting, appointments are always contained with tables. These tables are of class MO_AptTable.

MO_Row

Appointment table rows are of class MO_Row.

MO_ColCell

Given that there are a variable number of columns in appointment table, and that each column contains data that you may wish to style differently, there's no one class to apply to all cells. Instead, the cells of each column are of class MO_ColCellN where N is the (zero based) column number. For example, in an appointment table with three columns, the cells in each column would be styled as MO_ColCell0, MO_ColCell1, and MO_ColCell2 respectively.

MO_DateEndBreak

When grouped by date, each date plus appointments table is followed by a linebreak of class MO_DateEndBreak.

Viewing the diary HTML without injecting it into a page

Whilst it's all well and good explaining the way in which published diaries can be styled, it's probably a lot easier just to look at the raw HTML and see for yourself what's going on. The URL to get this HTML is www.myoffice.net/PublishedDiary/PublishedDiary.ashx?diary=DIARYCODE , where DIARYCODE is the code you're embedding in your page. For example, if your diary code is 3-3947 then the URL to retrieve the HTML is www.myoffice.net/PublishedDiary/PublishedDiary.ashx?diary=3-3947.