Add a read-only, SharePoint calendar to a public website

Adding a SharePoint calendar to a public website is a great way to enhance the visitor experience. Any visitor to your site can see events, special meetings, seasonal sales, or scheduled training classes at a glance in a classic calendar format. Now rumor has it that the SharePoint calendar is not available on a public website, but that’s just a rumor. With some setup work, you can add a professional-looking SharePoint calendar, including a monthly, weekly, and daily view.

A monthly calendar view on a public website

 Note    The following instructions demonstrate how to add three different views and pages for a calendar. But you may only want to add one calendar view to your site, such as the month view. If so, follow the instructions below for just the month view and page, and skip step 6.

Step 1: Customize the site content width

Because, the calendar has a wide format design, it’s necessary to adjust the site content width by customizing a CSS style. Otherwise, the calendar views will appear compressed and some text truncation occurs.

  1. Navigate to the public website.
  2. Click the Site tab, and then in the Advanced group, click Edit Style Sheet.
  3. Add the following to the top of the Style Sheet text box:

.ms-pub-contentLayout{width:900px;max-width:none;}

 Note    You should see a live preview of your changes on the website behind the Style Sheet window. CSS is case-sensitive so make sure you enter the text correctly.

  1. Click Save and Publish.

Step 2: Create a custom list with calendar-specific columns

Start by creating a custom list which is the foundation for your calendar. By adding the following three columns, Start Time, End Time, and Description, the custom list can become a calendar.

  1. Click Settings SharePoint Online Public Website Settings button, click Add an app, click Custom List, enter the name PublicCalendar, and then click Create.
  2. While still on the Site contents page, locate and click the PublicCalendar app icon.
  3. On the List tab, in the Settings group, click List Settings.
  4. Click Create Column.
  5. In the Column Name box, enter Description, select Multiple Lines of Text, and then click OK.
  6. Click Create Column.
  7. In the Column box, enter Start Time, select Date and Time, under Additional Column Settings, click Date and Time, and then click OK.
  8. Click Create Column.
  9. In the Column box, enter End Time, select Date and Time, under Additional Column Settings, click Date and Time, and then click OK.

Step 3: Create monthly, weekly, and daily calendar views

Now create the three views that will display the PublicCalendar list and the calendar-specific columns in a calendar format.

Create the month view
  1. In the list breadcrumb path, click PublicCalendar to see the All Items view.
  2. Click the List tab, in the Settings group, click List Settings.
  3. At the bottom of the page, click Create View, and then click Calendar View as the beginning template.
  4. In the View Name box, enter MonthView.
  5. In the Time Interval section, map the Start Time column to Begin and the End Time column to End.
  6. In the Calendar Columns section:
    1. Map the Month View Title, Week View Title, and Day View Title to the Title column.
    2. Map the Week View Sub Heading and Day View Sub Heading to the Description column.
  7. In the Default Scope section, click Month, and then click OK.

Month view

Create the week view
  1. Click the List tab, in the Manage Views group, click Create View.
  2. Under Start from an existing view, click MonthView.
  3. In the View Name box, enter WeekView.
  4. In the Scope section, click Week, and then click OK.

Week view

Create the day view
  1. Click the List tab, in the Manage Views group, click Create View.
  2. Under Start from an existing view, click MonthView.
  3. In the View Name box, enter DayView.
  4. In the Scope section, click Day, and then click OK.

Day view

Step 4: Create monthly, weekly, and daily calendar pages

Each calendar view needs a dedicated page.

  1. Create three web pages that will display each view:
    1. Click Settings SharePoint Online Public Website Settings button, click Add a Page, enter the name PublicCalendarMonth, and then click OK.
    2. Click Settings SharePoint Online Public Website Settings button, click Add a Page, enter the name PublicCalendarWeek, and then click OK.
    3. Click Settings SharePoint Online Public Website Settings button, click Add a Page, enter the name PublicCalendarDay, and then click OK.
  2. For each page, when finished, click Save and Publish.

By default, site navigation links are automatically added. You can keep them for now, and then modify them in step 7.

Step 5: Create reusable content to navigate the three views

The following content makes it easy to navigate between each calendar view with links. Because the content is the same on all three pages, it’s best to create reusable content to make it easier to maintain.

  1. Click Settings SharePoint Online Public Website Settings button and select Site Contents.
  2. On the Site contents page, click Reusable Content.
  3. Click the Items tab, and then in the New group, click New Item.
  4. In the Title box, enter PublicCalendarNavigation.
  5. Select Automatic Update and Show in drop-down menu.
  6. Click Click Here to Add New Content.
  7. Create three links on one line, one for each page by doing the following:
    1. Click the Insert tab, click Link, click From SharePoint, locate the page, and click Insert.
    2. Edit the default text value to Month, Week or Day depending on the page. Make sure you don’t accidently remove the hyperlink.
    3. Insert five spaces between each link.

Finished reusable content

  1. Click Save.

Step 6: Add reusable content and Web Part views

Add the reusable content created in step 5 and the appropriate calendar view created in step 3 by using a Web Part.

Using the navigation links, navigate to each page and do the following:

Add the reusable content
  1. From the Page tab, choose Edit.
  2. From the Insert tab, click Reusable Content.
  3. Select the reusable content, PublicCalendarNavigation, from the menu.
  4. The reusable content is added to your page and appears in a gray box to differentiate it from other page content.
Add the appropriate Web Part view
  1. Click the Insert tab, and then in the Parts group, click Web Part.
  2. Locate the PublicCalendar List Web Part, select it, and then click Add.
  3. Click on the Web Part.
  4. Click the Web Part tab, and then in the Properties group, click Properties.
  5. Under Selected View, select the appropriate view for each page:
  • For the PublicCalendarMonth page, select MonthView.
  • For the PublicCalendarWeek page, select WeekView.
  • For the PublicCalendarDay page, select DayView.
  1. In the Appearance section, under Chrome Type, click Border Only.
  2. In the Appearance section, under Width, click Yes, and then enter 900.
  3. At the bottom of the Web Part property pane, click OK.
  4. Click Save and Publish.

Step 7: Modify your site navigation

Finally, make it easy for your visitors to find you public website calendar.

  1. In the site navigation, click EDIT LINKS.
  2. Click the Hide button next to the PublicCalendarWeek and PublicCalendarDay links.
  3. Edit the PublicCalendarMonth link to say Calendar of Events.
  4. Click Save.

Step 8: Add events to the calendar

  1. Navigate to the PublicCalendar list.
  2. Click Settings SharePoint Online Public Website Settings button, click Site Contents, and then click PublicCalendar.
  3. Click New Item, and then enter the information into Title, Description, Start Time, and End Time.

Make sure you enter in the correct start and end times.

Wrapping up

Congratulations. You now have a public calendar on your public website that visitors can use to keep track of important events for you site or business.

On an ongoing basis, add events to the calendar. Be prepared to update your own personal calendar because your life may get busier in the near future.

More Information

For more information, see the following articles:

For a summary of all related topics, see Public Website help for Office 365.

 
 
Applies to:
SharePoint Online Enterprise (E1), SharePoint Online Midsized Business, SharePoint Online Small Business, SharePoint Online Website