选中Google Sheet单元格时能否打开侧边栏并筛选对应任务

前置准备 #

• 提前在表格中新建名为「任务清单」的工作表，按以下结构存储待办数据：
  • A列：任务日期（统一为日期格式，不要存为文本）
  • B列：任务内容
  • C列：任务状态（待完成/已完成等）
  • D列：备注
• 可点击触发侧边栏的日期可单独放在指定工作表，示例命名为「日历视图」，所有可点击日期统一放在该表A列。

步骤1：编写服务端Google Apps Script代码 #

打开你要操作的Google Sheet，点击顶部菜单「扩展程序」->「Apps Script」，进入脚本编辑器，删除默认的myFunction代码，替换为以下内容：

// 单元格选中触发事件
function onSelectionChange(e) {
  const range = e.range;
  const sheet = range.getSheet();
  // 可自定义触发侧边栏的工作表名、日期所在列，这里示例是日历视图工作表的A列
  if (sheet.getName() !== "日历视图" || range.getColumn() !== 1 || range.isBlank()) return;
  const cellValue = range.getValue();
  // 判断选中值是否为有效日期
  if (Object.prototype.toString.call(cellValue) !== "[object Date]") return;
  // 格式化日期为统一格式，避免时区问题
  const formatDate = Utilities.formatDate(cellValue, Session.getScriptTimeZone(), "yyyy-MM-dd");
  // 获取该日期对应的所有待办
  const tasks = getTasksByDate(formatDate);
  // 加载侧边栏
  const html = HtmlService.createTemplateFromFile("Sidebar");
  html.tasks = tasks;
  html.selectDate = formatDate;
  const sidebar = html.evaluate().setTitle(`${formatDate} 待办任务`);
  SpreadsheetApp.getUi().showSidebar(sidebar);
}

// 根据日期查询任务清单的对应待办
function getTasksByDate(targetDate) {
  const taskSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("任务清单");
  const allData = taskSheet.getDataRange().getValues();
  // 跳过表头，从第二行开始遍历
  const tasks = [];
  for (let i = 1; i < allData.length; i++) {
    const row = allData[i];
    const rowDate = Utilities.formatDate(row[0], Session.getScriptTimeZone(), "yyyy-MM-dd");
    if (rowDate === targetDate) {
      tasks.push({
        content: row[1],
        status: row[2],
        remark: row[3] || "无"
      })
    }
  }
  return tasks;
}

步骤2：编写侧边栏HTML文件 #

在脚本编辑器左侧点击「+」->「HTML」，新建文件命名为Sidebar，替换默认代码为以下内容：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .task-item { margin: 10px 0; padding: 10px; border-bottom: 1px solid #eee; }
      .status { padding: 2px 6px; border-radius: 4px; font-size: 12px; }
      .pending { background: #fff3cd; color: #856404; }
      .finished { background: #d4edda; color: #155724; }
    </style>
  </head>
  <body>
    <h3><?= selectDate ?> 待办列表</h3>
    <? if (tasks.length === 0) { ?>
      <p>当日无待办任务</p>
    <? } else { ?>
      <? tasks.forEach(task => { ?>
        <div class="task-item">
          <p><strong>任务内容：</strong><?= task.content ?></p>
          <p>
            <strong>状态：</strong>
            <span class="status <?= task.status === '已完成' ? 'finished' : 'pending' ?>"><?= task.status ?></span>
          </p>
          <p><strong>备注：</strong><?= task.remark ?></p>
        </div>
      <? }) ?>
    <? } ?>
  </body>
</html>

步骤3：效果测试 #

• 保存所有代码，关闭脚本编辑器，刷新Google Sheet页面
• 点击「日历视图」工作表A列的任意日期单元格，侧边栏就会自动弹出，展示对应日期的所有待办任务
• 预期实现效果如下：
  

常见调整说明 #

• 如果你存放日期的列不是A列、工作表名不是「日历视图」，可以修改onSelectionChange函数里的对应判断参数
• 如果你的任务清单列结构不同，同步修改getTasksByDate函数里的字段取值逻辑即可
• 侧边栏的样式可自行修改Sidebar.html里的CSS代码调整

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