Allow scrolling on the calendar (Forward/Backwards)

Support
#1

Good day

I have a calendar on my main window screen which only display the current month and user is unable to navigate to previous or month ahead. I would like to add a function that allow the user to navigate backwards to previous months or forward to month in the future.

I got two listeners:

addForwardClickListener() - adds listener for calendar forward scrolling.
addBackwardClickListener() - adds listener for calendar backward scrolling.

but not sure if they are a solution.
If they can solve my problem, please provide me with an explanation and example on how to use them.

home

#3

Hello @Indileni

The Calendar component has navigationButtonsVisible attribute that allows user to navigate between weeks and days.

These listeners are associated with the navigation buttons, not the scrollbar:
addForwardClickListener() - adds a listener that is invoked when the user clicks forward navigation button. The listener only works when the navigationButtonsVisible attribute is true.
addBackwardClickListener() - adds a listener that is invoked when the user clicks backward navigation button. The listener only works when the navigationButtonsVisible attribute is true.

image

If you want to have navigation buttons to navigate between months you can use the following sample:
XML descriptor

<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="msg://monthCalendarScreen.caption"
        messagesPack="com.company.sample.web.screens">
    <layout expand="calendar">
        <hbox spacing="true">
            <button id="previousMonthBtn" caption="PREVIOUS" icon="ANGLE_LEFT"/>
            <label id="rangeLabel"/>
            <button id="nextMonthBtn" caption="NEXT" icon="ANGLE_RIGHT"/>
        </hbox>
        <calendar id="calendar"
                  width="100%"
                  startDate="2020-08-01"
                  endDate="2020-08-31"/>
    </layout>
</window>

Screen controller

@UiController("sample_MonthCalendarScreen")
@UiDescriptor("month-calendar-screen.xml")
public class MonthCalendarScreen extends Screen {

    @Inject
    protected Label<String> rangeLabel;
    @Inject
    protected Calendar<Date> calendar;

    @Subscribe
    protected void onBeforeShow(BeforeShowEvent event) {
        updateRangeLabel();
    }

    @Subscribe("previousMonthBtn")
    protected void onPreviousMonthBtnClick(Button.ClickEvent event) {
        Date startDate = calendar.getStartDate();
        startDate = DateUtils.addMonths(startDate, -1);
        calendar.setStartDate(startDate);

        Date endDate = calendar.getEndDate();
        endDate = DateUtils.addMonths(endDate, -1);
        java.util.Calendar cal = DateUtils.toCalendar(endDate);
        cal.set(java.util.Calendar.DAY_OF_MONTH, cal.getActualMaximum(java.util.Calendar.DAY_OF_MONTH));
        calendar.setEndDate(cal.getTime());

        updateRangeLabel();
    }

    @Subscribe("nextMonthBtn")
    protected void onNextMonthBtnClick(Button.ClickEvent event) {
        Date startDate = calendar.getStartDate();
        startDate = DateUtils.addMonths(startDate, 1);
        calendar.setStartDate(startDate);

        Date endDate = calendar.getEndDate();
        endDate = DateUtils.addMonths(endDate, 1);
        java.util.Calendar cal = DateUtils.toCalendar(endDate);
        cal.set(java.util.Calendar.DAY_OF_MONTH, cal.getActualMaximum(java.util.Calendar.DAY_OF_MONTH));
        calendar.setEndDate(cal.getTime());

        updateRangeLabel();
    }

    protected void updateRangeLabel() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        rangeLabel.setValue(sdf.format(calendar.getStartDate()) + " - " + sdf.format(calendar.getEndDate()));
    }
}

image

Regards,
Gleb

#5

Thank you @durygin