日历调用示例

日历组件调用示例

calendar.php 支持两种方式嵌入其他页面:iframe 嵌入(选完日期自动回传)或链接直达(?date= 定位)。

方式一:iframe 嵌入(推荐,选完日期自动回填)

iframe 内显示日期框 → 点击展开完整日历(iframe 自动撑满视口)→ 选完日期自动回填并收起。高度由日历页自动控制,父页面无需设置。
<iframe id="calFrame" src="calendar.php?embed=1"></iframe>
<script>
  window.addEventListener('message', function(e){
    if (e.data && e.data.type === 'calendar-date') {
      // e.data.date 即选中的日期(YYYY-MM-DD)
    }
  });
</script>

方式二:链接直达(跳转页面,打开即定位到指定日期)

打开日历 → 定位 2026-08-17 (calendar.php?date=YYYY-MM-DD,无 embed 时弹出式)
链接写法:<a href="calendar.php?date=2026-08-17">打开日历</a>