The Calendar element is a calendar structure that allows users to select specific dates or date ranges. The dates selected via the calendar can be used in operations within the application. It is particularly preferred in scenarios requiring multiple date selection or management of events for specific periods.

Areas of Use

• Event planning and viewing,
• Meeting, appointment, or task tracking,
• Project schedule creation,
• Management of vacation, leave, or shift plans.

The Calendar element is only supported in web applications.

Event Planning Scenario

In a project management application, the Calendar element is used so that team members can track their meetings and tasks. Users can view relevant dates on the calendar and review the start and end dates of events. Events can be displayed in different colors (e.g., blue → meeting, green → task, orange → leave) for easier differentiation.

Connecting the Data Source

1. Go to the Datasources module.
2. Click the + icon next to the Tables heading and name the table CalendarEvents.
3. Create the following fields:

4. Define an action named CalendarEvents in the SQL Actions section.

INSERT INTO CalendarEvents (Id, EventTitle, StartDate, EndDate, EventColorHex)VALUES(NEWID(), ‘Sprint Planning’, ‘2025-09-15 09:00:00’, ‘2025-09-15 10:30:00’, ‘#007bff’),(NEWID(), ‘Team Retrospective’, ‘2025-09-17 14:00:00’, ‘2025-09-17 15:00:00’, ‘#28a745’),(NEWID(), ‘Client Meeting’, ‘2025-09-20 11:00:00’, ‘2025-09-20 12:00:00’, ‘#ffc107’),(NEWID(), ‘Product Demo’, ‘2025-09-22 16:00:00’, ‘2025-09-22 17:30:00’, ‘#17a2b8’),(NEWID(), ‘Company Holiday’, ‘2025-09-29 00:00:00’, ‘2025-09-29 23:59:59’, ‘#dc3545’);SELECT * FROM CalendarEvents;

‍

5. Reflect the data on the calendar by running the SELECT query during the Page Init phase.

UI Design Module operations

• Click the Add Action button on the right side of the application screen.
• Then select Custom > CalendarEvents.

Using Properties in the Scenario Context

• Options
  
  • Specifies the source of the data to be displayed in the Calendar.
  • Event Id Field
    
    • Event-specific identity field.
  • Event Title
    
    • The event title on the calendar.
  • Start Date
    
    • Displays the start date and time of the event.
  • End Date
    
    • Displays the end date and time of the event.
  • Event Color Hex
    
    • Determines the color in which events will appear.
  • Event Height
    
    • Sets the height of the event box on the calendar.
  • Font Color
    
    • Determines the color of the event text.
    • E.g. #000000 black, #ffffff white.
  • Font Family
    
    • Sets the font for the event title.
    • Usage: Arial, Roboto, Times New Roman, etc.
  • Font Size
    
    • Sets the font size of the event title.
    • Usage: e.g., 12px, 14px.
  • Font Weight
    
    • Sets the font weight.
    • Usage: Normal, Bold.
• CalendarStart
  
  • Sets the start date to be displayed on the calendar.
  • Usage: e.g., 2025-09-01.
• CalendarEnd
  
  • Sets the end date to be displayed on the calendar.
  • Usage: e.g., 2025-09-30.
• Panel
  
  • Sets the calendar's view.
  • Options: Daily, Weekly, Monthly.
• Display Event Time
  
  • Controls whether the date and time information of events on the calendar is displayed.

When the Scenario Step is Complete

• Events are listed on the calendar on a day/week/month basis.
• The user can see the name, date, and duration of the events.
• Events are visualized with defined color codes.
• The user can view the desired time range thanks to panel transitions.

Limitations

• Works only in web applications.
• Events cannot be configured on the Calendar without defining a data source.

Tips and Best Practices

• Always keep date fields in datetime format.
• Choose contrasting colors for different event types.
• For user experience, the weekly view is more readable in busy calendars.