How to display the calendar with the classic type

[Vijayashankar]

Could you please suggest how to display the MultiViewCalendar with Classic Component style like[The month needs be present in between the left and right arrow]?

Also when the View is defined as 1, is it possible to display Month header as like "March 2020" instead of "March 2020 - March 2020".

[Tsvetomir]

Hi Vijayashankar,

The MultiViewCalendar widget initially has been implemented with the different positions of the button and the title. It does not have component types that would control its appearance. Rather, the conventional Calendar has a new modern type that follows the structure of the MultiViewCalendar. Therefore, it is not possible to have the title in between the buttons.

As per the title, the usage of a single view would make the usage of the MultiViewCalendar needless. You could change it dynamically as shown below. However, if you would like to make use of a single view, I recommend taking advantage of the conventional Calendar with the componentType option set to "modern".

$("a.k-title").text("my text")

Furthermore, you should subscribe to the change event in order to change the title with the change of the selected date. 

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik

[Vijayashankar]

Thanks for your response. As you have suggested the usage of a single view is not advisable in the MultiViewCalendar, however we are trying to use MultiViewCalendar to select the DateRanges with in a month on single view, currently I am not having this option in the Conventional Calendar since the selectable property is not having an option of "range".[DOJO Link]

I want to display the title once we selected the month view, but the change event is not triggering until we select the dates.So could you please share the control which needs to bind for the change event.

 

Per the MultiViewCalendar control rendering logic I came to know if we place div with ".k-calendar-header" under the MultiViewCalendar control it will be taken as header section.  But however it's place on the bottom of the page instead of top on the screen.

Please find the same in DOJO link. Also attached the screen shot for your reference.

<div id="multiViewCalendar">
               <div class="k-calendar-header">
                  <span class="k-calendar-nav"><a href="#" role="button" class="k-button k-button-icon k-prev-view" aria-label="Previous" aria-disabled="false"><span class="k-icon k-i-arrow-60-left"></span></a><a href="#" role="button" class="k-button k-title" aria-live="assertive" aria-atomic="true" aria-disabled="false"></a><a href="#" role="button" class="k-button k-button-icon k-next-view" aria-label="Next" aria-disabled="false"><span class="k-icon k-i-arrow-60-right"></span></a></span>
               </div>
            </div>

 

[Tsvetomir]

Hi Vijayashankar,

It is correct that the months from the conventional Calendar cannot be selected. This is due to the fact that their purpose is to make navigation between different months easier. Its event handler will not allow for selection without actually diving into the respective month.

As per the positioning of the header, it is pushed due to the fact that at initialization time, the different HTML elements get prepended before the header as it is assumed that it is already at its correct position. Nevertheless, I recommend manually adjusting its position after the initialization as shown here:

https://dojo.telerik.com/IgIniSEz

I hope these clarifications prove helpful.

 

Kind regards,
Tsvetomir
Progress Telerik