Add z-index variables and update Calendars

1 files changed, 29 insertions, 14 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 8c80d0c..fa3852c 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -111,7 +111,7 @@
             <p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p>
           </section>
           <div class="columns">
-            <div class="column col-6 col-md-12">
+            <div class="column col-4 col-md-12">
               <div class="calendar">
                 <div class="calendar-nav navbar">
                   <button class="btn btn-action btn-link btn-lg">
@@ -133,9 +133,9 @@
                     <div class="calendar-date">Sat</div>
                   </div>
                   <div class="calendar-body">
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>26</button></div>
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>27</button></div>
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>28</button></div>
+                    <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div>
+                    <div class="calendar-date prev-month disabled"><button class="date-item">27</button></div>
+                    <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div>
                     <div class="calendar-date current-month"><button class="date-item">1</button></div>
                     <div class="calendar-date current-month"><button class="date-item">2</button></div>
                     <div class="calendar-date current-month"><button class="date-item">3</button></div>
@@ -151,11 +151,11 @@
                     <div class="calendar-date current-month"><button class="date-item">13</button></div>
                     <div class="calendar-date current-month"><button class="date-item">14</button></div>
                     <div class="calendar-date current-month"><button class="date-item">15</button></div>
-                    <div class="calendar-date current-month calendar-range"><button class="date-item active">16</button></div>
+                    <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div>
-                    <div class="calendar-date current-month calendar-range"><button class="date-item active">20</button></div>
+                    <div class="calendar-date current-month calendar-range range-end"><button class="date-item active">20</button></div>
                     <div class="calendar-date current-month"><button class="date-item">21</button></div>
                     <div class="calendar-date current-month"><button class="date-item">22</button></div>
                     <div class="calendar-date current-month"><button class="date-item">23</button></div>
@@ -167,7 +167,7 @@
                     <div class="calendar-date current-month"><button class="date-item">29</button></div>
                     <div class="calendar-date current-month"><button class="date-item">30</button></div>
                     <div class="calendar-date current-month"><button class="date-item">31</button></div>
-                    <div class="calendar-date next-month"><button class="date-item" disabled>1</button></div>
+                    <div class="calendar-date next-month disabled"><button class="date-item">1</button></div>
                   </div>
                 </div>
               </div>
@@ -198,9 +198,14 @@
                     <div class="calendar-date">Sat</div>
                   </div>
                   <div class="calendar-body">
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>26</button></div>
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>27</button></div>
-                    <div class="calendar-date prev-month"><button class="date-item" disabled>28</button></div>
+                    <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div>
+                    <div class="calendar-date prev-month disabled">
+                      <button class="date-item">27</button>
+                      <div class="calendar-events">
+                        <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Zhonghe Festival</a>
+                      </div>
+                    </div>
+                    <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div>
                     <div class="calendar-date current-month"><button class="date-item">1</button></div>
                     <div class="calendar-date current-month"><button class="date-item">2</button></div>
                     <div class="calendar-date current-month"><button class="date-item">3</button></div>
@@ -219,15 +224,20 @@
                     <div class="calendar-date current-month"><button class="date-item">9</button></div>
                     <div class="calendar-date current-month"><button class="date-item">10</button></div>
                     <div class="calendar-date current-month"><button class="date-item">11</button></div>
-                    <div class="calendar-date current-month"><button class="date-item">12</button></div>
+                    <div class="calendar-date current-month">
+                      <button class="date-item">12</button>
+                      <div class="calendar-events">
+                        <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Arbor Day</a>
+                      </div>
+                    </div>
                     <div class="calendar-date current-month"><button class="date-item">13</button></div>
                     <div class="calendar-date current-month"><button class="date-item">14</button></div>
                     <div class="calendar-date current-month"><button class="date-item">15</button></div>
-                    <div class="calendar-date current-month calendar-range"><button class="date-item active">16</button></div>
+                    <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div>
                     <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div>
-                    <div class="calendar-date current-month calendar-range">
+                    <div class="calendar-date current-month calendar-range range-end">
                       <button class="date-item active">20</button>
                       <div class="calendar-events">
                         <a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a>
@@ -244,7 +254,12 @@
                     <div class="calendar-date current-month"><button class="date-item">29</button></div>
                     <div class="calendar-date current-month"><button class="date-item">30</button></div>
                     <div class="calendar-date current-month"><button class="date-item">31</button></div>
-                    <div class="calendar-date next-month"><button class="date-item" disabled>1</button></div>
+                    <div class="calendar-date next-month disabled">
+                      <button class="date-item">1</button>
+                      <div class="calendar-events">
+                        <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">April Fools' Day</a>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>