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.
The following two parameters can be used in the ActivityCalendar.aspx URL to help control the look and feel of the calendar:
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.
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.
Sample URL: [Site URL]/AstraSchedule/Calendars/ActivityCalendar.aspx?calendarId=123&condensedView=1&themeName=monthview
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.
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:
Sample Pages #2: