Improve calendar events style

1 files changed, 9 insertions, 4 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index c747e3a..c3d80e3 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -206,11 +206,14 @@
                     <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div>
                     <div class="calendar-date current-month tooltip" data-tooltip="Not available"><button class="date-item" disabled>5</button></div>
                     <div class="calendar-date current-month"><button class="date-item">6</button></div>
-                    <div class="calendar-date current-month"><button class="date-item">7</button></div>
+                    <div class="calendar-date current-month"><button class="date-item badge">7</button></div>
                     <div class="calendar-date current-month tooltip" data-tooltip="You have appointments.">
                       <button class="date-item badge">8</button>
-                      <a class="calendar-event" href="#calendars">Product launch event</a>
-                      <a class="calendar-event" href="#calendars">Meeting with CEO</a>
+                      <div class="calendar-events">
+                        <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Product launch event</a>
+                        <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Lunch</a>
+                        <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a>
+                      </div>
                     </div>
                     <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>
@@ -225,7 +228,9 @@
                     <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>
-                      <a class="calendar-event" href="#calendars">Spring Equinox</a>
+                      <div class="calendar-events">
+                        <a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a>
+                      </div>
                     </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>