Calendar Event Editor

[heavenite]

I want to implement a custom Event Editor for a Calendar, with a form/grid or whatever. But I can not get it to work, by calendar.setCanEditEvents(true); and addEventClickHandler to init a Event Editor. What can I do ?

[Isomorphic]

What issue specifically are you having - event not firing, can't suppress default dialog, something else?

[heavenite]

Sorry for causing some misunderstanding of the term "Event". I use Canlendar to display "Marketing Event". So, an Event/Activity will show on my Canlendar as list and wait for some editing or viewing in detail.

I just can not satisfy the default editor for the Event/Activity and want to make some kind of custom editor. I don't know how ? Please advise...

[Isomorphic]

You can provide your own completely custom handler by adding an event click handler which suppresses the standard edit-behavior and shows your own components for editing an event.

Here's a quick example, based on the 'simple calendar' example in the showcase, demonstrating this approach.
In this case the custom editor is a simple dynamic form that pops up in front of the calendar, but you could obviously do whatever you want in response to the event click.

public class SimpleCalendarSample implements EntryPoint {

    private Calendar calendar;
    public void onModuleLoad() {
        calendar = new Calendar();
        calendar.setData(CalendarData.getRecords());
        
        // disallow editing of new events via arbitrary click
        calendar.setCanCreateEvents(false);
        
        // Show a custom editor for existing events
        calendar.addEventClickHandler(new EventClickHandler() {

            @Override
            public void onEventClick(CalendarEventClick event) {
                editEvent(event.getEvent());
                event.cancel();
                
            }
        });
        
        calendar.draw();
    }
    private DynamicForm editForm;
    private CalendarEvent currentEvent;
    public void editEvent(CalendarEvent calendarEvent) {
        currentEvent = calendarEvent;
        if (editForm == null) {
            editForm = new DynamicForm();
            editForm.setBackgroundColor("red");
            TextItem titleItem = new TextItem("name", "Event Name");
            TextItem descriptionItem = new TextItem("desc", "Description");
            ButtonItem saveButton = new ButtonItem("Save");
            saveButton.addClickHandler(new ClickHandler() {
                
                @Override
                public void onClick(ClickEvent event) {
                    
                    calendar.updateEvent(currentEvent, 
                            currentEvent.getStartDate(), 
                            currentEvent.getEndDate(), 
                            event.getForm().getValueAsString("name"),
                            event.getForm().getValueAsString("desc"));
                    
                    editForm.hide();
                    
                }
            });
            editForm.setItems(titleItem, descriptionItem, saveButton);
        }
        editForm.setValue("name", currentEvent.getName());
        editForm.setValue("desc", currentEvent.getDescription());
        editForm.show();
        
    }

}

[matucasal]

Hello Isomorphic,

I read your solution and it is very interesting. However, it is not possible to use your own DynamicForm when you try to add a new event.

Does anyone know how to use my own dynamic form when I add a new event ?

Thanks!