Add a calendar block

Prerequisites

• Create a model with the data you need. See our knowledge base article, Create a new model.
• Open an existing page or create a new one. For example, see our knowledge base article, Add a new page and header.

Procedures

Add a Calendar block to your page

1. On your page, at the bottom, select ADD CONTENT, and in the Content dialog box, select the Calendar block.
2. Scroll down and in the Title box, enter a meaningful name for your calendar. For example, for an employee vacation calendar, you could use "Who's Away."
3. From the Model list, select the model that contains the date properties you want to appear in the calendar and select SAVE.

Choose if you want to filter your data items - Skip

DO NOT use the filter for access control because users can still access data through other means, for example, APIs. See our knowledge base article, Add an access control policy.

You can optionally restrict the user's data in this block. Otherwise, select CONTINUE and skip to the next section.

1. Select the Filter data items option and under the Filter data items section, choose what you want to do:
   • Meet ALL of the following conditions (and) - If you want to hide the selected data when it meets every condition you add, add a condition under this section. 
   • Meet ANY of the following conditions (or) - If you want to hide the selected data when it meets just one of several conditions, add your conditions under this section.
2. From the Property list, select the model's property. The next options vary, depending on the property that you have chosen.

   To pass is the Object ID so that the data is relevant, you can choose the settings:

   • Property: "Id"
   • Criteria: "is any of"
   • Value: "objected"

   For example, you choose the "Id" Property "is any of" the Value "objectId" to only view data based on the signed-in user, or change to "is not any of" to prevent the user from viewing data based on the signed-in user.

3. From the Criteria list, select the condition you want the property value to meet to hide the block from the page.
4. In the Value box, enter the property's value that you want the condition to meet to hide the block from the page.
   • For lookup properties, you can select a lookup option.
   • For foreign key properties, you can select any values against the default label property of the linked model. However, if there is nothing to select, there might not be any values for the property.
5. Select CONTINUE.

Design your calendar

Calendar layout

1. From the Calendar views list, select one or more formats of how you want your events to appear on the page, for example, a month, a week, or in a list.

   List

   Week

   Month

2. If you selected more than one calendar view, you must select which one appears first. Then, from the Default view list, select the one you want. The user first sees this view and then can change the view to one of the other selected calendar views.
3. If you selected "Week" from the Calendar views list, you must choose which day the week starts. Then, from the Start of week list, select the day you want.

Event date and time

1. From the Event date range property list, select the date range property from your model. These are the property values that populate your calendar.

Text

1. From the Title list, select the model's property you want to use as the event title. For example, you might want each event to have the employee's name on an Annual Leave calendar. In this case, you would select Owneruser - Name.
2. From the Subtitle list, select the property from your model to show as the subtext on the event. For example, you could select Owneruser - Job Title.

Primary action

The primary action is what happens when the user selects the record. You can choose to open an existing page within your Applaud tenant or open an external page.

1. To turn on the primary action function, select the Use primary action option.
2. From the Link To section:
   • If you want to open an existing page in your Applaud tenant, select the Applaud Cloud Page option.
     1. From the Page list, select the Applaud page you want to open.
     2. From the Link target list, select:
        • In the current window - Opens the page in the current browser tab.
        • In a new window - Opens the page in a new browser tab.
        • In a modal - Opens the page in a dialog box.
   • If you want to open an external page, select the External Hyperlink option.
     1. In the Hyperlink box, type in the URL
     2. From the Link target list, select:
        • In the current window - Opens the page in the current browser tab.
        • In a new window - Opens the page in a new browser tab.
        • In a modal - Opens the page in a dialog box.

Item styling

1. If you want to show additional information when the user places their mouse cursor to hover over the record, from the Supplementary text list, select the property that you want to appear.
2. If you want to add color to your record on your calendar, from the Background color property list, choose a color property. You need to have a color-type property in your model to select this.
   
3. If you want to apply a color to the record's text on your calendar, from the Text color property list, choose a color property. You need to have a color-type property in your model to select this.
   
4. If you want to show a small colored status bar to the left of each item from the Status bar color property list, select the property you want to use. Otherwise, leave blank to hide.
5. If you want each record item on your calendar to have an icon, from the Secondary icon property list, choose an icon property. You need to have an icon-type property in your model to select this.
   

Filtering

You can add multiple filters to let your users filter the list of items. They can open the filters from the filter icon. When you use this feature when adding a Search setting, the property appears in the filters on the global search results page. You can select a property value by which to filter the search results.

1. Under the Filtering section, select the Show filters that allow the user to refine the list of items option.
   
2. From the Property list, select the property that you want to appear as a filter list. Each property shows as an expandable list, and the user can select values to filter the list.
3. From the Type list, select the type of filter you want to appear.
   • Multiple select
     
   • Single select
     
   • Range slider
     

Choose if you want to create a resource scheduler - Skip

Optionally, create a resource scheduler. Otherwise, select CONTINUE and skip to the next section.

You can group events by their resources, such as a particular user or meeting room. The resource layout shows on the left of the calendar with the events to the right. You can use the icon at the top to toggle between the calendar and the resource scheduler.

Resource scheduler layout

1. To add a resource scheduler to your calendar, select the Use resource scheduler option.
2. Under the Default view section, choose if you want to keep the Calendar as the default view. Otherwise, leave Scheduler selected as the default view. Users can select the Calendar or Scheduler icons to change the view.
3. From the Resource scheduler views list, select the views you want to use.
   • Day - Shows the time at the top of the table.
     
   • Week - Shows the days of the week at the top of the table.
     
   • Month - Shows the days in the month. You can use the scroll bar to scroll to the right and see the rest of the month.
     
   • Year - Shows the days of the month for every month. You can use the scroll bar to scroll to the right and see the rest of the year.
     
4. If you selected more than one view from the Default view list, select the view you want to appear first. Your users can then choose to alternate between views.
5. From the Resource relationship list, select the one you want to use.
6. To only see resources with events, select the Hide resources that don't have events option.
7. In the Resource label box, type in what you want to call your resources. For example, "Employees," "Team," or "Rooms."
   
8. Any events without a resource appear in the top row of the table. In the Global events label box, type in what you want to call your events without a resource.
9. From the Resource features list, select the ones that you want and see the section for each further on in this article:

   Text

   This is the text you see in the list of resources.

   1. To choose the resource names from the Title list, select the property you want to use.
   2. Optionally, to add text under the title from the Subtitle list, select the property you want to use.
   3. Optionally, to add text above the title from the Overline list, select the property you want to use.
   4. Optionally, to add text to the title's right, from the Action text list, select the property you want to use.

   Avatar / icon / image

   1. From the Style list, choose if you want your image to be in a circle by selecting, Avatar or show the whole image, select Image. If you want to use an icon to represent the record, select Icon.
      • If you selected Avatar or Image from the Image property list, select the property you want to use, and from the Placeholder text list, select the property you want to use.
      • If you selected an icon from the Icon property list, select the property you want to use and from the Icon color property list, select the color of your icon.
   2. If you want to use a badge, a little circle in the corner of your avatar or icon to indicate something about the record, select the Use a badge option.
      1. From the Badge color property list, select the color of the badge.
      2. From the Badge contents options, select how you want the badge to appear:
         • Empty - shows a colored circle.
         • Text - shows text if you hover your mouse cursor over the badge.
         • Icon - shows an icon instead of a circle.

   Primary action

   • From the Link To section:
     • If you want to open an existing page in your Applaud tenant, select the Applaud Cloud Page option.
       1. From the Page list, select the Applaud page you want to open.
       2. From the Link target list, select:
          • In the current window - Opens the page in the current browser tab.
          • In a new window - Opens the page in a new browser tab.
          • In a modal - Opens the page in a dialog box.
     • If you want to open an external page, select the External Hyperlink option.
       1. In the Hyperlink box, type in the URL
       2. From the Link target list, select:
          • In the current window - Opens the page in the current browser tab.
          • In a new window - Opens the page in a new browser tab.
          • In a modal - Opens the page in a dialog box.

     Chips

     1. From the Property list, select the property you want to use. For example, a Boolean-type property.
     2. From the Condition list, select what condition you want the property to meet to show the resource's chip. For example, a Boolean-type property "is true" or "is false."
     3. In the Text box, type in the text you want to appear on your chip.
     4. From the Color list, choose the color you want your chip to be.
     5. From the Icon list, choose what icon you want to appear on your chip.

Customize General content settings for your block

Add Action buttons

1. Under General content settings, next to Action buttons* select the plus "+" icon.
2. In the Title box, type in the text you want to appear on your button.
3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.
   • Open page - Loads the Target list with pages from your Applaud tenant.
   • URL - You need to type in the full website address in the Target box.
   • Regular / Same tab - Takes the user away from the current page to the new page.
   • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.
   • New tab - Opens a new tab in the user's browser with the new external website.
4. From the Target list, select a page from the available pages in your Applaud tenant or type the complete URL address, for example, https://www.google.com.
5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.
6. From the Weight list, select how you want your button to appear:
   • Normal - The button appears with a colored rectangle background with black text.
   • Light - The button doesn't have a background, and the text is your selected color.
7. From the Hide/show based on a model property list, select a property, and then from the Condition list, select either the Hide if true option or the Show if true option.

Block title and header bar

If you don't want a title on your block, clear the Show the title and header bar option.

Block width

To configure how wide you want your block, from the Preferred width list, select an option:

• Automatic - Spans the width of the column on the page depending on what page layout option you have selected.
• Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.
• Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.
• Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.

Background color

To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

1. Color palette
   A chart of preconfigured colors. Scroll down to see more colors. Not available in the call-to-action content block.
2. Color gradient panel
   A mixture of two linear color gradients. Once you select a color from the palette, you can use this panel to pick the color you want.
3. Sample color
   Shows the color you've chosen, and that will be applied.
4. Hue slider
   A linear gradient of colors. You can choose the main hue you want.
5. Opacity slider
   Controls the transparency of the color. Use it to brighten or darken your chosen color.
6. Color mode
   If you know the HEX (Hexadecimal) code you want to use, you can enter it here. You also have the option to toggle to two other formats.
   RGBA - (red, green, blue, alpha) decimal values.
   
   HSLA - (hue, saturation, lightness, alpha) values.
   

Hide block on certain screen sizes

If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.

Hide or show this block using filters

Show or hide this content block when certain conditions are met. For example, show to a manager but hide from a non-manager. You can base these filters on anything, such as job role, department, or location.

1. Select the Hide or show this block using filters option.
2. Under the Conditions section:
   • Hide when ALL of the following conditions are met (and) - If you want to hide this block when the selected data meets every condition you add, add a condition under this section.
   • Hide when ANY of the following conditions are met (or) - If you want to hide the block when the selected data meets just one of several conditions, add your conditions under this section.
3. From the Property list, select the model's property.
4. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
5. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

Finish

When you are finished, select UPDATE.

See more:

• About the calendar block

Reference:

• Content dialog box
• Settings: (Calendar)