在线课程网站日历绑定展示对应YouTube录播课链接的实现

项目现有基础 #

• 业务需求背景：平台所有线上直播课程会被录制，以*YouTube unlisted（未公开列出）*格式存储，需要将录播内容和日历上的对应授课日期做绑定，方便学员找到对应日期的课程回放
• 已完成的开发能力：自研轻量日历组件已支持月份切换、主题色自定义、点击日期切换详情展示面板的核心交互，组件核心页面结构如下：

<div class="yellow">
  <div id="calendar">
    <div id="toolbar"></div>
    <div id="color-picker" class="show"></div>
    <div id="dates" class="show">
      <div id="lastMt">&lsaquo;</div>
      <div id="nextMt">&rsaquo;</div>
      <div id="months-cont">
        <div id="months">
          <span class="active month">January</span>
          <span class="month">February</span>
          <span class="month">March</span>
          <span class="month">April</span>
          <span class="month">May</span>
          <span class="month">June</span>
          <span class="month">July</span>
          <span class="month">August</span>
          <span class="month">September</span>
          <span class="month">October</span>
          <span class="month">November</span>
          <span class="month">December</span>
        </div>
      </div>
      <div id="daysotweek">
        <div class="day">S</div>
        <div class="day">M</div>
        <div class="day">T</div>
        <div class="day">W</div>
        <div class="day">T</div>
        <div class="day">F</div>
        <div class="day">S</div>
      </div>
      <div id="days"></div>
    </div>
    <div id="info" class="hide">
      <div id="actual-date"></div>
      <div id="back"><<</div>
      <div id="month-name"></div>
      <div id="weather">
        <div id="sun"></div>
        <div id="mountains"></div>
        <div id="rain">
          <div class="raindrop" id="drop-1"></div>
          <div class="raindrop center" id="drop-2"></div>
          <div class="raindrop center" id="drop-3"></div>
          <div class="raindrop" id="drop-4"></div>
        </div>
        <div id="temp">57&deg;<span>F</span></div>
      </div>
      <div id="bg-card">
        <div class="content"></div>
      </div>
      <div id="card">
        <div class="content">
          <div id="event-name"></div>
          <div id="event-details">
            <div class="col-3">
              <i class="fa fa-map-marker" aria-hidden="true"></i>
              <h3>Location</h3>
              <p>12345 Generic Ave., Some City, Some State, 12345</p>
            </div>
            <div class="col-3">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
              <h3>Time</h3>
              <p> 12:00 AM </p>
            </div>
            <div class="col-3">
              <i class="fa fa-user" aria-hidden="true"></i>
              <h3>Attendee</h3>
              <p>Me, You, and 2+</p>
            </div>
            <div style="clear: both"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="colors" class="hide">
      <div id="close">&times;</div>
      <p>Choose theme color</p>
      <div class="color" id="salmon"></div>
      <div class="color" id="dkpink"></div>
      <div class="color" id="red"></div>
      <div class="color" id="redorg"></div>
      <div class="color" id="orange"></div>
      <div class="color" id="orgylw"></div>
      <div class="color active" id="yellow"></div>
      <div class="color" id="green"></div>
      <div class="color" id="aqua"></div>
      <div class="color" id="teal"></div>
      <div class="color" id="sltbl"></div>
      <div class="color" id="pwdbl"></div>
      <div class="color" id="blue"></div>
      <div class="color" id="purple"></div>
      <div class="color" id="dkprpl"></div>
    </div>
  </div>
</div>

待实现的核心功能要求 #

用户点击日历上某一日期时，页面切换到的详情展示区域，需要显示该日期关联的YouTube录播视频访问链接。

可落地的实现步骤 #

• 搭建日期-课程数据映射：以统一格式的「年-月-日」为查询键，存储每个日期对应的录播视频链接、课程名称、授课信息等内容
• 适配现有日期点击事件：在原有点击日期触发详情面板展示的流程中，新增根据当前选中日期查询对应录播数据的逻辑
• 调整详情区展示位：在现有详情面板的#event-details模块下新增录播内容展示区块，将查询到的视频链接渲染为可点击的访问入口；可根据需求直接嵌入YouTube播放器组件，支持在详情区直接播放未公开视频
• 增加空状态兜底：如果当前选中日期没有绑定录播课程，在详情区显示「当日无关联录播课程」的提示，避免出现空白展示位

内容的提问来源于stack exchange，提问作者Stay_foolish