examples/sites/demos/apis/calendar-view.js (2)

46-46: LGTM! Consider enhancing the documentation.

The type change from string to string | number follows Vue conventions and improves flexibility. However, the description could be more detailed.

Consider updating the description to clarify the accepted formats:

  desc: {
-   'zh-CN': '日历高度',
+   'zh-CN': '日历高度，接受数字(单位: px)或字符串(如: "100px", "50vh"等)',
-   'en-US': ''
+   'en-US': 'Calendar height, accepts number (unit: px) or string (e.g., "100px", "50vh")'
  },

---

The height property needs demo examples for both PC and mobile-first modes

After checking multiple demo files including basic usage, calendar mode, and custom toolbar examples, none of them demonstrate the usage of the height property. This confirms the original concern that while the height property is documented, it lacks practical examples in both PC and mobile-first demos. The property should have corresponding demos to show its implementation and effects.

• Add demo examples for the height property in:
  • examples/sites/demos/pc/app/calendar-view/ (PC mode)
  • examples/sites/demos/mobile-first/app/calendar-view/ (mobile-first mode)

🔗 Analysis chain

Line range hint 46-54: Verify usage in demos since none are linked.

The pcDemo and mfDemo fields are empty for the height property, suggesting there might not be examples demonstrating its usage.

Let's check for existing usage:

---

Let me check the actual content of these demo files to verify if the height property is being used.

---

Let me try a different approach to check the content of these demo files.

---

Let me check other demo files that might demonstrate the height property usage.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for height prop usage in demo files
echo "Searching for height prop usage in demos..."
rg -l "height.*calendar-view" examples/sites/demos/pc examples/sites/demos/mobile-first

# Search for any calendar-view demos that might need updates
echo "Searching for calendar-view demos that might need updates..."
rg -l "calendar-view" examples/sites/demos/pc examples/sites/demos/mobile-first

Length of output: 4390

---

Script:

#!/bin/bash
# Search for height prop usage in calendar-view demos
echo "Searching for height prop usage in calendar-view demos..."
rg -A 2 -B 2 "height.*calendar-view|calendar-view.*height" examples/sites/demos/pc/app/calendar-view examples/sites/demos/mobile-first/app/calendar-view

# Also check basic usage files specifically
echo "Checking basic usage demos..."
rg -l "height" examples/sites/demos/pc/app/calendar-view/basic-usage* examples/sites/demos/mobile-first/app/calendar-view/basic-usage*

Length of output: 625

---

Script:

#!/bin/bash
# Check content of basic usage demos
echo "Content of PC basic usage demo:"
cat examples/sites/demos/pc/app/calendar-view/basic-usage.vue

echo -e "\nContent of Mobile-first basic usage demo:"
cat examples/sites/demos/mobile-first/app/calendar-view/basic-usage.vue

Length of output: 4739

---

Script:

#!/bin/bash
# Check content of other demo files that might show height usage
echo "Checking calendar mode demos for height usage:"
cat examples/sites/demos/pc/app/calendar-view/calendar-mode.vue

echo -e "\nChecking mobile-first calendar mode demo:"
cat examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue

echo -e "\nChecking custom calendar toolbar demo:"
cat examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.vue

Length of output: 1492

packages/vue/src/calendar-view/src/pc.vue (1)

136-136: Consider adding overflow handling for timeline and schedule views

The timeline and schedule containers might need overflow handling to ensure content is accessible when it exceeds the container height.

Consider adding the following CSS properties:

 .tiny-calendar-view-week__timeline {
+  overflow-y: auto;
+  max-height: 100%;
 }

 .tiny-calendar-view-week__schedule {
+  overflow-y: auto;
+  max-height: 100%;
 }

Also applies to: 189-189

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Find the component's template file to verify height handling
ast-grep --pattern 'height: $height' -l ts,vue

# Check for any height-related computations or watchers
ast-grep --pattern 'watch($$$height$$$)' -l ts,vue
ast-grep --pattern 'computed($$$height$$$)' -l ts,vue

#!/bin/bash
# Let's try a different approach to find height-related code
# First, let's find the component file and check its content
fd "index.ts" packages/vue/src/calendar-view/src/ --exec cat {}

# Also search for any height-related template or style usage
rg "height" packages/vue/src/calendar-view/src/ -A 2 -B 2

height: {
  type: [String, Number],
  default: ''
}

#!/bin/bash
# Description: Verify height property type definition and usage

# Check for height prop type definition
echo "Checking height prop type definition..."
rg -l "height.*:\s*(String|Number|\[String,\s*Number\])" packages/vue/src/calendar-view/

# Check for height property usage
echo "Checking height property usage..."
rg -l "height.*=.*['\"]?\d+['\"]?" packages/vue/src/calendar-view/

#!/bin/bash
# Let's try a different approach to find the height prop definition and usage

# Search for prop definitions in the component
echo "Searching for height prop definition..."
ast-grep --pattern 'props: {
  $$$
  height: $_,
  $$$
}'

# Search for height prop with a different pattern
echo "Searching for height prop (alternative)..."
rg -A 5 "height:\s*[{]?" packages/vue/src/calendar-view/

# Search for height usage in template
echo "Searching for height usage in templates..."
rg "height.*['\"]" packages/vue/src/calendar-view/ --type vue