diff --git a/tests/visual/src/misc/calendar-infinite-rtl.html b/tests/visual/src/misc/calendar-infinite-rtl.html
index e054258a493..e309ac84c26 100644
--- a/tests/visual/src/misc/calendar-infinite-rtl.html
+++ b/tests/visual/src/misc/calendar-infinite-rtl.html
@@ -10,7 +10,7 @@
 
     <style>
         #test-area {
-            grid-template-columns: repeat(6, 1fr);
+            grid-template-columns: repeat(2, 1fr);
         }
     </style>
 </head>
@@ -18,11 +18,8 @@
 
     <div id="test-area" class="grid">
 
-
-        <span class="col-3">infinite calendar month</span>
-        <span class="col-3">infinite calendar year</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar month</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -236,7 +233,223 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar with long month names</div>
+            <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <kendo-calendar-navigation class="k-calendar-navigation">
+                    <span class="k-calendar-navigation-highlight"></span>
+                    <kendo-virtualization class="k-content k-scrollable">
+                        <ul class="k-reset">
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2018</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                            <li><span>de maig</span></li>
+                            <li><span>de juny</span></li>
+                            <li><span>de jul.</span></li>
+                            <li><span>d’ag.</span></li>
+                            <li><span>de set.</span></li>
+                            <li><span>d’oct.</span></li>
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2019</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                            <li><span>de maig</span></li>
+                            <li><span>de juny</span></li>
+                            <li><span>de jul.</span></li>
+                            <li><span>d’ag.</span></li>
+                            <li><span>de set.</span></li>
+                            <li><span>d’oct.</span></li>
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2020</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                        </ul>
+                        <!-- virtualizaton scrollbar -->
+                        <div class="k-scrollable-placeholder" style="height: 1000px;"></div>
+                    </kendo-virtualization>
+                </kendo-calendar-navigation>
+                <kendo-calendar-viewlist class="k-calendar-view k-calendar-monthview k-vstack">
+                    <kendo-calendar-header class="k-calendar-header k-hstack">
+                        <button is="Button" fillMode="flat" class="k-calendar-title k-title">d’abril 2018</button>
+                        <span class="k-spacer"></span>
+                        <span class="k-calendar-nav k-hstack">
+                            <span class="k-nav-today">Today</span>
+                        </span>
+                    </kendo-calendar-header>
+                    <table class="k-calendar-table k-calendar-weekdays">
+                        <colgroup>
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                        </colgroup>
+                        <thead class="k-calendar-thead">
+                            <tr class="k-calendar-tr">
+                                <th class="k-calendar-th">dg.</th>
+                                <th class="k-calendar-th">dl.</th>
+                                <th class="k-calendar-th">dt.</th>
+                                <th class="k-calendar-th">dc.</th>
+                                <th class="k-calendar-th">dj.</th>
+                                <th class="k-calendar-th">dv.</th>
+                                <th class="k-calendar-th">ds.</th>
+                            </tr>
+                        </thead>
+                    </table>
+                    <kendo-virtualization class="k-content k-scrollable k-flex">
+                        <table class="k-calendar-table">
+                            <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                            </colgroup>
+                            <tbody class="k-calendar-tbody">
+                                <tr class="k-calendar-tr">
+                                    <th class="k-calendar-caption" scope="col" colspan="7">d’abril 2018</th>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">1</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">2</span>
+                                    </td>
+                                    <td class="k-calendar-td k-today">
+                                        <span class="k-link">3</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-hover">
+                                        <span class="k-link">4</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-focused">
+                                        <span class="k-link">5</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected">
+                                        <span class="k-link">6</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">7</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">8</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">9</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">10</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-hover k-state-focused">
+                                        <span class="k-link">11</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected k-state-focused">
+                                        <span class="k-link">12</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected k-state-hover">
+                                        <span class="k-link">13</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">14</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">15</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">16</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">17</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">18</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">19</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">20</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">21</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">22</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">23</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">24</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">25</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">26</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">27</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">28</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">29</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">30</span>
+                                    </td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                </tr>
+                            </tbody>
+                            <tbody class="k-calendar-tbody">
+                                <tr class="k-calendar-tr">
+                                    <th class="k-calendar-caption" scope="col" colspan="7">May 2018</th>
+                                </tr>
+                                <!-- content omitted for brevity-->
+                            </tbody>
+                        </table>
+                        <div class="k-scrollable-placeholder" style="height: 1000px;"></div>
+                    </kendo-virtualization>
+                </kendo-calendar-viewlist>
+            </kendo-calendar>
+        </section>
+
+        <section>
+            <div>infinite calendar year</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -393,11 +606,8 @@
             </kendo-calendar>
         </section>
 
-
-        <span class="col-3">infinite calendar decade</span>
-        <span class="col-3">infinite calendar century</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar decade</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -530,7 +740,8 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar century</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -651,10 +862,8 @@
             </kendo-calendar>
         </section>
 
-        <span class="col-3">infinite calendar empty cells</span>
-        <span class="col-3">infinite calendar - week number column</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar empty cells</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -746,7 +955,8 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar - week number column</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite k-week-number" dir="rtl">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -1471,4 +1681,4 @@
     </div>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/tests/visual/src/misc/calendar-infinite.html b/tests/visual/src/misc/calendar-infinite.html
index 50afc7e5ff7..aecedf86ae8 100644
--- a/tests/visual/src/misc/calendar-infinite.html
+++ b/tests/visual/src/misc/calendar-infinite.html
@@ -10,7 +10,7 @@
 
     <style>
         #test-area {
-            grid-template-columns: repeat(6, 1fr);
+            grid-template-columns: repeat(2, 1fr);
         }
     </style>
 </head>
@@ -18,11 +18,8 @@
 
     <div id="test-area" class="grid">
 
-
-        <span class="col-3">infinite calendar month</span>
-        <span class="col-3">infinite calendar year</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar month</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -236,7 +233,223 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar with long month names</span>
+            <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
+                <kendo-calendar-navigation class="k-calendar-navigation">
+                    <span class="k-calendar-navigation-highlight"></span>
+                    <kendo-virtualization class="k-content k-scrollable">
+                        <ul class="k-reset">
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2018</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                            <li><span>de maig</span></li>
+                            <li><span>de juny</span></li>
+                            <li><span>de jul.</span></li>
+                            <li><span>d’ag.</span></li>
+                            <li><span>de set.</span></li>
+                            <li><span>d’oct.</span></li>
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2019</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                            <li><span>de maig</span></li>
+                            <li><span>de juny</span></li>
+                            <li><span>de jul.</span></li>
+                            <li><span>d’ag.</span></li>
+                            <li><span>de set.</span></li>
+                            <li><span>d’oct.</span></li>
+                            <li><span>de nov.</span></li>
+                            <li><span>de des.</span></li>
+                            <li><span class="k-calendar-navigation-marker">2020</span></li>
+                            <li><span>de febr.</span></li>
+                            <li><span>de març</span></li>
+                            <li><span>d’abr.</span></li>
+                        </ul>
+                        <!-- virtualizaton scrollbar -->
+                        <div class="k-scrollable-placeholder" style="height: 1000px;"></div>
+                    </kendo-virtualization>
+                </kendo-calendar-navigation>
+                <kendo-calendar-viewlist class="k-calendar-view k-calendar-monthview k-vstack">
+                    <kendo-calendar-header class="k-calendar-header k-hstack">
+                        <button is="Button" fillMode="flat" class="k-calendar-title k-title">d’abril 2018</button>
+                        <span class="k-spacer"></span>
+                        <span class="k-calendar-nav k-hstack">
+                            <span class="k-nav-today">Today</span>
+                        </span>
+                    </kendo-calendar-header>
+                    <table class="k-calendar-table k-calendar-weekdays">
+                        <colgroup>
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                            <col />
+                        </colgroup>
+                        <thead class="k-calendar-thead">
+                            <tr class="k-calendar-tr">
+                                <th class="k-calendar-th">dg.</th>
+                                <th class="k-calendar-th">dl.</th>
+                                <th class="k-calendar-th">dt.</th>
+                                <th class="k-calendar-th">dc.</th>
+                                <th class="k-calendar-th">dj.</th>
+                                <th class="k-calendar-th">dv.</th>
+                                <th class="k-calendar-th">ds.</th>
+                            </tr>
+                        </thead>
+                    </table>
+                    <kendo-virtualization class="k-content k-scrollable k-flex">
+                        <table class="k-calendar-table">
+                            <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                                <col />
+                            </colgroup>
+                            <tbody class="k-calendar-tbody">
+                                <tr class="k-calendar-tr">
+                                    <th class="k-calendar-caption" scope="col" colspan="7">d’abril 2018</th>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">1</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">2</span>
+                                    </td>
+                                    <td class="k-calendar-td k-today">
+                                        <span class="k-link">3</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-hover">
+                                        <span class="k-link">4</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-focused">
+                                        <span class="k-link">5</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected">
+                                        <span class="k-link">6</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">7</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">8</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">9</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">10</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-hover k-state-focused">
+                                        <span class="k-link">11</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected k-state-focused">
+                                        <span class="k-link">12</span>
+                                    </td>
+                                    <td class="k-calendar-td k-state-selected k-state-hover">
+                                        <span class="k-link">13</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">14</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">15</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">16</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">17</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">18</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">19</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">20</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">21</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">22</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">23</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">24</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">25</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">26</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">27</span>
+                                    </td>
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">28</span>
+                                    </td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-weekend">
+                                        <span class="k-link">29</span>
+                                    </td>
+                                    <td class="k-calendar-td">
+                                        <span class="k-link">30</span>
+                                    </td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                </tr>
+                                <tr class="k-calendar-tr">
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                    <td class="k-calendar-td k-other-month"></td>
+                                </tr>
+                            </tbody>
+                            <tbody class="k-calendar-tbody">
+                                <tr class="k-calendar-tr">
+                                    <th class="k-calendar-caption" scope="col" colspan="7">May 2018</th>
+                                </tr>
+                                <!-- content omitted for brevity-->
+                            </tbody>
+                        </table>
+                        <div class="k-scrollable-placeholder" style="height: 1000px;"></div>
+                    </kendo-virtualization>
+                </kendo-calendar-viewlist>
+            </kendo-calendar>
+        </section>
+
+        <section>
+            <div>infinite calendar year</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -393,11 +606,8 @@
             </kendo-calendar>
         </section>
 
-
-        <span class="col-3">infinite calendar decade</span>
-        <span class="col-3">infinite calendar century</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar decade</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -530,7 +740,8 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar century</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -651,10 +862,8 @@
             </kendo-calendar>
         </section>
 
-        <span class="col-3">infinite calendar empty cells</span>
-        <span class="col-3">infinite calendar - week number column</span>
-
-        <section class="col-3">
+        <section>
+            <div>infinite calendar empty cells</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -746,7 +955,8 @@
             </kendo-calendar>
         </section>
 
-        <section class="col-3">
+        <section>
+            <div>infinite calendar - week number column</div>
             <kendo-calendar class="k-widget k-calendar k-calendar-infinite k-week-number">
                 <kendo-calendar-navigation class="k-calendar-navigation">
                     <span class="k-calendar-navigation-highlight"></span>
@@ -1471,4 +1681,4 @@
     </div>
 
 </body>
-</html>
+</html>
\ No newline at end of file