feat(calendar): custom cell content (#930)

* feat(calendar): custom cell content and style * feat(calendar): add demo for custom cell content and style * test(calendar): update unit test and snapshot for custom cell * feat(calendar): add position to slotted content * docs(calendar): add doc for custom cell * fix(calendar): add return to getCellParent * fix(calendar): add position part selection in elemental-theme * docs(calendar): change wording * refactor(calendar): change function and variable name * test(calendar): remove unnecessary test case * Update documents/src/pages/elements/calendar.md * Update packages/halo-theme/src/custom-elements/ef-calendar.less Co-authored-by: Nantawat Poothong <[email protected]> --------- Co-authored-by: Nantawat Poothong <[email protected]>
Refinitiv · Sep 6, 2023 · 781b9a8 · 781b9a8
1 parent 298203c
commit 781b9a8
Show file tree

Hide file tree

Showing 13 changed files with 7,347 additions and 2,398 deletions.
diff --git a/documents/src/pages/elements/calendar.md b/documents/src/pages/elements/calendar.md
@@ -190,6 +190,39 @@ ef-calendar {
 <ef-calendar first-day-of-week="3" value="2019-05-21"></ef-calendar>
 ```
 
+## Customizing content of the cell
+
+The calendar allows you to customize the content and style of a cell on particular date. You can set a `slot` attribute with value in format `yyyy-MM-dd`, `yyyy-MM` and `yyyy` as a key to indicate the specific day, month, year of the cell that need to be replaced with custom content.
+
+::
+```javascript
+::calendar::
+```
+```html
+<ef-calendar fill-cells range view="2020-05" min="2020-05-08">
+  <div class="custom-cell" slot="2020-05-02">
+    <ef-icon icon="emote"></ef-icon>
+  </div>
+  <div class="custom-cell" slot="2020-05-03">
+    <ef-icon icon="favorites"></ef-icon>
+  </div>
+</ef-calendar>
+```
+```css
+.custom-cell {
+  background-color: #1fa90a;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.custom-cell:hover {
+  background-color: #00c389;
+}
+```
+::
+
 ## Adding footer content
 
 The calendar supports adding footer content. This can be used to give information about the date entry, or to provide additional controls like 'reset'.

diff --git a/packages/elemental-theme/src/custom-elements/ef-calendar.less b/packages/elemental-theme/src/custom-elements/ef-calendar.less
@@ -153,6 +153,10 @@
     right: 1px;
     left: 1px;
     border-radius: @border-radius;
+
+    ::slotted(*) {
+      position: absolute;
+    }
   }
 
   [part='footer'] {

diff --git a/packages/elements/src/calendar/__demo__/index.html b/packages/elements/src/calendar/__demo__/index.html
@@ -65,6 +65,62 @@
       </script>
     </demo-block>
 
+    <demo-block header="Slotted Cell Content">
+      <style>
+        .custom-cell {
+          background-color: #1fa90a;
+          border: 1px solid #fb8a03;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .custom-cell:hover {
+          background-color: #00c389;
+          border: 1px solid #00c389;
+        }
+      </style>
+      <ef-calendar fill-cells range view="2020-05" min="2020-05-08">
+        <div class="custom-cell" slot="2020-05-02">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-03">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-09">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-10">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-16">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-17">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-23">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-24">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-30">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-05-31">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-06-06">
+          <ef-icon icon="emote"></ef-icon>
+        </div>
+        <div class="custom-cell" slot="2020-06-07">
+          <ef-icon icon="favorites"></ef-icon>
+        </div>
+      </ef-calendar>
+    </demo-block>
+
     <demo-block header="Slotted Footer Content">
       <ef-calendar>
         <div