CRUD Calendar Items

Since Calendars support model-driven rendering, 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.

Create

Creation Popup

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

Delete

The example project is at Github