sync main

.github/dependabot.yml

@@ -4,8 +4,12 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
+    commit-message:
+      prefix: "chore(deps)"
 
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
+    commit-message:
+      prefix: "chore(deps)"

.github/workflows/build-and-test.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   build-and-test:
-    name: Build, Test, and Release
+    name: Build and Test
     runs-on: ubuntu-latest
 
     strategy:
@@ -30,7 +30,7 @@ jobs:
       - run: npm run build
 
   dry-release:
-    if: github.event_name == 'pull_request' || github.event_name == 'merge_group'
+    if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' && (github.event_name == 'pull_request' || github.event_name == 'merge_group')
     name: Dry Release
     runs-on: ubuntu-latest
     needs: build-and-test
@@ -56,7 +56,7 @@ jobs:
         run: npx semantic-release --dry-run --no-ci
 
   release:
-    if: github.event_name != 'pull_request' && github.event_name != 'merge_group'
+    if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' &&  (github.event_name != 'pull_request' && github.event_name != 'merge_group')
     name: Release
     runs-on: ubuntu-latest
     needs: build-and-test

.github/workflows/deploy-docs.yml

@@ -2,8 +2,7 @@ name: Deploy Docs
 on:
   workflow_dispatch: {}
   push:
-    branches:
-      - main
+    branches: [main, dev]
     paths:
       - docs/**
 

dev/App.vue

@@ -17,9 +17,8 @@
             class="material-card"
             :style="{
               backgroundColor: event.color,
-              width: '100%',
-              height: '100%',
               overflow: 'hidden',
+              border: '1px solid darkgrey',
             }"
           >
             <div>

docs/guide.md

@@ -48,7 +48,7 @@ The event calendar will try to fill it's parent's dimensions, so best practice i
 | events                   | [CalendarEvent](#calendarevent-properties)[]          | Yes      |         | Array of events to be displayed.                 |
 | date                     | Date                                                  | No       |         | The current date displayed by the calendar.      |
 | mode                     | "week" \| "day"                                       | No       |         | Display mode of the calendar (week or day view). |
-| interval-height          | number                                                | No       | 20      | Height of each time interval slot.               |
+| interval-height          | number                                                | No       | 20      | Height of each time interval in pixels.          |
 | interval-minutes         | number                                                | No       | 15      | Duration in minutes of each interval.            |
 | hide-weekends            | boolean                                               | No       | false   | Whether to hide weekends on the calendar.        |
 | no-header                | boolean                                               | No       | false   | If true, the calendar header will be hidden.     |
@@ -72,14 +72,17 @@ Currently both 'stack' and 'split' modes are a WIP, but decent enough to work wi
 
 ### CalendarEvent Properties
 
-| Name        | Type             | Required | Purpose                                     |
-| ----------- | ---------------- | -------- | ------------------------------------------- |
-| id          | string \| number | Yes      | Unique identifier for the event.            |
-| description | string \| null   | No       | Descriptive text about the event.           |
-| startDate   | Date             | Yes      | The starting date and time of the event.    |
-| endDate     | Date             | Yes      | The ending date and time of the event.      |
-| color       | string           | No       | Color used to represent the event visually. |
+| Name        | Type             | Required | Purpose                                                                   |
+| ----------- | ---------------- | -------- | ------------------------------------------------------------------------- |
+| id          | string \| number | Yes      | Unique identifier for the event.                                          |
+| description | string \| null   | No       | Descriptive text about the event.                                         |
+| startDate   | Date             | Yes      | The starting date and time of the event.                                  |
+| endDate     | Date             | Yes      | The ending date and time of the event.                                    |
+| color       | string           | No       | Color used to represent the event visually. (CSS color name or hex value) |
 
+::: tip
+The color property will have no affect when implementing a custom [CalendarEvent Slot](#calendarevent-slot). In this case, the property can be used however you like: CSS color name, hex value, class name, etc.
+:::
 
 ## Events
 | Event Name    | Payload       | Purpose                                    |
@@ -89,15 +92,15 @@ Currently both 'stack' and 'split' modes are a WIP, but decent enough to work wi
 | event-updated | CalendarEvent | Emitted when an existing event is updated. |
 
 ::: info
-Event calendar will allow the user to draw out a new event that is populated with a unique id, and the appropriate start and end dates. However it does nothing with this info other than emit the event-created event, this is where you would want to process what should actually happen.
+Event calendar will allow the user to draw out a new event that is populated with a unique id, and the appropriate start and end dates. However it does nothing with this info other than emit the `event-created` event, this is where you would want to process what should actually happen.
 
 Examples would be: validate or manipulate the incoming payload, and push directly to the events prop, or another array if the events prop is a computed buffer.
 :::
 
 ## Slots
-One of the main goals is to provide as much custom styling as possible, and where possible, slots are preferred over custom classes.
+One of the main goals is to open up as much custom styling as possible, and for now where possible, exposing slots are leaned towards over providing custom classes.
 
-### CalendarEvent
+### CalendarEvent Slot
 
 | Props | Prop Type     |
 | ----- | ------------- |
@@ -120,11 +123,20 @@ One of the main goals is to provide as much custom styling as possible, and wher
 ::: tip
 When using this slot, it's better to avoid handling click events on the root element, in favor of the `event-clicked` event, as EventCalendar needs to consume click events and may end up in odd/unexpected behavior. As long as nested elements stop propagation, they should be safe to implement them.
 :::
-::: warning SIZING
-When using this slot, you will (in almost all cases) want to set the width and height to 100% either in a class or inline style, to fill the entire space that the event takes up on the calendar.
+
+::: info SIZING
+When using this slot, your root element will automatically receive the following:
+```
+box-sizing: border-box
+overflow: hidden
+width: 100% (of value determined by concurrencyMode)
+height: 100% (of height calculated by difference in minutes)
+```
+
+You are free to override these, but take special care.
 :::
 
-### DayHeader
+### DayHeader Slot
 This slot is the header above each day column.
 
 | Props | Prop Type |
@@ -140,7 +152,7 @@ This slot is the header above each day column.
 </template>
 ```
 
-### TimeInterval
+### TimeInterval Slot
 The time display for each horizontal hour line. These will be centered vertically with each hour line.
 
 | Props | Prop Type |

package.json

@@ -25,11 +25,11 @@
     "docs:serve": "vitepress serve docs"
   },
   "dependencies": {
-    "date-fns": "^3.1.0"
+    "date-fns": "^3.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.2.5",
-    "@vitejs/plugin-vue": "4.5.2",
+    "@types/node": "^20.10.8",
+    "@vitejs/plugin-vue": "5.0.3",
     "@vue/eslint-config-typescript": "12.0.0",
     "eslint": "8.56.0",
     "sass": "^1.69.5",
@@ -38,7 +38,7 @@
     "typescript": "^5.3.3",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.10",
-    "vitepress": "^1.0.0-rc.33",
+    "vitepress": "^1.0.0-rc.36",
     "vue": "^3.3.13",
     "vue-tsc": "^1.8.27"
   }