Events Module

Setting up the calendar

Starting on July 16, 2018 new prices systems are now in effect for the Google Maps Platform. This is only in affect if you are using the GeoCodes attribute in this module. Please see the User Guide and view this option's billing here.

1. Linking To link to the calendar month view you must use a query string variable. The link looks like this: /AudienceSystemName/NavigationItemSystemName.aspx?calendar=y
2. Module Designer There is a new tab in Site Architecture > Module Designer > Events called Calendar Month View. This is where you control the design of the calendar view.
3. Attribute Definitions
   • Header Content The html that will show up above the calendar.
   • Event Item Content Here you can use cp:scripting to build and display any information from the relation. Each event’s data will show up in its own DIV. In order to make the event titles link to their details view, you must build the link yourself. Here is an example: /Main/Events/[cp:scripting key='Column' name='AutoNumber' format='' /].aspx. The CSS for the div that holds the event data and its title link is handled in the attribute called "Event Title CSS". The default is “<a href="#">[cp:scripting key='Column' name='Title' format='' /]</a>”
   • Link to Day View This will link the calendar's date to the List View for a single day of events.
   • Display Top Events This will filter the top events by in a single day.
   • Record Filter This is the number of events to show in a single day.
   • Calendar See More Link This will show a linkk to the List View for a single day of events if there is more events than the Record Filter displays.
   • See More Link Text This is the text for the See More Link. It defaults to See More..
   • Grid Color A color picker that will set the color of the calendar grid lines. The default is black.
   • Title Bar CSS This is where you control the CSS class for the bar where the month navigation and month name is.
   • Event Title CSS Here is where you control the div and its child controls (links) for the event data. So there is no need to add a class definition to the Event Item Content html.
   • Event Day Cell CSS For the days that have events on them, you may control the look of the cell that holds the title.
   • Day Header CSS The class definition for the cells that hold the day names.
   • Day Cell CSS This class definition controls all the day cells that do not have an event or is not the current day.
   • Today’s Day Cell CSS This class definition controls the current day’s cell.
   • Calendar Date Number CSS This class definition controls the date numbers.
   • Previous Navigation Type This is an attribute switch that will allow you to choose between an image or text for the month navigation.
   • Next Navigation Type This is an attribute switch that will allow you to choose between an image or text for the month navigation.
   • Footer Content The html that will display under the calendar.
4. CSS classes for Calendar
   • Day Class cpsty_CalendarDayCell
   • Day Header Class cpsty_CalendarDayHeader
   • Today Day Class cpsty_CalendarTodaysDayCell
   • Title Class cpsty_CalendarTitleBar
   • Other Month Day Class cpsty_CalendarOtherMonth
   • Weekend Day Class cpsty_CalendarWeekendDayStyle
   • Day Class cpsty_CalendarDayStyle
   • Date Number Class cpsty_CalendarDateNumber

Setting up the Calendar List View

1. Linking To link to the calendar list view you must use a query string variable. The link looks like this: /AudienceSystemName/NavigationItemSystemName.aspx?list=y There is also an option for a Day List View. The link looks like this: AudienceSystemName/NavigationItemSystemName.aspx?list=day&date=MM-dd-yyyy if the date is left empty it will show the current day.
2. Module Designer There is a new tab in Site Architecture > Module Designer > Events called Calendar List View. This is where you control the design of the calendar view.
3. Attribute Definitions
   • Css Class The css classes for calendar list view contents. You can write css classes for list view contents.
   • Header Content The html that will show up above the calendar list view. Here you can use calendar cpcontrols like DateSelector, TaxonomySelector and View Selector. To display the selected date in header, the databind 'DisplaySelectedDate(string dateFormat)' can be used. The databind WeekView(string text) and MonthView(string text) can be used here to switch to week and month view respectively.
   • Day Header Content Here you can use cp:scripting to build and display any information from the relation. This will be displayed as header for each event in the list. For example : [cp:scripting key='Column' name='EventStartDate' dataType='datetime' format='{0:MMM d, yyyy}' /] This will display Event start date of each event as its header.
   • Item Content Here you can use cp:scripting to build and display any information from the relation. In order to make the event titles link to their details view, you must build the link yourself. Here is an example: /Main/Events/[cp:scripting key='Column' name='AutoNumber' format='' /].aspx. To show the body copy of event, you can use databind 'ViewDetails(object dataItem, String text, string cssClassVDLink)', this will display content of each event with View Details link to link to Details view of Event.
   • Footer Content The html that will display under the calendar list view.

Setting up the Calendar Week View

1. Linking To link to the calendar week view you must use a query string variable. The link looks like this: /AudienceSystemName/NavigationItemSystemName.aspx?week=y
2. Module Designer There is a new tab in Site Architecture > Module Designer > Events called Calendar Week View. This is where you control the design of the calendar week view.
3. Attribute Definitions
   • Css Class The css classes for calendar week view contents. You can write css classes for week view contents.
   • Header Content The html that will show up above the calendar week view. Here you can use cp:scripting to build and display any information from the relation. Here you can use calendar cpcontrol like TaxonomySelector to filter the content. To display the date for current week in header, the databind 'DisplayCurrentWeek(string dateFormat)' can be used. To navigate through previous and next week, the datbind 'Next(string textForLink)' and databind 'Previous(string textForLink)' can be used. The databind MonthView(string text) and ListView(string text) can be used to switch to Month and List View respectively.
   • Item Content Here you can use cp:scripting to build and display any information from the relation. In order to make the event titles link to their details view, you must build the link yourself. Here is an example: /Main/Events/[cp:scripting key='Column' name='AutoNumber' format='' /].aspx. The content can be alingned using tables or Divs.
   • Footer Content The html that will display under the calendar week view.

Property	Description
Loading...