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. See our knowledge base article, Add a new page and header.

Procedure

1. Add a Calendar block to your page:
   1. On your page, select ADD CONTENT, and in the Content dialog box, select the Calendar block.
   2. Scroll down and in the Title box, give your calendar a meaningful name. For example, for an employee vacation calendar, you could use "Who's Away."
   3. From the Model list, select the model whose data you want to appear in the calendar.
   4. Select SAVE.
2. Optionally, restrict the user's data in this block. Otherwise, select CONTINUE.
   1. Select the Filter data items option. The options vary, depending on the property that you have chosen.

      Tip

      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.

   2. Under the Filter data items section, if you want to hide the selected data when it meets every condition you add, add a condition under the Meet ALL of the following conditions (and) section. Otherwise, if you want to hide the selected data when it meets just one of several conditions, add your conditions under the Meet ANY of the following conditions (or) section. Under the relevant section, select .
   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 to hide the block from the page.
   5. In the Value box, enter the property's value that you want the condition to meet to hide the block from the page.

      Tip

      • 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.
   6. Select CONTINUE.
3. 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

     • 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 for 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
          
4. Optionally, create a resource scheduler. Otherwise, select CONTINUE.

   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:

      • Resource 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.

      • Resource avatar / icon / image

        You can add an image or icon to your resource.

        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.

      • Resource action

        You can decide what happens when a user selects a resource.

        • 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.

      • Resource chips

        Chips are small blocks of color that sit within your item to illustrate an action. For example, you might include a chip on a leave request to illustrate whether it's a paid leave type or not. We recommend you use chips to highlight exceptions rather than norms. For example, a leave type would be more likely to have a chip to represent 'unpaid' rather than 'paid' as 'unpaid' is less usual.

        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.
5. Customize General content settings for your calendar block:
   1. Optionally, add Action buttons that open one of the pages in your tenant or an external URL:
      1. Under General content settings, next to Action buttons* select, .
      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 list of available pages in your Applaud tenant or type the full 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 the color you selected.
      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.
   2. If you don't want a title on your block, clear the Show the title and header bar option.

      Caution

      Hiding the title and header bar also hides any action buttons you may have included.

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

      Note

      These options are affected by your Page layout options, which you configure in the Page settings dialog. See our knowledge base article, Configure your page settings.

      • 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.

   4. 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.

      Tip

      You can select a preconfigured color nearest to the one you want and then tweak it to what you want using the sliders.

      	1. Color palette	A chart of preconfigured colors.
      	2. Color gradient panel	The color gradient panel shows a mixture of two linear color gradients, your chosen color and black. The color you choose reflects in the color gradient panel, instantly showing where your selected color appears on the panel. You can choose a lighter or darker version of the chosen color from the panel.
      	3. Sample color	Shows the color you've chosen, and that will be applied.
      	4. Hue slider	This slider has a linear gradient of colors. You can choose the main hue you want.
      	5. Opacity slider	This controls the transparency of the color.
      	6. Color mode	This switches between the color value modes: HEX - Sets the color based on a Hexadecimal code value. RGBA - Sets the color based on RBGA (red, green, blue, alpha) decimal values. HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.

   5. 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.

   6. Restrict or allow viewing further by adding custom filters to your block. You can base these filters on anything, such as role type, department, or location. Then, select the Hide or show this block using filters option and set your Conditions.

      If you want to hide this block when the selected data meets every condition you add, add a condition under the Hide when ALL of the following conditions are met (and) section. Otherwise, if you want to hide the block when the selected data meets just one of several conditions, add your conditions under the Hide when ANY of the following conditions are met (or) section.

      1. Under the relevant section, select .
      2. From the Property list, select the model's property.
      3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
      4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

         Tip

         • 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.

See more:

• About the calendar block

Reference:

• Content dialog box
• Settings: (Calendar)