Step-by-Step Guide: Calendar Screen

In this step-by-step guide, we will be showing how to configure and use the functions of the calendar screen. This screen can be helpful if we need to create or show date events.

Step 1: Configure the "Screen Settings"

First, we will configure the main settings of the Calendar. To do this, we access the two buttons on the top right corner of the Calendar container.

• Screen Settings: This button will open the "Settings for the Calendar screen form" in the right pane of the screen. Here, we can configure the main and specific functionalities of our Calendar, ranging from the table where the information will be taken to adding features like adding or editing events.
• Preview: This button will be helpful when we want to see the updated Calendar after making changes in the Settings of it.

After clicking on "Screen Settings," we will be able to see this information:

The settings for the Calendar screen are divided into 5 main tabs:

Step 2: Configure the Repository and Table for the Calendar

The first configuration needed is selecting the repository where the table we want to link is located, and then selecting the desired table.

❗️

Choose and Save

The correct process to set up the repository and table for the calendar is to select the repository and table, save the settings using the "SAVE" button in the top right corner, and refresh the page. This will allow us to directly set up the columns in the "Calendar Settings" tab.

As shown in the image above, we select "Repository" as our repository and the "Events" table. Then, we save and refresh the settings before configuring the relation key, which is an optional field if we want to relate a detail table to our main events table.

Step 3: Configure the Calendar Settings

Next, we configure the calendar settings by clicking on the "Calendar Settings" tab in the settings screen of the calendar. This will show us all the main settings for the calendar.

After setting the required fields, we can hit preview to see our Calendar for the first time:

Additional optional fields include:

Here is the configuration used for this calendar:

Step 4: Configure the Header Options

Next, we will customize the header of the calendar. By default, the calendar has no header, but we can change this to include one. Within the header, we can add action buttons to guide the user to another screen or an external URL.

Here we can see these fields:

• Show Header Options: Enable or disable the calendar header.
• + ADD BUTTON: Add action buttons to the header.

All action buttons created will appear in the "Action Header Buttons" list. Here, we have two available actions:

• Configuration: Represented by the "gear" icon, this option allows you to customize the action button's settings, such as the button name, type, and destination URL or screen.

## Custom HTML to display images side by side
<img class="mobile-image" src="https://files.readme.io/8d41be4-Captura_de_Pantalla_2024-07-22_a_las_1.54.13_p._m..png" />
<img class="mobile-image" src="https://files.readme.io/1ed7878-Captura_de_Pantalla_2024-07-22_a_las_1.54.26_p._m..png" />

<style>
  .img {
    display: inline-block;
  }
  img.mobile-image {
    width: 49%;
    display: inline-block;
  }
</style>

• Delete: Represented by the "X" icon, delete the action button.

Step 5: Configure the Add Event Form

This section allows us to customize the Form used to add and edit events, using the same design layout process as the form in the page layout.

Step 6: Configure the Event Link

This section allows to customize what type of action will trigger when a user click on one of the events of the calendar, we have 3 options available.

• Event Edit Form: It open the Edit form designed in the "ADD EVENT FORM" settings section.
• Forward to screen: It will forward the user to a designated screen, we also have the options to send the primary id value set in the "REPOSITORY & TABLE FOR CALENDAR" tab settings, as a search value, as a relationship or not sent the primary key.
• Forward to url: It will forward the user to an external URL, we also have the option to use "@prime_key" keyword to replace the URL with the primary key.