Main page

Calendar with Date Selection

Description

This example shows how to build a Calendar with date selection.

Steps to recreate

1. Use the Calendar Builder to create the Calendar based on the user_events table.
   • On Step 2 select user_events in the Data Source property, user_event_date in Event Date Field, user_event_title in Event Caption field. Also check the Time stored in a separate field checkbox and select user_event_time in the Event Time field property.
   • On Step 3 select Monthly in the Type property, Full (January 2005) in Type, Abbrev (Mon, Tue) in the WeekDay Format property. Also check Show event captions in the 'Event' section and select << <January 2005 > >> in 'Navigator'.
2. Remove the EventDescription label.
3. Add Link DayNumberLink near label DayNumber and select Special Value in the Control Source Type property, CurrentProcessingDate in Control Source, Date in Data Type and enter d in the Format property. Then open the 'Href Source' window by clicking on the [...] button next to the Href Source property.
   • In the 'General' tab select CurrentProcessingDate in the 'Text from Database' and the current page in the 'Static address' property.
   • In the 'Parameters' tab add a Link Parameter with the following values: Source Type = Special Value, Parameter Source = Current Processing Date, Format = mm/dd/yyyy and Parameter name = s_date.
4. Use the Grid Builder to create grid priorities_user_events (based on the user_events and priorities tables of database Intranet).
   • On Step 2 use the Build Query option to select tables priorities and user_events. Then select field priority_id from table priorities and user_event_title, user_event_date, user_event_time and user_event_desc from table user_events. Then add the following WHERE parameter: user_events.user_event_date equals(=) s_date.
5. For Label user_event_time set the Format property to ShortTime.
6. Add the Hide-Show components Action to Before Show event of Grid.
   Also set the Action property to Hide, Condition Type property to Parameter, Compare As property to Text, Condition property to Equal.
   Also for 'Parameter1' set the Name property to s_date, Source Type property to URL.
   For 'Parameter2' set the Name property to "" and Source Type property to Expression.
7. Add the appropriate programming code in the event as shown in the example.
8. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables Used

Database: IntranetDB

Tables: user_events, priorities

Programming Notes

The Calendar Before Show Day event is used to specify the style for the selected date and show link instead the link if there are events for this day.

The Page Before Show event is used to specify the default date for the Calendar.