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
Description
This page describes the embedded Calendar control for the UX; it is not as fully-featured as the Calendar Component.
Discussion
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.
Add the Calendar Control to a UX
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.
Updating the end date from the start date
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.
You also need to write some fairly straightforward JavaScript for the events.
The second part of the video completes the explanation of the sample.
Displaying Events
Events can be shown in the calendar control.
How to set up a calendar to show events on each day of the month.
Open another window showing details of the Order that was clicked on in the Calendar.
How to open another window showing the details of the order that was clicked on in the Calendar.
Displaying Custom Information
Custom information can also be inclued. This is done by utilizing the onItemDraw event.
Understanding 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
Understanding the Xbasic to get the orders for a given month in the required JSON format
Using the a5_GetCalendarEventDataJSON function, simple table
Using the a5_GetCalendarEventDataJSON function, SQL query
Making Ajax callbacks to populate the Calendar
- 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.
See Also