From aaae0e044624099dbaad2d7457e912927528a800 Mon Sep 17 00:00:00 2001
From: antoniandre <antoniandre.web@gmail.com>
Date: Sat, 27 Aug 2022 22:02:36 +0200
Subject: [PATCH] Update the documentation.

---
 src/documentation/api.vue      | 11 +++++++++
 src/documentation/examples.vue | 42 ++++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/documentation/api.vue b/src/documentation/api.vue
index 34ffdb87..4276e3fb 100644
--- a/src/documentation/api.vue
+++ b/src/documentation/api.vue
@@ -44,6 +44,7 @@ div
     resizeX:                [Boolean],         default: false
     selectedDate:           [String, Date],    default: ''
     showAllDayEvents:       [Boolean, String], default: false
+    showTimeInCells:        [Boolean],         default: false
     showWeekNumbers:        [Boolean, String], default: false
     small:                  [Boolean],         default: false
     snapToTime:             [Number],          default: null
@@ -365,6 +366,16 @@ div
       p.
         If #[span.code time] is enabled, set the start of the timeline in minutes.
         By default it starts at midnight.
+    li
+      code.mr2 showTimeInCells
+      span.code [Boolean], default: false
+      p.
+        When set to #[span.code true], the time labels will be visible in
+        each cell, in each time slot of the #[code day] and #[code week] views.
+        You can then use CSS to style to taste.
+        For instance, you could hide all the labels and show only the one that
+        is being hovered.#[br]
+        Will have no effect if #[span.code time] is set to false.
     li
       code.mr2 timeTo
       span.code [Number], default: 24 * 60
diff --git a/src/documentation/examples.vue b/src/documentation/examples.vue
index a58bd681..404100b7 100644
--- a/src/documentation/examples.vue
+++ b/src/documentation/examples.vue
@@ -388,14 +388,48 @@
     a(href="#ex--timeline") # Timeline
     a#ex--timeline(name="ex--timeline")
   p.
-    Timelines are only visible on #[span.code week] and #[span.code day] view.#[br]
-    This example has a set time range from 08:00 to 19:00, time step of 30 minutes (1 hour by default),
+    Timelines are only visible on #[span.code week] and #[span.code day] views.#[br]
+    This example has a set time range from #[code 08:00] to #[code 19:00], time step of #[code 30] minutes (1 hour by default),
     24-hour format, and hidden weekends.
   .example.my2.mxa(style="height: 450px")
-    vue-cal.vuecal--green-theme(:time-from="8 * 60" :time-to="19 * 60" :time-step="30" hide-weekends)
+    vue-cal.vuecal--green-theme(
+      :time-from="8 * 60"
+      :time-to="19 * 60"
+      :time-step="30"
+      hide-weekends)
   ssh-pre(language="html-vue" label="Vue Template").
     &lt;!-- Time-start time-end &amp; time-step are expected in minutes. --&gt;
-    &lt;vue-cal :time-from="8 * 60" :time-to="19 * 60" :time-step="30" hide-weekends /&gt;
+    &lt;vue-cal
+      :time-from="8 * 60"
+      :time-to="19 * 60"
+      :time-step="30"
+      hide-weekends&gt;
+    &lt;/vue-cal&gt;
+  highlight-message For all the options details, refer to the #[a(href="#api") API] section.
+
+  //- Example.
+  h4.title2
+    a(href="#ex--show-time-in-cells") # Showing time labels in cells
+    a#ex--show-time-in-cells(name="ex--show-time-in-cells")
+  p.
+    You can choose to display the time labels in every cells by enabling the
+    #[span.code showTimeInCells] option.
+  .example.my2.mxa(style="height: 450px")
+    vue-cal.vuecal--green-theme(
+      :time-from="8 * 60"
+      :time-to="19 * 60"
+      :time-step="30"
+      show-time-in-cells
+      hide-weekends)
+      template(#no-event) &nbsp;
+  ssh-pre(language="html-vue" label="Vue Template").
+    &lt;vue-cal
+      :time-from="8 * 60"
+      :time-to="19 * 60"
+      :time-step="30"
+      hide-weekends
+      show-time-in-cells&gt;
+    &lt;/vue-cal&gt;
   highlight-message For all the options details, refer to the #[a(href="#api") API] section.
 
   //- Example.