How to customize MultiViewCalendar Component to Show Two Months Vertically

[Sashika]

Hi, 
I need to customize the MultiViewCalendar for angular to have two months vertically for select two dates ranges. The main reason is to use a date picker in this way is to allow users to select a date range and see it and highlighted range.
The expected way of the MultiViewCalendar is like this,

• The user clicks on the text box and it will open the MultiViewCalendar.
• MultiViewCalendar will show two near two months.

When the user selects a date from the first calendar it should highlight the start date and when the user selects the second month it should highlight the end date and whole selected range. This we can handle using one of your examples.

What we stuck in showing two months and allow users to navigate forward and backward and select the end date in the second calendar view. Example view is something like this.

[Silviya]

Hi Sashika,

Thanks for the details.

Indeed the DateRangeSelectionDirective allows for the interactive selection of a date range by the user.

As for the vertical view - the MultiViewCalendar doesn't have this kind of functionality right now.

Actually, there is a feature request regarding it in our Feedback portal. There people can upvote it and increase its popularity. If you want to, you can follow this thread or add your vote: https://feedback.telerik.com/kendo-angular-ui/1506602-vertical-orientation-in-multiviewcalendar
We track the customer demand and consider adding functionality based on the votes and estimated business value.

On a side note, I have an idea that may not exactly fit you project's requirements but it is an option if the problem with the 2-month view is there isn't enough space for it to be rendered. There is something like a workaround where you keep the date range selection functionality but have it in a per-month view. Like so:

Here is the stackblitz for this approach:  https://stackblitz.com/edit/angular-jb7yww?file=app/app.component.ts

Regards,
Silviya
Progress Telerik