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 ?
What issue specifically are you having - event not firing, can’t suppress default dialog, something else?
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…
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();
}
}
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!