If you are embedding the Astra Schedule Calendar in another site, you may wish to customize its appearance.  Following are a few tips on using custom style sheets for embedded calendars.

URL Parameters

The following two parameters can be used in the ActivityCalendar.aspx URL to help control the look and feel of the calendar:

 

•condensedView
 
Set this value to 1 to remove the top tool bar in the calendar.  This will remove the calendar and filter selection drop downs, the request button, the search button, and the mode switch buttons (list, week and month).  This feature is intended to make the activity calendar more friendly to embedded usage.

 

•themeName
 
The theme name argument is used to set a css style on the div container that holds the embedded calendar.  By setting a style on the containing div you can have specific styles for this particular instance of the activity calendar that are different from other usages.
 
example URL: http://university.edu/AstraSchedule/Calendars/ActivityCalendar.aspx?calendarId=e04426d0-5daa-11e1-8258-d5af787df5f6&condensedView=1&themeName=monthview

CSS Customizations

All instances of ActivityCalendar.aspx will include the following file:

 

•[Site Install Directory]Theme/custom/custom-calendar.css

 

To make CSS customizations, use the custom-calendar.css file.  The version of this file that is installed with the application is a good example of how to include your own custom CSS files.

Sample Embedded and Custom Styled Calendar

The application is installed with two complete sample embedded and customized calendars.  To run these files on an installed site you will need to first edit the Sample Page html files below and replace the iframe tags with your own iframe tag as shown in your embedded calendar definition.  Be sure to add the themeName parameter as shown above.

 

Click here to see how to create an embedded calendar definition in the application.

 

Once edited, to run these files on an installed site you will need to replace the site URL references in the Sample Page examples below with your own.

 

Sample Pages #1:

[Site URL]/Calendars/demo/index.html

[Site URL]/Calendars/demo/listview.html

[Site URL]/Calendars/demo/weekview.html

 

Sample Pages #2:

[Site URL]/demo/University/Welcome.html

[Site URL]/demo/University/Athletics.html

[Site URL]/demo/University/Classes.html