CRUD Calendar Items"
(→Create) |
|||
Line 28: | Line 28: | ||
</vlayout> | </vlayout> | ||
</popup> | </popup> | ||
+ | </source> | ||
+ | |||
+ | Then we need to add an event listener to open this popup and initialize UI with user-clicked date/time. | ||
+ | |||
+ | <source lang='java'> | ||
+ | @Listen(CalendarsEvent.ON_ITEM_CREATE + " = #calendars") | ||
+ | public void showCreationBox(CalendarsEvent event) { | ||
+ | //initialize datebox with the user-clicked date/time | ||
+ | beginBox.setValue(event.getBeginDate()); | ||
+ | endBox.setValue(event.getEndDate()); | ||
+ | //reset previous values | ||
+ | titleBox.setValue(""); | ||
+ | contentBox.setValue(""); | ||
+ | //put focus for user convenience | ||
+ | titleBox.setFocus(true); | ||
+ | |||
+ | toCreateMode(); | ||
+ | creationBox.open(calendars, "middle_center"); | ||
+ | } | ||
</source> | </source> | ||
Revision as of 10:12, 29 January 2021
Since Calendars support model-driven display, to manipulate (CRUD) items on the calendars, you actually need to manipulate CalendarModel via add() and remove(). By default, when an end-user interacts with this component, it doesn't add or delete items automatically. Application developers need to add event listeners to implement creation, update, and deletion of CalendarItem by themselves.
Here we demonstrate the basic approach with an example and the default implementation: SimpleCalendarModel and DefaultCalendarItem.
Create
Creation Popup
To allow users input, we need to build UI for properties of DefaultCalendarItem. Here is a simple example:
<popup id="creationBox">
<vlayout>
<datebox id="beginBox" placeholder="beginning date" format="yyyy-MM-dd HH:mm" hflex="min"/>
<datebox id="endBox" placeholder="end date" format="yyyy-MM-dd HH:mm" hflex="min"/>
<textbox id="titleBox" placeholder="title"/>
<textbox id="contentBox" placeholder="content"/>
<hlayout>
<button label="Cancel"/>
<button id="update" label="Update"/>
<button id="delete" label="Delete"/>
<button id="create" label="Create"/>
</hlayout>
</vlayout>
</popup>
Then we need to add an event listener to open this popup and initialize UI with user-clicked date/time.
@Listen(CalendarsEvent.ON_ITEM_CREATE + " = #calendars")
public void showCreationBox(CalendarsEvent event) {
//initialize datebox with the user-clicked date/time
beginBox.setValue(event.getBeginDate());
endBox.setValue(event.getEndDate());
//reset previous values
titleBox.setValue("");
contentBox.setValue("");
//put focus for user convenience
titleBox.setFocus(true);
toCreateMode();
creationBox.open(calendars, "middle_center");
}
Read
Update
Delete
The example project is at Github