A couple of Calendar control questions

So the built-in Calendar control is very nice, and using things learned from sessionplanner tutorial I’m easily able to get it doing a bit of what we need. There are a few questions/etc, though…

Firstly, the view defaults to a weekly view - which is great - but if a user clicks a day at the top it switches to a day-only view, which is also probably good, but there doesn’t seem to be a way to get back to the original weekly view without killing the screen entirely and going back in. Am I missing something?

Secondly, I see that via the CalendarRangeSelect event I could easily implement the feature of a user being able to add an appointment view drag-selecting where they want it, but I feel an easier way would be allowing a user to simply single-click where they’d like it to start and then popping up an editor just like the tutorial shows for clicking on an existing event. But there doesn’t seem to be an event fired when a user clicks on a non-event area of the calendar. Is there another way to implement this functionality? Or are we stuck with having users drag-select to do it?

Hi,

Unfortunately, the Calendar component has no default functionality to go back, because the corresponding view (month, week, day) is selected depending on startDate and endDate values. You can implement such functionality using calendar listeners for CalendarDateClickEvent and CalendarWeekClickEvent.

You can subscribe to CalendarRangeSelectEvent which triggers even if a single day is selected. Alternatively, subscribe to CalendarDateClickEvent and show a popup window on a day number click.

Regards,
Gleb

Hrmmm, I’ll try to figure out something that gives a good user experience.

That may not be what I’m wanting. I’d like to have it be where a user simply single clicks, say right in an empty area at noon on Tuesday for example, trap that single click as an event, and then pop up an editor to add an appointment at that date/time. I don’t think the framework has an event for that, though.

Dragging is an extra user action I’m trying to avoid.

1 Like

Revisiting this and tagging @stukalov because he asked for feedback as to features that would be helpful.

Since we have the CalendarEventClick event now, perhaps CalendarOutsideEventClick or CalendarNonEventClick would be a good thing to have - if a user clicks anywhere on the “canvas” outside of an existing event, an event is fired, supplying the date/time where the user clicked, like the current CalendarRangeSelect event now gives the start/end date/time.

I’m attaching a screenshot of our scheduler as it stands for visual reference. Let’s say a user wanted to schedule someone for Friday 3/6/2020 at 1 PM - they just single click there, and then an event would be fired which I’d have handled in the controller just like any other event.

How difficult is adding something like this?

schedule

2 Likes

I’m not opposed to attempting to add this myself; I just need a direction to look in, as I’m thinking it’s probably something buried below the CUBA layer.

Hi,

Thank you for your feedback and idea. We appreciate PRs from our community members but in this case, the underlying Vaadin component needs to be extended which is hard, since most Vaadin API is private. To solve such problems we forked Vaadin. I’ve created a GitHub issue.

Regards,
Gleb

Wow - @gorelov - I see this was added with 7.2.3 - and I’ve already implemented it and it works exactly like I’d expect it to! Very nice!

1 Like