CRUD Calendar Items"

From Documentation
(Created page with "{{ZKCalendarEssentialsPageHeader}} __TOC__ Since Calendars support model-driven rendering, to manipulate (CRUD) items on the calendars, you actually need to manipulate <tt>C...")
 
Line 4: Line 4:
 
__TOC__  
 
__TOC__  
  
Since Calendars support model-driven rendering, to manipulate (CRUD) items on the calendars,  you actually need to manipulate <tt>CalendarModel</tt> via <tt>add()</tt> and <tt>remove()</tt>. 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 <tt>CalendarItem</tt> by themselves.  
+
Since Calendars support model-driven display, to manipulate (CRUD) items on the calendars,  you actually need to manipulate <tt>CalendarModel</tt> via <tt>add()</tt> and <tt>remove()</tt>. 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 <tt>CalendarItem</tt> by themselves.
 +
 
 +
Here we demonstrate the basic approach with an example and the default implementation: <tt>SimpleCalendarModel</tt> and <tt>DefaultCalendarItem</tt>.
  
 
= Create =  
 
= Create =  
  
 
== Creation Popup==
 
== Creation Popup==
 +
To allow users input, we need to build UI for properties of
 
<source lang='xml'>
 
<source lang='xml'>
 
         <popup id="creationBox">
 
         <popup id="creationBox">

Revision as of 10:06, 29 January 2021


CRUD Calendar Items




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

        <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>


Read

Update

Delete

The example project is at Github


Last Update : 2021/01/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.