Difference between revisions of "Calendar Options"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
| Line 312: | Line 312: | ||
!width="80%"|Notes | !width="80%"|Notes | ||
|- | |- | ||
| − | |valign="top"|Default view|| | + | |valign="top"|Default view||- |
|- | |- | ||
| − | |valign="top"|Event type column|| | + | |valign="top"|Event type column||- |
|- | |- | ||
| − | |valign="top"|Event type choices|| | + | |valign="top"|Event type choices||- |
|- | |- | ||
| − | |valign="top"|Event title column|| | + | |valign="top"|Event title column||- |
|- | |- | ||
| − | |valign="top"|Event start column|| | + | |valign="top"|Event start column||- |
|- | |- | ||
| − | |valign="top"|Event end column|| | + | |valign="top"|Event end column||- |
|- | |- | ||
| − | |valign="top"|Event repeat column|| | + | |valign="top"|Event repeat column||- |
|- | |- | ||
| − | |valign="top"|Event allday column|| | + | |valign="top"|Event allday column||- |
|- | |- | ||
| − | |valign="top"|Event key column|| | + | |valign="top"|Event key column||- |
|- | |- | ||
| − | |valign="top"|Event type value|| | + | |valign="top"|Event type value||- |
|- | |- | ||
| − | |valign="top"|Autosize|| | + | |valign="top"|Autosize||- |
|- | |- | ||
| − | |valign="top"|Other options|| | + | |valign="top"|Other options||- |
|- | |- | ||
| − | |valign="top"|Click delegate|| | + | |valign="top"|Click delegate||- |
|- | |- | ||
| − | |valign="top"|Dynamic day backcolor|| | + | |valign="top"|Dynamic day backcolor||- |
|- | |- | ||
| − | |valign="top"|Dynamic event backcolor|| | + | |valign="top"|Dynamic event backcolor||- |
|- | |- | ||
| − | |valign="top"|Dynamic event forecolor|| | + | |valign="top"|Dynamic event forecolor||- |
|- | |- | ||
| − | |valign="top"|Custom delegate library|| | + | |valign="top"|Custom delegate library||- |
|- | |- | ||
| − | |valign="top"|Filter|| | + | |valign="top"|Filter||- |
|- | |- | ||
|} | |} | ||
Revision as of 10:33, 23 September 2015
Under Construction
Contents
- 1 See Also
- 2 Overview
- 3 Lianja Web UI Calendar Demo
- 4 Calendar Table
- 5 Using a Calendar Section
- 6 Calendar Section Attributes
- 6.1 Default view
- 6.2 Event type column
- 6.3 Event type choices
- 6.4 Event title column
- 6.5 Event start column
- 6.6 Event end column
- 6.7 Event repeat column
- 6.8 Event allday column
- 6.9 Event key column
- 6.10 Event type value
- 6.11 Autosize
- 6.12 Other options
- 6.13 Click delegate
- 6.14 Dynamic day backcolor
- 6.15 Dynamic event backcolor
- 6.16 Dynamic event forecolor
- 6.17 Custom delegate library
- 6.18 Filter
- 7 Notes on Client Support
- 8 Further Customization
See Also
Overview
Calendar Sections provide a calendar interface to allow for the creation, display, update and deletion of appointments and other time planner events.
Lianja Web UI Calendar Demo
The 'Lianja Web UI Calendar Demo' (example_webapp4) is included in the Lianja App Builder distribution to demonstrate the use of a Calendar Section.
Calendar Sections are also included in 'Lianja Mobile App Demo' (lianja_mobiledemo) and 'Lianja Web UI Page Center Demo' (example_pagecenter").
This single Page App has a main Form Section for the southwind!employees table and a related Calendar Section for that employee's appointments.
Calendar Table
The example_webapp4 App uses the southwind!employees_calendar table. Its structure is listed below. Your table can have different field names and additional fields, but the data type of the fields used by the Calendar Section should match those shown here. The width of the character fields can be altered as required.
| Field | Field Name | Type | Width | Notes |
|---|---|---|---|---|
| 1 | LASTNAME | Character | 20 | Related key field. A numeric related field can also be used. Not required if no related parent Section. |
| 2 | EVENTTITLE | Character | 80 | The title for the event that will be displayed in the calendar. |
| 3 | EVENTSTART | DateTime | 8 | The start date and time of the event. |
| 4 | EVENTEND | DateTime | 8 | The end date and time of the event. |
| 5 | EVENTREPEAT | Integer | 11 | Non 0 value flags the event as a repeating event. Repeating events are repeated monthly to the end of the event year. |
| 6 | EVENTALLDAY | Logical | 1 | Whether the event lasts all day. |
| 7 | EVENTTYPE | Character | 40 | The category type for the event. |
Using a Calendar Section
The controls at the top of the Calendar Section are used to enter details about an event. Clicking on an event in the main calendar loads the event's details into the controls.
| Control | Description |
|---|---|
| Event Type | Combobox with event types. Displayed when the 'Event type choices' Section attribute is defined. |
| Event Title | Textbox to enter the title for the event. |
| Start Date | Date picker to select the start date for the event. |
| End Date | Date picker to select the end date for the event. |
| Start Time | Time picker to select the start time for the event. |
| End Time | Time picker to select the end time for the event. |
| All Day | Checkbox to flag whether the event lasts all day. |
| Repeat | Checkbox to flag whether the event is a repeating event. |
The buttons below the controls, handle data and display operations.
| Button | Description |
|---|---|
| New | Populates the controls with the current date and default times. |
| Delete | Deletes the event currently displayed in the controls. |
| Update | Saves the event currently displayed in the controls. |
| < | Calendar display goes back one year. Not available on mobile. |
| < | Calendar display goes back one month, one week or one day depending on the current view (Month, Week, Day). |
| > | Calendar display goes forward one month, one week or one day depending on the current view (Month, Week, Day). |
| > | Calendar display goes forward one year. Not available on mobile. |
| Today | Calendar display goes to Today. |
| Day | Calendar display goes to Day view. |
| Week | Calendar display goes to Week view. |
| Month | Calendar display goes to Month view. |
On the Lianja Mobile Client, the event detail controls are displayed in an overlay along with Update, Delete and Cancel buttons.
Calendar Section Attributes
Double-click the Section header or click the cog icon to access the Section Attributes.
The Details section at the top of the attributes dialog holds the specification of the database and table.
The Calendar Section options are described here.
Default view
The starting view for the calendar. 'Month', 'Week' or 'Day' can be selected, the default is 'Month'. e.g.
Month
Event type column
Required. The name of a character column. It corresponds to the 'Event Type' control. The control is a free-entry textbox unless the Event type choices is populated, in which case it is a combobox and a choice must be made from the list. The calendar can also be filtered by the event type, by specifying a valid event type in the Event type value attribute. e.g.
eventtype
Event type choices
Optional. These are choices for the Event type column and should be specified as a list of comma-separated character strings postfixed with optional background and foreground colors in the format :background:foreground. The colors are character strings and can be any of the standard web colors e.g. "pink", "lightgreen" or an HTML/CSS style color code e.g. "#cfcfcf". Events will be displayed in the calendar body using their event type's colors.
Note that if the list starts with a comma, a blank event type will be displayed until the combobox is expanded. e.g.
,Sales Meeting:yellow:black,Meeting,Vacation,Sick:red:yellow,Appointment:green:white,Other
Event title column
Required. The name of a character column. It corresponds to the 'Event Title' control, a free-entry textbox. e.g.
eventtitle
Event start column
Required. The name of a datetime column. It corresponds to the 'Start Date' and 'Start Time' date and time picker controls. e.g.
eventstart
Event end column
Required. The name of a datetime column. It corresponds to the 'End Date' and 'End Time' date and time picker controls. e.g.
eventend
Event repeat column
Required. The name of an integer or numeric column. It corresponds to the 'Repeat' checkbox control. e.g.
eventrepeat
Event allday column
Required. The name of a logical column. It corresponds to the 'All Day' checkbox control. e.g.
eventallday
Event key column
Optional.
Event type value
Optional. If specified, it should be a character string and correspond to a valid Event Type. Only events with a matching Event Type will be displayed in the calendar. e.g.
Vacation
Autosize
If checked to True, the height of the calendar cells will be autosized to fit the Section size. e.g.
True
Other options
Optional. User defined options can be specified as name=value comma-separated pairs. These will be passed as parameters to the calendar_view.rsp script. e.g.
region=US,timezone=EST
Click delegate
Optional. The name of a delegate script to be called when a cell in the calendar is clicked. Data is passed to the click delegate in JSON format. e.g.
calendar_click
function calendar_click(data)
{
// You can handle a custom calendar cell click event here
Lianja.writeLog(data);
};
{"database":"southwind","table":"employees_calendar","columns":"eventtitle,eventstart,eventend,eventrepeat,eventallday,eventtype",
"keyvalue":"Buchanan","keyexpr":"lastname","title":"Meeting","start_date":"2015-09-08","end_date":"2015-09-08","start_time":"09:00",
"end_time":"17:00","allDay":"true","repeat":"false","rowid":"42","id":0,"action":"eventclick","sectionid":"section2",
"eventtype":"eventtype","eventtypevalue":"Sales Meeting"}
Dynamic day backcolor
Optional. The name of a function in the Custom delegate library that returns dates and their associated background colors, allowing specific dates to be highlighted. e.g.
getdatecolors
The function should accept a parameter which will have one of two values: 'dates' or 'colors'.
If the parameter is 'dates', the function should return a string containing comma-separated ISO format character string dates. These can contain a single '*' to indicate either all years, all months or all days. The strings 'sunday' and 'saturday' are also recognized.
If the parameter is 'colors', the function should return a string containing comma-separated color strings (e.g. 'red' or '#FF0000'), one for each date in the dates string. The colors will be applied to the dates in order. e.g.
function getdatecolors(para1)
if para1 = "dates"
return ['2015-*-28','sunday','&(strftime("%F",dtoc(date())))','*-09-01']
else
return ['purple','yellow','blue','#FF0000']
endif
endfunc
In the example above, the 28th of every month in 2015 will have a purple background, all Sundays will have a yellow background, the current date will have a blue background and September 1st every year will have a red background.
Dynamic event backcolor
Optional. The name of a function in the Custom delegate library that returns a color string (e.g. 'red' or '#FF0000') to be used as the background color for a specific event type. e.g.
geteventback
The event type is passed as a parameter to the function. e.g.
function geteventback(para1) do case case para1 = "UK Bank Holiday" return 'red' case para1 = "US Public Holiday" return 'pink' otherwise // all other event types return 'white' endcase endfunc
Note that event type / color pairs can also be specified in the Event type choices as described above.
Dynamic event forecolor
Optional. The name of a function in the Custom delegate library that returns a color string (e.g. 'red' or '#FF0000') to be used as the foreground color for a specific event type. e.g.
geteventfore
The event type is passed as a parameter to the function. e.g.
function geteventfore(para1) do case case para1 = "UK Bank Holiday" return 'pink' case para1 = "US Public Holiday" return 'white' otherwise // all other event types return 'black' endcase endfunc
Note that event type / color pairs can also be specified in the Event type choices as described above.
Custom delegate library
Optional, required if the Dynamic day and even color functions are specified. The name of a custom library file (Lianja/VFP prg) containing the day and event dynamic color delegates. Clicking the [...] button will create a file in the App and open it in the Script Editor in the Apps workspace. e.g.
libcal_page1_section2.prg
Filter
Optional. A valid filter expression that will be used in a SQL SELECT statement to restrict the records displayed in the calendar. e.g.
eventtitle="US Public Holiday" or eventtitle='UK Bank Holiday'
Notes on Client Support
| Attribute | Notes |
|---|---|
| Default view | - |
| Event type column | - |
| Event type choices | - |
| Event title column | - |
| Event start column | - |
| Event end column | - |
| Event repeat column | - |
| Event allday column | - |
| Event key column | - |
| Event type value | - |
| Autosize | - |
| Other options | - |
| Click delegate | - |
| Dynamic day backcolor | - |
| Dynamic event backcolor | - |
| Dynamic event forecolor | - |
| Custom delegate library | - |
| Filter | - |
Further Customization
The Calendar Section is a WebViewWidget and uses the scripts 'calendar_view.rsp' and 'calendar_controller.prg'. These can be found in the Lianja Library sub-directories:
| Client | Location |
|---|---|
| App Builder | \lianja\library\ |
| App Center | \lianja\cloudserver\tenants\public\library |
| Web/Mobile Clients | \lianja\cloudserver\tenants\public\wwwroot\library |
So, for example, if you want to pass Other options to your calendar, you can add additional parameter checks at the start of calendar_view.rsp and handle them accordingly. Or you could put additional pattens into calendar_view.rsp's date background color handling.
