在fullcalendar中如何設(shè)置事件的時(shí)間和日期

小樊
188
2024-09-03 00:55:59

在FullCalendar中，設(shè)置事件的時(shí)間和日期需要遵循一定的格式。以下是一些基本步驟來(lái)創(chuàng)建和設(shè)置事件的時(shí)間和日期：

  1. 首先，確保你已經(jīng)正確地安裝并引入了FullCalendar庫(kù)?？梢酝ㄟ^(guò)CDN或者npm/yarn等方式引入。

  2. 在你的HTML文件中，創(chuàng)建一個(gè)用于放置日歷的div元素：

<div id="calendar"></div>
  1. 接下來(lái)，在JavaScript文件中初始化FullCalendar，并提供相關(guān)的配置選項(xiàng)。其中，events屬性用于存儲(chǔ)事件數(shù)據(jù)。
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      // 這里添加事件數(shù)據(jù)
    ]
  });

  calendar.render();
});
  1. 現(xiàn)在，向events數(shù)組中添加事件數(shù)據(jù)。每個(gè)事件都應(yīng)該是一個(gè)包含title、start和end屬性的對(duì)象。start和end屬性表示事件的開始和結(jié)束時(shí)間。
events: [
  {
    title: '我的生日',
    start: '2022-08-08T10:00:00',
    end: '2022-08-08T12:00:00'
  },
  {
    title: '會(huì)議',
    start: '2022-08-10T09:00:00',
    end: '2022-08-10T11:00:00'
  }
]

注意，日期和時(shí)間應(yīng)該遵循ISO 8601格式（即 “YYYY-MM-DDTHH:mm:ss”）。

  1. 如果你想使用其他視圖（例如周視圖或者天視圖），可以修改initialView屬性的值：
initialView: 'timeGridWeek', // 周視圖
// 或者
initialView: 'timeGridDay', // 天視圖
  1. 最后，運(yùn)行你的代碼，你應(yīng)該能在FullCalendar中看到設(shè)置好的事件時(shí)間和日期。

更多關(guān)于FullCalendar的信息和高級(jí)用法，請(qǐng)參考官方文檔：https://fullcalendar.io/docs

0 踩