Calendar组件具体怎么用，请写个demo并为代码写上注释

下面是一个简单的使用 Calendar 组件的 demo，注释中有详细的说明。

<!-- pages/index/index.wxml -->

<!-- 引入 Calendar 组件 -->
<calendar show="{{showCalendar}}" bind:cancel="onCancel" bind:confirm="onConfirm"></calendar>

<!-- 点击按钮显示日历 -->
<button bindtap="showCalendar">选择日期</button>

// pages/index/index.js

Page({
  data: {
    showCalendar: false, // 是否显示日历
  },
  // 点击按钮，显示日历
  showCalendar() {
    this.setData({ showCalendar: true })
  },
  // 取消选择日期
  onCancel() {
    this.setData({ showCalendar: false })
  },
  // 确认选择日期
  onConfirm(event) {
    const { year, month, day } = event.detail
    console.log(`选择的日期为 ${year}-${month}-${day}`)
    this.setData({ showCalendar: false })
  },
})

在上面的代码中，我们引入了微信小程序提供的 Calendar 组件，并绑定了 show、cancel 和 confirm 事件。点击按钮后，会显示日历组件。选择日期后，会触发 confirm 事件，我们可以在事件处理函数中获取选择的日期，并进行处理。如果不需要选择日期，则可以触发 cancel 事件，隐藏日历组件。