Calendar Control in UX Component
- Add the Calendar Control to a UX
- Updating the end date from the start date
- Displaying Events
- Open another window showing details of the Order that was clicked on in the Calendar.
- Displaying Custom Information
- Understanding the OnItemDraw event
- Understanding the Xbasic to get the orders for a given month in the required JSON format
- Making Ajax callbacks to populate the Calendar
This page describes the embedded Calendar control for the UX; it is not as fully-featured as the Calendar Component.
In the Calendar control, you can get and set values, handle events, and submit values, just like any other UX control. In the Calendar Component, you can build a complete scheduling system with its own database tables and built-in drag and drop of appointments.
You could use Calendar controls to create a hotel room search site for consumers. You could use a Calendar component to create a full-blown scheduling system for room bookings in a hotel.
In the UX Builder, on the Controls pane expand the Data controls section and select [Calendar]
As you'll see in the following video, in most respects the Calendar control behaves like any other UX control.
You can control the current value and the low and high limits of one calendar control from another.
This video shows you how to set that up.
As shown in the above video, you need to define some events to make this happen.
The second part of the video completes the explanation of the sample.
Events can be shown in the calendar control.
How to set up a calendar to show events on each day of the month.
How to open another window showing the details of the order that was clicked on in the Calendar.
Custom information can also be inclued. This is done by utilizing the onItemDraw event.
- Introduction: Watch Video - Part 1
- Stopping the click event from bubbling up: Watch Video - Part 2
- Handling a lot of events for a given day: Watch Video - Part 3
- Displaying a pick menu for multiple events: Watch Video - Part 4
Using the a5_GetCalendarEventDataJSON function, simple table
Using the a5_GetCalendarEventDataJSON function, SQL query
- Month navigate event handler: Watch Video - Part 1
- Debug through the callbacks and connect the dots: Watch Video - Part 2
Additionally see the full Calendar Component, which allows you build a scheduling application.
The UX Component, which hosts the embedded Calendar Control. The Calendar control shares its date/time picker properties with the Textbox for date and time types.