如何用fullCalendar库结合谷歌表格数据搭建Web应用日历

我希望使用FullCalendar库，在Web应用中结合指定谷歌表格的数据创建日历。目前手动在JavaScript函数中添加数据可实现效果，但不清楚如何与表格数据建立关联，需要帮助。

原代码文件展示 #

Code.gs

const classeur = SpreadsheetApp.getActiveSpreadsheet();
const fBDD = classeur.getSheetByName("BDD");

function doGet() {
  return HtmlService.createTemplateFromFile("Index").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('JavaScript'); ?>
    <?!= include('CSS'); ?>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
  <script>
    document.addEventListener("DOMContentLoaded",loadCalendar);
  </script>
</html>

JavaScript.html

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

<script>
  function loadView(options){
    var id = typeof options.id === "undefined" ? "app" : options.id;
    var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
  }
  function loadCalendar(){
    loadView({func: "loadSearchView", callback: showCalendar()});
  }

  function showCalendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: new Date(),
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      events: [
        {
          title: 'Event 1',
          start: '2024-11-02T09:00:00',
          end: '2024-11-02T13:00:00'
        },
        {
          title: 'Event 2',
          start: '2024-11-09T08:45:00',
          end: '2024-11-09T12:45:00'
        },
        {
          title: 'Event 3',
          start: '2024-11-09T10:00:00',
          end: '2024-11-09T12:00:00'
        },
        {
          title: 'Event 4',
          start: '2024-11-11T13:45:00',
          end: '2024-11-12T15:00:00'
        }
      ]
    });
    calendar.render();
  }
</script>

解决方案步骤 #

1. 在Code.gs中添加表格数据读取函数

修改Code.gs，新增函数读取表格数据并转换为FullCalendar兼容的格式：

const classeur = SpreadsheetApp.getActiveSpreadsheet();
const fBDD = classeur.getSheetByName("BDD");

function doGet() {
  return HtmlService.createTemplateFromFile("Index").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// 新增：获取表格数据并转换为FullCalendar事件格式
function getCalendarEvents() {
  const data = fBDD.getDataRange().getValues();
  const events = [];
  
  // 跳过表头（假设表格第一行为标题行）
  for(let i = 1; i < data.length; i++){
    const row = data[i];
    events.push({
      title: row[0],  // 对应表格第一列：事件标题
      start: row[1],  // 对应表格第二列：开始时间（格式需为YYYY-MM-DDTHH:mm:ss）
      end: row[2]     // 对应表格第三列：结束时间（格式同上）
    });
  }
  return events;
}

提示：请根据你的表格实际列顺序调整row的索引，确保时间格式符合ISO 8601标准（如2024-11-02T09:00:00）。

2. 修改JavaScript.html的日历渲染逻辑

更新JavaScript.html，通过google.script.run异步获取服务器端的表格数据，再初始化日历：

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

<script>
function loadCalendar(){
  // 调用服务器端函数获取表格数据，成功后渲染日历
  google.script.run.withSuccessHandler(function(events) {
    showCalendar(events);
  }).getCalendarEvents();
}

function showCalendar(eventsData) {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: new Date(),
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: eventsData  // 使用从表格获取的事件数据
  });
  calendar.render();
}
</script>

说明：移除了原代码中无用的loadView函数，简化逻辑直接获取数据并渲染。

3. 确保表格数据结构正确

你的Google表格（BDD工作表）需要按以下结构设置（第一行为表头）：

• 列1：事件标题
• 列2：开始时间（设置单元格格式为「日期时间」）
• 列3：结束时间（设置单元格格式为「日期时间」）

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