The Calendar element allows you to easily implement time-based tasks—such as appointment management and event planning—by offering your app the option to select a single date, multiple dates, or a specific date range.
If you want to do appointment management, event planning, or time-based filtering in your application, the ideal solution is to use the Calendar element. This element streamlines your processes by offering single, multiple, or range selection for a specific period. First, create the table you see on the screen from the Data Sources area. Then, using New SQL Action in the left panel, create an action called GetCalendarEventsAll, find your table on the left side, click the three dots, and select Add Select Query. Test and save it. Repeat the same steps to retrieve the content of a clicked event using an action called GetCalendarEvent with the Add Select by ID Query definition.
Switch to the UI Design module. Create a new page called Add Event from the Screens area in the left panel. Set the page size to mobile from the top panel. Add a screen input named StartDateInput of type DateTimeOffset to the page using the Add Screen Input button. Add a Label to the page and type Create Event inside it; set the font to Heading 2 from the Style field in the Styling panel. Add a Vertical Stack element below the Label and drag a Text Input element into it. In the Placeholder field, under Fixed Value, type Enter the Event Name. Add a DateTimeRange below the Text Input element, and set the Start Value field to Screen Inputs, Start Date Input. Add a Select Box element to your page. Set the Options field to Fixed Option List. Click the Add Field button that appears, and enter hex codes and color names into the Key and Text fields that open. Add a Button element to the page and change its text to Create. You can add a suitable icon to the button from the Icon field in the Properties panel, and change the button's color from the Fill Color field in the Styling panel.
Follow the onClick, ManageDB, Save Record steps using Add Action. Enter your table. Select all the options that appear. Bind the relevant fields from the component category to the fields inside the action. Set DateTimeRange1, value for the EndDate and StartDate fields, TextInput1, value for the EventTitle field, and SelectBox1, value for the EventColorHex field. For the ID field, set it to Default, New Guid. Add the Go Back action to the button using onClick, Navigation steps. Click the empty space next to the button and center the Column field both horizontally and vertically from the Layout field in the Styling panel.
Clone the Add Event page from the Screens area in the left panel using the Duplicate option next to it. Rename the cloned page to Event Detail. Update the Label content on this screen to Event Details. Update the Screen Input in the StartDateInput field to be named CalendarEventID, and select its type as Guid. Add the GetCalendarEvent action to the page as the Initial Action. Set the ID field that appears to Screen Inputs, CalendarEventID. Align the button to the right from the Styling field, and add a Horizontal Stack element inside the Column field. Drag the button into it and duplicate it. Type Edit inside the first button and change its icon. Change the ID field inside Save Record to Screen Inputs, CalendarEventID. Type Delete inside the second button, choose an icon, and change its color to red in the Fill field under Styling. Add the Delete Record action using onClick, ManageDB. Select the table and set the ID field that appears to CalendarEventID. Add the Navigation, Go Back action to the button using Add Action.
Set the Value field of the TextInput element by following the Action Result, GetCalendarEvent, First, EventTitle steps. Set the Date Time Range element to Action Result, GetCalendarEvent, First, StartDate. Set the EndValue field to EndDate by following the same steps.
Go to the HomePage page. Add the GetCalendarEventsAll action you previously created as the Initial Action. Add a Label element and type My Calendar inside it. Set the font to Heading 2 using the Style field in the Styling panel. Drag and drop the Calendar element onto the page. From the Options field, define the Action, Event ID Field, Event Title, StartDate, EndDate, and Event Color Hex fields in order. Turn on the DisplayEventTime field. Click the Add Action button and select the onClickDay, Navigation, Navigate steps. Set the To Screen field to your Add Event page. Set the second field that appears to CurrentDate, and set the Open As field to Drawer. Add a Navigate action using Add Action by following the onClickEvent, Navigation steps. For To Screen, set it to Event Detail, and for CalendarEventID, set it to currentEvent, ID. Set the Open As field to Drawer.
When you click the Preview button, you will see a screen where you can create your events by specifying date ranges, view them comfortably, and delete or edit them.
