Calendar Control in UX Component

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.

Download Component

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.

Download Component

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 

Download Component

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

Download Component

Making Ajax callbacks to populate the Calendar 

Download Component

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