Adds support for custom 'day-content' slots (Closes #117).

Author: Nathan Reyes

CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.9.4
+## Improvements
+### `v-calendar`
+* Adds support for 'day-content' slots. :tada: :tada: :tada: This adds a lot of flexibility by allowing you to provide your own day cells. The layout has also been improved to grow with your cells, so you can now build larger calendars to fill with your own content.
+
+```html
+<v-calendar>
+  <div
+    slot='day-content'
+    slot-scope='{ day, attributes, contentStyle }'
+    class='my-day'>
+    <!-- Be sure to display the day of the month somewhere in your content -->
+    {{ day.day }}
+  </div>
+</v-calendar>
+```
+```css
+/* Set width and height and `v-calendar` will resize appropriately */
+.my-day {
+  width: 40px;
+  height: 40px;
+}
+/* You can also apply your own hover styles */
+.my-day:hover {
+  background-color: #dadada;
+}
+```
+
+You can get access to the following slot props:
+
+| Prop | Type | Description |
+| ---- | ---- | ----------- |
+| [`day`](https://docs.vcalendar.io/api#day-object) | Object | Object with various day info. Use the `day.day` number prop to display the day of month in your slot content. |
+| `attibutes` | Array | List of attributes for this day. |
+| `contentStyle` | Object | Content style to apply if you wish, derived from `themeStyles.dayContent` and other attributes. |
+
 # v0.9.3
 ## Bug Fixes
 ### `v-calendar`

src/components/Calendar.vue

@@ -266,7 +266,6 @@ export default {
     &:focus
       outline: none
 
-
 .c-pane-divider
   width: 1px
   border: 1px inset

src/components/CalendarDay.vue

@@ -14,10 +14,10 @@
     class='c-day'
     :style='dayCellStyle'>
     <!-- Background layers -->
-    <!-- <transition-group
+    <transition-group
       name='background'
       tag='div'
-      class='c-day-backgrounds'>
+      class='c-day-backgrounds c-day-layer'>
       <div
         v-for='background in backgrounds'
         :key='background.key'
@@ -27,39 +27,25 @@
           :style='background.style'>
         </div>
       </div>
-    </transition-group> -->
+    </transition-group>
     <!-- Content layer -->
-    <!-- <div
-      class='c-day-layer c-day-box-center-center'>
-      <div
-        ref='dayContent'
-        class='c-day-content'
-        :style='contentStyle'
-        @click='click'
-        @mouseenter='mouseenter'
-        @mouseover='mouseover'
-        @mouseleave='mouseleave'>
-        <slot name='day-content' 
-          :day='day' 
-          :attributes='attributesList'>
-          {{ day.label }}
-        </slot>
-      </div>
-    </div> -->
     <div
-      class='day-content c-day-box-center-center'
-      :style='contentStyle'
+      class='c-day-content-wrapper'
       @click='click'
       @mouseenter='mouseenter'
       @mouseover='mouseover'
       @mouseleave='mouseleave'>
-      <slot name='day-content' 
-        :day='day' 
+      <slot
+        name='day-content' 
+        :day='day'
+        :content-style='contentStyle'
         :attributes='attributesList'>
         <div
-          class='c-day-box-center-center'
-          >
-          {{ day.label }}
+          class='c-day-content'
+          :style='contentStyle'>
+          <div>
+            {{ day.label }}
+          </div>
         </div>
       </slot>
     </div>
@@ -607,8 +593,9 @@ export default {
   flex: 1
 
 .c-day
-  min-height: $day-height
   position: relative
+  min-height: $day-min-height
+  z-index: 1
 
 .c-day-layer
   position: absolute
@@ -636,11 +623,31 @@ export default {
 .c-day-box-center-bottom
   +box(center, flex-end)
 
+.c-day-content-wrapper
+  display: flex
+  justify-content: center
+  align-items: center
+  pointer-events: all
+  user-select: none
+  cursor: default
+
+.c-day-content
+  display: flex
+  justify-content: center
+  align-items: center
+  width: $day-content-width
+  height: $day-content-height
+  font-size: $day-content-font-size
+  font-weight: $day-content-font-weight
+  line-height: 1
+  border-radius: $day-content-border-radius
+  transition: all $day-content-transition-time
+  margin: .1rem .08rem
+
 .c-day-backgrounds
-  position: relative
-  width: 100%
-  height: 100%
   overflow: hidden
+  pointer-events: none
+  z-index: -1
   backface-visibility: hidden // Prevents glitches in Chrome by forcing hardware acceleration
 
 .c-day-background
@@ -677,19 +684,6 @@ export default {
   background-color: $bar-background-color
   transition: all $day-content-transition-time
 
-.c-day-content
-  // +box()
-  // width: $day-content-width
-  // height: $day-content-height
-  font-size: $day-content-font-size
-  font-weight: $day-content-font-weight
-  line-height: 1
-  border-radius: $day-content-border-radius
-  transition: all $day-content-transition-time
-  user-select: none
-  cursor: default
-  pointer-events: all
-
 .c-day-popover-content
   font-size: $day-popover-font-size
   font-weight: $day-popover-font-weight

src/components/DatePicker.vue

@@ -330,7 +330,7 @@ export default {
           highlight: params => ({
             backgroundColor: this.tintColor,
             ...(isDrag && {
-              height: '1.7rem',
+              height: '1.64rem',
               opacity: 0.5,
             }),
             ...((isFunction(highlight) && highlight(params)) || highlight),

src/styles/vars.sass

@@ -60,7 +60,7 @@ $weeks-padding: 5px $pane-horizontal-padding 7px $pane-horizontal-padding
 $weeks-translate-x: 20px
 $weeks-transition: all .25s ease-in-out
 
-$day-height: 32px
+$day-min-height: 28px
 $day-content-width: 1.8rem
 $day-content-height: 1.8rem
 $day-content-font-size: $size-6

src/utils/defaults.js

@@ -70,14 +70,14 @@ const defaults = {
   maxTapDuration: 200, // ms
   highlight: {
     animated: true,
-    height: '1.9rem',
+    height: '1.8rem',
     borderWidth: '0',
     borderStyle: 'solid',
     opacity: 1,
   },
   highlightCaps: {
     animated: true,
-    height: '1.9rem',
+    height: '1.8rem',
     borderWidth: '0',
     borderStyle: 'solid',
     opacity: 1,