如何为Yo生成的Outlook JS插件在日历视图添加选中约会的功能区按钮？

完全可以实现这个需求，你需要调整插件的manifest配置并适配对应的上下文逻辑，以下是具体步骤：

1. 调整Manifest配置（核心） #

你当前的按钮是绑定在打开约会的上下文（比如AppointmentReadCommandSurface或AppointmentEditCommandSurface），要在日历视图选中约会时显示按钮，需要新增AppointmentListCommandSurface类型的ExtensionPoint。

在你的manifest.xml中添加以下配置（替换或补充现有ExtensionPoint）：

<ExtensionPoint xsi:type="AppointmentListCommandSurface">
  <OfficeTab id="TabDefault">
    <Group id="CalendarSelectedGroup">
      <Label resid="Group_CalendarSelected_Label" />
      <Control xsi:type="Button" id="CalendarSelected_ActionButton">
        <Label resid="Button_CalendarSelected_Label" />
        <Supertip>
          <Title resid="Button_CalendarSelected_Title" />
          <Description resid="Button_CalendarSelected_Desc" />
        </Supertip>
        <Icon>
          <bt:Image size="16" resid="Icon_16" />
          <bt:Image size="32" resid="Icon_32" />
          <bt:Image size="80" resid="Icon_80" />
        </Icon>
        <Action xsi:type="ExecuteFunction">
          <FunctionName>handleSelectedAppointment</FunctionName>
        </Action>
      </Control>
    </Group>
  </OfficeTab>
</ExtensionPoint>

同时要在Resources节点下补充对应的资源定义（示例）：

<Resources>
  <bt:Images>
    <bt:Image id="Icon_16" DefaultValue="https://localhost:3000/assets/icon-16.png" />
    <bt:Image id="Icon_32" DefaultValue="https://localhost:3000/assets/icon-32.png" />
    <bt:Image id="Icon_80" DefaultValue="https://localhost:3000/assets/icon-80.png" />
  </bt:Images>
  <bt:ShortStrings>
    <bt:String id="Group_CalendarSelected_Label" DefaultValue="我的工具" />
    <bt:String id="Button_CalendarSelected_Label" DefaultValue="处理选中约会" />
    <bt:String id="Button_CalendarSelected_Title" DefaultValue="处理当前选中的日历约会" />
  </bt:ShortStrings>
  <bt:LongStrings>
    <bt:String id="Button_CalendarSelected_Desc" DefaultValue="点击执行针对选中约会的自定义操作" />
  </bt:LongStrings>
</Resources>

2. 实现选中约会的处理逻辑 #

在你的JavaScript代码中（比如src/commands/commands.js），新增对应的处理函数：

function handleSelectedAppointment() {
  // 获取当前选中的约会项
  const selectedItem = Office.context.mailbox.item;
  
  if (!selectedItem) {
    console.error("未选中任何约会");
    return;
  }

  // 读取约会关键信息（根据需求调整）
  const subject = selectedItem.subject;
  const itemId = selectedItem.itemId;
  const start = selectedItem.start;

  // 执行你的自定义业务逻辑
  console.log(`选中约会：${subject}，ID：${itemId}，开始时间：${start}`);
  // 比如调用API、弹出任务窗格等操作
}

// 注册函数供插件调用
Office.actions.associate("handleSelectedAppointment", handleSelectedAppointment);

3. 权限与版本注意事项 #

• 确保manifest中设置了足够的权限，比如在Permissions节点添加：

  <Permissions>ReadItem</Permissions>
  

  若需要修改约会内容，可升级为ReadWriteItem。
• 该功能支持Outlook 2016及以上桌面端、Outlook Web App、Outlook移动端（部分版本），测试建议优先用Outlook Web App验证。

4. 调试与验证 #

修改manifest后，重新启动本地开发服务器，在Outlook中重新加载插件：

• 打开日历视图，选中任意约会，功能区会出现你定义的自定义按钮。
• 点击按钮触发函数，可通过浏览器开发者工具或插件调试工具查看日志。

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