How to Code Calendar Drag and Drop

Support
#1

Wondering how to code drag and drops for the calendar component? I have an entity data source. When I drag the calendar, the event start time and end time isn’t updated in the entity. I’ve discovered the addEventMoveListener, but uncertain about how to use it to update the event fields.

Is using addEventMoveListener the preferred way? Is there an example of how to do this?

#3

Hi!
I am using

calendarComponent.addEventResizeListener(e -> {
            Entity entity = ((EntityCalendarEvent) e.getCalendarEvent()).getEntity();
            Planificare myPlanificare = (Planificare) entity;

            myPlanificare.setDataInceput(e.getNewStart());
            myPlanificare.setDataSfarsit(e.getNewEnd());
            planificaresDs.commit();
        });

This means, get the entity from the event, set begin date and end date, commit the entity.

Kind regards

#4

Hello!

I have same question.

In addEventMoveListener we should also update endDate, but there is no e.getNewEnd() method, like in
addEventResizeListener case.
What is correct way to find new endDate ?

#5

I ended up coding this:

@Override
public void init(Map<String, Object> params) {

    calendar.addDateClickListener(new Calendar.CalendarDateClickListener() {
        @Override
        public void dateClick(Calendar.CalendarDateClickEvent event) {
            event.getCalendar().setStartDate(event.getDate());
            event.getCalendar().setEndDate(event.getDate());
        }
    });

    calendar.addEventClickListener(event ->
            openEditor(event.getEntity(), WindowManager.OpenType.DIALOG)
                    .addCloseWithCommitListener(() -> followUpsDs.refresh()));

    calendar.addEventMoveListener(event -> {
        Entity entity = ((EntityCalendarEvent) event.getCalendarEvent()).getEntity();
        FollowUp followUp = (FollowUp) entity;

        Date oldStartDate = followUp.getStartDate();

        followUp.setStartDate(event.getNewStart());

        followUp.setEndDate(Date.from(
                event.getNewStart().toInstant().plusMillis(
                        period(oldStartDate, followUp.getEndDate()))
        ));

        followUpsDs.commit();
    });

    calendar.addEventResizeListener(event -> {
        Entity entity = ((EntityCalendarEvent) event.getCalendarEvent()).getEntity();
        FollowUp followUp = (FollowUp) entity;

        followUp.setStartDate(event.getNewStart());
        followUp.setEndDate(event.getNewEnd());
        followUpsDs.commit();
    });

    calendar.addRangeSelectListener(event -> {
        FollowUp followUp = metadata.create(FollowUp.class);
        handleRangeSelect(event.getStart(),event.getEnd());
    });

}
1 Like
#6

and this utility method:

private long period(Date start, Date end) {
    return Duration.between(start.toInstant(), end.toInstant()).toMillis();

}
#7

This method handles events created by selecting a range of time on the calendar:

private void handleRangeSelect(Date startDate, Date endDate) {
    FollowUp followUp = metadata.create(FollowUp.class);

    if (startDate != null && endDate != null) {
        followUp.setStartDate(startDate);
        followUp.setEndDate(endDate);
    } else if (startDate != null && endDate == null) {
        Date date = new Date();
        followUp.setStartDate(date);
        followUp.setEndDate(advanceOneHour(startDate));

    }
    openEditor(followUp, WindowManager.OpenType.DIALOG)
            .addCloseWithCommitListener(() -> followUpsDs.refresh());
}

This method is called and sets an hour default when a new event is created and a range not selected

private Date advanceOneHour (Date date){
    long oneHourInMillis = 1 * 60 * 60 * 1000;
    return new Date(date.getTime() + oneHourInMillis);
}
#9

Hi everyone,

May I know the output of this method? How the application will look like?