Calendar Panels¶

A Calendar panel

Calendar Panels populate a calendar with information from a data source, making use of three unique control types: Description, Event Start, and Event End. The Description control designates what will appear on the calendar, and is typically an event name. The Event Start and Event End controls designate which day the event will appear on, and may include timestamps, which will be displayed alongside the event description. Like with Chart Panels, Calendar Panels can be linked to another Panel in order to display greater detail regarding the event on the calendar.

By default, the Calendar Panel will display based upon the data in the Business Rule, honoring whatever sort is applied in the Business Rule. Review your Business Rule to verify the sort.

If there is no data in the Business Rule, then the current month, day or year should appear on the Calendar. As soon as data is added you'll likely want to add a sort to the Business Rule.

How to Display Current Month on Calendar¶

To make sure the panel returns the current month, day or year, add a column called Sort with logical type numeric and apply a sort ascending on this column. For example if your business object supporting your calendar panel has a column called StartDate that you'd like to use and it's a SQL datasource you can use a sql escape function:

${ABS(DateDiff(day, getdate(), StartDate))}

or a Vinyl IIF statement:

IIF(DateDiff(dd, Now(), StartDate) < 0, (DateDiff(dd, Now(), StartDate))*-1, DateDiff(dd, Now(), StartDate))

To view other months, click on the forwards and backwards chevron buttons in the upper left-hand corner of the panel. Toggling between Day, Week, and Monthly views can be done by clicking on the corresponding buttons in the upper right-hand corner of the panel. Calendar panels cannot be edited; however, a separate panel that displays the event controls can be.

How to Change the Date and Time of an Event¶

1. Select the Event
2. In the panel that displays the event information, click the Pencil icon
3. Adjust the date and time as necessary, then click on the Checkmark to save

How to Add a New Event to the Calendar¶

1. Select any pre-existing event and click the Create button
2. Enter a title for the event, select a date from the calendar drop down menu
3. For controls with time and date enabled, click the Time icon to bring up a clock
4. Click on the Checkmark to save
5. After any revisions are made to the calendar, refresh the page and confirm update(s)

How to create a Calendar using the Northwinds database¶

In this example we'll add a new Calendar panel to visually represent the date that Orders get logged into Northwinds.

Create a Business Object to Use With the Calendar Panel¶

1. Create a new Business Rule
2. Give the rule a Name. For example: Order (Calendar)
3. Set the Purpose to Calendar
4. Target the Order table
5. Click the Save button
6. From the Order table, click to select the OrderID and OrderDate columns
7. Click the Where tab. Add the OrderDate column to the Left field. Choose IS NOT NULL as the Operator. Leave the Right field blank.
8. If desired, add a column that supports Sort to the Columns tab. For example: DatePart(mm, O.OrderDate)

Create the Calendar¶

1. Go to the App Workbench > Add a Page
2. Name the page Order Calendar and click Create
3. Select the single column layout, click Add Panel
4. Select the Calendar
5. Locate the Calendar Rule and click Select
6. Click Customize Page
7. Enter Order Calendar for the Name, select Calendar Panel as the Type, and select Monthly as the Sub Type.

8. Add two Controls with the following settings:

   	Column	Name	Usage Type
   Control #1:	OrderID	Order	Description
   Control #2:	OrderDate	Order Date	Event Start

9. Navigate to the app view and confrim you now see the Calendar

Configure the Calendar Events to Link to Another Page¶

1. From the Calendar page in your app, click on the Action Drawer > Live Designer
2. Click the Controls button on the Calendar panel
3. Click the Open Record icon for the control to link from
4. From the Update and Linking, set Link To Page to Orders
5. Verify that it is bound by OrderID in the Criteria
6. Navigate to the application view and confirm update

Use the Color Control to Change the Color of Events¶

1. Add a new column to the Calendar Business Rule. For example: enter '#000343' in the Column or Expression field. Enter Color in the Alias field.
2. Navigate to the Calendar page of your app and select Action Drawer > Live Designer

3. Add a new Control.

   • Select Color for the Column
   • Name the control Color
   • Select Color for the Control Type

4. Navigate to the application view and confirm update