Xpoda Calendar is a tool that allows you to easily view and select dates. With this tool you can track your events, browse specific dates or select dates for different events.
| Appearance in Toolbox |
Appearance in Free Form |
Appearance in Responsive Form |
| |
Compatibility
| Free Form | Responsive Form | Mobile |
|
In order to use this tool, you need a calendar edit form where the values will come from. The edit form should have 'person, start date, end date and title' fields. The mappings in the properties will be matched with the fields here. |
Properties:
Type: Indicates the field type of the added form tool. The value here cannot be changed.
Name: It is the default name of the component after it is dragged. You can access this field in the form with the name in the name field. If desired, it can be named differently without using Turkish characters. There should not be different components with similar names in the form.
List users: It is the way the groups to which the details of the calendar to be displayed are connected are displayed on the client screen. The user can choose between vertical (vertical display) and horizontal (horizontal display) options and get the view as in the image shared below.
In the vertical view, user information is located on the left side of the screen and sorted downwards. In Horizantal view, user information is located above the screen and sorted to the right.
Horizantal (Horizontal) View:
Vertical View:
Module and Edit Form: The Module field shows all modules created in the App. Depending on the Module selection made, the Edit Form field just below it lists the forms in the selected module and the form (edit form) from which the data will come to the calendar is selected.
User-Heading-Start and Finish: All fields written under this heading are the fields to be matched with the fields of the edit form. The fields you select correspond to the fields in the edit form and their mapping should be done according to this detail.
User : Represents the field grouped in the calendar. For example; In a project where customer visits are tracked, the User field may correspond to sales representatives; In a project where meeting rooms are managed, the User field may correspond to meeting rooms.
Heading / Start / Finish: These fields are shown on the calendar event as in the image below.
Heading: Customer Sales Meeting, Product Update & Strategy (Meeting Rooms or Topics)
Start/ Finish: 09.00-11.00 ...
Start-Stop Hour Field:
When the calendar screen is first opened, whichever view type (day, workday, week, month) is desired, the relevant view type (day, workday, week, month) should be written in the (start-stop hour) section of the calendar properties on the studio screen.
Time Interval (Min.):
This is the field where the time intervals shown in the calendar are set in minutes. In the example below, two views of 40 minutes and 60 minutes are shared.
Form Witdh/Form Height/Height/Widht/From Left/Top:
All of these fields are used for scaling and positioning the Calendar component. Necessary adjustments can be made in these fields according to the usage preference.
User Query:
This is the field where queries for the grouping data of the calendar component are written. There are two different working methods in this area. SQL Server is selected by default on the screen. The other option is Xpoda Addon. SQL Server option is used in the example shared below.
Example:
| An important point to be considered in SQL queries written here is that there should be three columns (fields) as in the screen image shared above. These column (field) names should be UserID, UserFullName and UserColor. The UserColor column allows the data displayed in the calendar to be displayed in color depending on the group. |
To assign UserColor in your calendar projects, you can add the Color Box form tool from the form tools in Xpoda Studio to the Edit form by drag-and-drop method. This form tool is used to select the color you want to appear in the calendar. The image of the form tool in Studio is shown in the first picture and its appearance on the client screen is shown in the second picture. Once the Color Box is added to the Edit form, the user selects and saves the color they want to be displayed on the calendar. The selected color is applied to the view of the relevant record in the calendar.
Data Query; It is the area where queries for the detail data of the calendar component are written. When paying attention to the image shared below, the names of the fields in the form (image on the left) and the alias names in the query in the Data Query (image on the right) must be the same when making Edit Form matching. (Images in the second row)
If the field names are exactly the same, it is not necessary to use alias (images in the first row)
If UserTableID is not specified in the Data Query query, the calendar will not be able to determine which data to retrieve and as a result will be displayed empty. Therefore, it is mandatory to specify the UserTableID.
|
EventColor Usage: EventColor field can be added to the SQL query written in the Data Query field to make the coloring on a detail basis. When the EventColor field is added, it overrides the UserColor field in the User Query where the group data is defined and displays it in the calendar with its own color. The use of the EventColor field is optional; when this field is not used, it is not necessary to include it in the Data Query query. |
The Color Box element in the Calendar Users form is used to set the color (UserColor) of the registered users.
However, when the Color Box element is used in the Edit Form screen where the calendar data will be entered, the selected color is passed as EventColor in the system and the color taken from the 'Edit Form' is applied for the event of the related person.
Below, the default color defined for User1 is gray. If no color selection is made on the 'Edit Form', the color displayed on the calendar will be as follows.
When the color is selected from the Color Box field on the 'Edit Form' of User1 and saved, the calendar will look like below:
Let's examine the appearance of the calendar tool on the Client screen.
The options in the upper right corner of the calendar affect the display format as follows. When the display language is selected as English, the content displayed in the calendar is also in English.
Daily Display:
Monthly Display:
Weekly Display:
Agenda Display:
Work Week Display:
Clock Display:
In the hour view, the calendar shows hourly plans for each day during the week. To access the hourly details within the day, the scroll below is scrolled horizontally to access the relevant time zones.
The 'Show All Day' button in the bottom left corner of the calendar allows all time zones of the day to be displayed on the calendar. When this button is not clicked, only the 09.00 - 18.00 time range is displayed by default.
The state when the Show All Day button is not clicked:
The case when the Show All Day button is clicked:
Let's continue with explanations on how to use the calendar on the Client screen:
A new event can be created by double clicking on any empty cell on the calendar. For example, if a cell corresponding to 09:00 is double-clicked, the system opens an Edit Form by taking the information of this time interval and the relevant user. The form is automatically populated (mapped) with the date, time and user information of the selected cell.
After the registration process is completed, the information entered in the Edit Form is reflected in the calendar and displayed as an event in the relevant time period.
Double-clicking on a previously created event on the calendar opens the Edit Form again with the information of that event. Event information can be updated or deleted via this form.
Updating on the Calendar:
Events saved in the calendar can be moved to another date, day or time by drag and drop. In addition to being done visually on the calendar, this process also updates the database.
For example, you want to move a meeting scheduled between 09:00 - 11:00 on Thursday to Monday in the same time zone. You can drag the relevant event in the calendar to move it to the desired day and time. You can also increase or decrease the time range by expanding or collapsing the event view.
The Customer Sales Meeting scheduled for Thursday has been dragged to Monday, changing the day and updating the event database. This updated the date and time of the event not only in the calendar but also in the database. To check the accuracy of the changes, double click on the relevant cell to open the Edit Form and examine the details.
(Images 1, 2 and 3 show the visual steps of the related operations).
Instead of the start time of 09:00-11:00, the Customer Sales Meeting meeting was extended to 3 hours by expanding the event view and the end time of the meeting was set as 12:00. In the figure below, the event view is expanded and updated and the time information is reflected in the calendar.
Instead of the start time of 09:00-11:00, the Customer Sales Meeting meeting was extended to 3 hours by expanding the event view and the end time of the meeting was set as 12:00. In the figure below, the event view is expanded and updated and the time information is reflected in the calendar.
CALENDAR EXAMPLE:
Let's create a calendar example together.
As a first step, let's design an Edit Form screen to get the event values to be displayed on the calendar. This form allows the user to enter the necessary information about each event to be displayed on the calendar. In order to display the events correctly on the calendar, it is very important to configure the Edit Form correctly and efficiently.
Let's open a new form with the Free Form property. To do this, click on the New Form icon marked with a red frame in the image below.
Select the Free Form option from the window that opens.
When Free Form is selected, a new form screen named Form_1 will be created.
Select the form named Form_1, then in the properties section of the form on the right side of the screen, name the form by typing CustomerMeeting in the Name field (No:1). Since we are going to register to the database, let's select the type of the form as Form (No:3). Let's write the table name we want to add as XPD_MEETING in the TableName field (No:2).
Let's drag 1 Text Box, 1 Drop Down Box, 1 Color Box, 2 DateTime and 1 Button tools from the form tools section on the left side and add them to our form.
Let's select the labels in order and name them in the Text field in the properties section according to the example in the picture. After completing the naming, press Enter key.
To edit the properties of the form tools, select each form tool in turn and then make the necessary adjustments according to the example in the picture. After completing the naming in the Name field, press Enter.
When the Save button is clicked on the Client screen, let's add an action to the Save button to save the data entered in the fields on the screen to the table. Select the Save button, then select the actions section. Click on Add New Action field.
From the options;
Type of Action: When clicked.
Select the Operation: Save option.
Then save the action.
The saved action will look like the picture. If you want to delete the action, click on the trash can symbol on the right side. If you want to make changes in the action, click on the pencil symbol in the middle and if you want to stop the action, click on the pause symbol on the left side.
After completing the necessary adjustments, save the project and then click the Run button to switch to the client screen.
|
On the client screen, the last saved version of the project is displayed. If you switch to the client screen without saving the project, the last changes cannot be displayed on the screen. |
|
After the project is saved, since the Type value of the screen is selected as 'Form', a new table will be created in the XPODA database with the field names and data types added to the screen, with the name written in the Table Name field. |
Let's create a User Definition Screen to manage the calendar users that will be displayed in the Staff drop-down box. This screen will be called Calendar Users and will function to define and manage users who can be assigned to events in the calendar.
Let's open a new form with Free Form property. To do this, click on the New Form icon marked with a red frame in the image below.
Select the Free Form option from the window that opens.
When Free Form is selected, a new form screen named Form_2 will be created.
Select the form named Form_2, then edit the form properties on the right side of the screen as follows.
Let's drag 1 Text Box, 1 Color Box, 1 List and 1 Button tool from the form tools section on the left side and add them to our form.
Let's select the labels in order and name them in the Text field in the properties section according to the example in the picture. After completing the naming, press Enter key.
To edit the properties of the form tools, select each form tool in turn and then make the necessary adjustments according to the example in the picture. After completing the naming in the Name field, press Enter.
SELECT
UserTableID AS ID,
Users,
UserColor
FROM Calendar_Users WITH (NOLOCK)
When the Save button is clicked on the Client screen, let's add an action to the Save button to save the data entered in the fields on the screen to the table. Select the Save button, then select the actions section. Click on Add New Action field.
From the options;
Type of Action: When clicked.
Select the Operation: Save option.
Then save the action.
The saved action will look like the picture. If you want to delete the action, click on the trash can symbol on the right side. If you want to make changes in the action, click on the pencil symbol in the middle and if you want to stop the action, click on the pause symbol on the left side.
When the Client screen is opened, let's add an action to display the previously saved data on the related screen on the List form tool. With this action, the list tool is automatically triggered.
The data returned from the query result in the list will be displayed on the list.
To add the action that triggers the List form tool when the screen opens, double click on the form named Calender Users and then select the actions section. Click on Add New Action field.
From the options that come up;
Type of Action: When the form is opened.
Operation: Select Update Value.
Select Value Area: GridListe_1.
Then save the action.
The saved action will look like the picture. If you want to delete the action, click on the trash can symbol on the right side. If you want to make changes in the action, click on the pencil symbol in the middle and if you want to stop the action, click on the pause symbol on the left side.
When the Save button is clicked on the Client screen, the data entered in the fields on the screen will be saved in the table written in the Table Name field. In order to display the data in the table on the list after saving, let's add an action to the Save button to trigger the list tool. Select the Save button, then select the actions section. Click on Add New Action field.
From the options;
Type of Action: When clicked (No:1).
Select Operation: Update Value (No:2)
Value: GridListe_1 (No:3)
Then save the action (No:4).
After completing the necessary adjustments, let's save the project and then switch to the client screen by clicking the Run button. Let's add User1, User2 and User3 users and select and save the desired colors for them.
|
After the project is saved, since the Type value of the screen is selected as 'Form', a new table will be created in the XPODA database with the field names and data types added to the screen, with the name written in the Table Name field. |
Let's enter the user names from the Users field on the screen and after selecting the colors for each user, let's save with the Save button.
After completing the above steps, we can continue with the edits made on the Edit Form screen (CustomerMeeting). In order to get the users to be displayed in the Personnel field on the Edit Form from the Calendar_Users table, let's write a query in the drop-down box as follows.
Personel Popup Box Query:
SELECT
UserTableID AS ID,
Users
FROM Calendar_Users WITH (NOLOCK)
Client side view:
Let's create a new form with the Free Form property. To do this, click on the new Form icon marked with a red frame in the image below.
Select the Free Form option from the window that opens.
When Free Form is selected, a new form screen named Form_3 will be created.
Select the form named Form_3, then edit the form properties on the right side of the screen as follows.
Select the Properties field indicated by number 1. Then select the Report option from the Type field shown with number 2.
When the Type property of the forms is selected as 'Form', a new table is created under the XPODA database in SQL with the name written in the Table Name property. If table creation is not desired, the Type property of the relevant form should be selected as 'Report'. The name written in the Display Name field is the name that the form is desired to appear on the client screen. It can be written using Turkish characters. (2. Image No:3)
The form we created is opened with Free Form and Report properties.
Drag and drop the Calendar form tool from the area shown with number 1 to our form. After this operation, the Calendar form tool will be added to our form as shown in number 2.
On the Client screen, first select the Calendar form tool to add the information that needs to be displayed on the Calendar. Then, let's write our query in the SQL Query field in the properties section on the right side. Below is a sample SQL query for this purpose:
SELECT
UserTableID AS UserID ,
Users AS UserFullName,
UserColor AS UserColor
FROM Calendar_Users WITH (NOLOCK)
The following steps should be followed to verify that the queries written in the SQL Query field are working correctly:
Clicking on the query wizard field indicated by number 1 will open the Query Builder screen.
Clicking on the button with the ' ! ' icon shown with number 2 will open the Query Result screen, which returns the result of the query written on the screen.
If the Query Result screen with number 3 shows a result, the query is working correctly.
Let's make the relevant mappings in the other fields of the calendar element in the properties section and write the necessary query in the Data Query field.
In order to transfer the calendar data to the calendar correctly, let's perform the appropriate matching process from the fields numbered 3 below.
|
In the Data Query query, the names given in Alias must be exactly the same as the fields of the matching form. |
Data Query:
SELECT
UserTableID ,
Personnel AS Personnel ,
Topic AS Topic,
StartDate AS StartDate,
EndDate AS EndDate ,
RecordColor AS EventColor
FROM XPD_MEETING WITH (NOLOCK)
Save the project and then click the Run button to switch to the client screen.
Our calendar is now ready to display events. Now it is time to enter the meeting (event) information we want to show on the calendar via the edit form. We can go to the edit form directly or we can access the edit form by double clicking on the cell corresponding to the desired user and time on the calendar.
On the Client screen, to create a new record via Edit Form, click on the downward icon next to the Personnel field, select the first of the options, then enter the desired information in the Topic, StartDate and EndDate fields. Select the desired color from the Color Box field. If the color is not selected from this field, the color of the user that we set in the screen where we define the users (Calendar Users) will be displayed on the calendar. If the color is selected in the edit form, EventColor will override UserColor and the event on the calendar will be displayed in the color we selected in the edit form (pink). Then click on the Save button to create our record. Now the recorded event (Meeting) can be viewed on the Calendar.
Let's go to the screen with the calendar and perform our control operation.
Template Usage Example in Calendar:
There are two important things to consider when creating a template in the calendar:
1.Mapping with Edit Form fields:
There is a special format determined by the system for four fields and these fields must be used in accordance with these formats. These formats are shared below.
$Pdata.UserID$
$Pdata.Title$
$Pxpoda.toString(data.start, "hh:mm")$
$Pxpoda.toString(data.end, "hh:mm")$
|
If the User Field is not an ID but a name or any other data, it can be used just like the use of additional fields from the data query query. This is explained in detail in item 2 below. |
2.Additional fields from Data Query query:
If, apart from these four basic fields, there are other fields that come from the Data Query query, these fields should be used with the alias names you provide in the query. In this case, the fields should be written in the following format:
$Pdata.Alias$
Alias here should be the exact equivalent of the alias you specified in your Data Query query. An example of this situation is shared below.
SELECT
X.UserTableID ,
Personnel AS Personnel ,
Users AS Users,
Topic AS Topic,
StartDate AS StartDate,
EndDate AS EndDate ,
Color AS EventColor,
UserImage
FROM XPD_MEETING X WITH (NOLOCK)
LEFT JOIN Calendar_Users C ON X.Personnel=C.UserTableID
Client Screen View of Using Calendar with Template Feature: