中文 前端教學

網頁前端行事曆(FullCalendar)教學 | 紀錄 事件 應用 | FullCalendar | 10分鐘熟悉

[email protected]

網頁前端行事曆，今天要來講解如何使用FullCalendar行事曆套件，官方提供許多的Demo範例，但卻霧煞煞不知道哪個功能要去哪個地方設定？我在剛出社會也遇到這個問題，不如自己寫一個FullCalendar教學，實作一些基本功能給大家，配合SweetAlert2來顯示內容讓大家參考，更快地進入狀況。
一樣有任何問題或是需要補充的都可以在最下方留言，我會在一週內回覆或email您來解答。

FullCalendar 官網(有範例參考)

FullCalendar GitHub(程式原始碼)

先玩玩認識行事曆吧

  1. 切換月
  2. 點選上方Today按鈕可跳回當天
  3. 點擊 Month、Week、Day看畫面的不同
  4. 點擊事件(ex: All Day Event、Holiday)
  5. 點擊一個空白日期
  6. 多選日期(按著滑鼠)

網頁前端行事曆-FullCalendar

開始建立全新的行事曆

步驟說明

  1. 引入套件CSS、JavaScript
    – 無 CSS 目前不需要
    – JavaScript 放置於 </body> 之前 (版本為 6.1.11)
    網頁前端行事曆
  2. 加入HTML、JavaScript
    – 加入<div id=”calendar”></div>
    – JavaScript區塊 new FullCalendar 來創建新的行事曆
    – 於 new FullCalendar.Calendar 內加入行事曆相關屬性(功能) ex: initialView、headerToolbar
  3. 附上程式碼(下方有說明)
<body>
    <!-- Calendar position -->
    <div id="calendar"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const calendarEl = document.getElementById("calendar")
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          buttonText: {
            today: "Today",
            month: "Month",
            week: "Week",
            day: "Day",
          },
        })
        calendar.render()
      })
      
    </script>
    <!-- fullcalendar origin code-->
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
</body>

程式碼說明

第6行: document.addEventListener(“DOMContentLoaded”用來確保HTML的DOM已經完全載入
第7行: document.getElementById(“calendar”)取得HTML id為calendar的element
第8行: new FullCalendar.Calendar創建一個新的Calendar實例(讓你可以使用修改它的屬性功能)
第9行: initialView 一開始預設為 dayGridMonth 表示用月顯示行事曆
第10行: headerToolbar 用來設定行事曆最上方按鈕功能位置
第15行: buttonText 用來修改上方按鈕功能文字
第22行: calendar.render() 渲染整個實作好的calendar

網頁前端行事曆 fullCalendar教學

加入行事曆 Event

步驟與說明

– 加入 events 陣列屬性
– 加入物件內容 title、start、end、className…
– 加入event後如果有給時間(2024-03-02 12:00:00)可以切換Month、Week、Day看畫面的不同
在 Week、Day 可以看到起始結束時間

<style>
.holidayEvent {
  background-color: #e5be20;
  border-color: #e5be20;
}
</style>
<body>
    <!-- Calendar position -->
    <div id="calendar"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const calendarEl = document.getElementById("calendar")
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          buttonText: {
            today: "Today",
            month: "Month",
            week: "Week",
            day: "Day",
          },
          // ----- 本段落新增開始 -----
          events: [ // Events 
            {
              title: "All Day Event",
              start: "2024-03-02",
            },
            {
              title: "Time Event",
              start: "2024-03-02 12:00:00",
            },
            {
              title: "Holiday",
              start: "2024-03-03 12:00:00",
              end: "2024-03-06 16:00:00",
              textColor: "#000",
              className: "holidayEvent"
            },
            {
              title: "Home Page",
              start: "2024-03-08",
              url: "網址路徑"
            },
          ]
          // ----- 本段落新增結束 -----
        })
        calendar.render()
      })
      
    </script>
  <!-- fullcalendar origin code-->
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
</body>

這邊先將比較常用的提出來，有其他想看的再加上來

屬性功能
titleEvent文字
startEvent開始時間
1.未給時間則表示全天 ex: 2024-03-02
2.給時間 ex: 2024-03-02 12:00:00
endEvent結束時間
1.未給時間則表示全天 ex: 2024-03-03
2.給時間 ex: 2024-03-03 14:00:00
classNameEvent可加入自定義的 css class
textColor修改Event文字顏色
url點擊Event導至相對應的路徑

加入 Event 點擊事件

步驟與說明

– 加入 eventClick: function(info){ } 點擊後觸發
– console.log(info.event) event 就是上一個段落所創建的event物件
可以看到有title、start、end、className、textColor…的key
– Swal.fire 是 Sweetalert2 跳窗Modal的功能
這部分可以放自己想要的功能(搭配info.event來應用)

網頁前端行事曆 
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- sweetAlert2 css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">
    <style>
        /* 滑鼠指到Event時變成手指,也可以自己寫一個class處理 */
        .fc-event {
           cursor: pointer; 
        }
    </style>
  </head>

  <body>
    <!-- Calendar position -->
    <div id="calendar"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const calendarEl = document.getElementById("calendar")
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          buttonText: {
            today: "Today",
            month: "Month",
            week: "Week",
            day: "Day",
          },
          events: [ // Events 
            {
              title: "All Day Event",
              start: "2024-03-02",
            },
            {
              title: "Time Event",
              start: "2024-03-02 12:00:00",
            },
          ],
          // ----- 本段落新增開始 -----
          eventClick: function(info) {
            console.log(info.event)

            Swal.fire({
              icon: info.event.allDay ? "success" : "info",
              title: info.event.title,
              text: info.event.startStr,
              confirmButtonText: "OK",
            })
          },
          // ----- 本段落新增結束 -----
        })
        calendar.render()
      })
      
    </script>
  <!-- sweetAlert2 origin code-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
  <!-- fullcalendar origin code-->
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
</body>

日期點擊與多選

步驟與說明

– 加入 selectable: true 讓行事曆可以被選擇
– 加入 dateClick 和 select 兩個方法
– 一樣可以看到console.log(info)得內容
注意: dateClick 有 dateStr; select則為 startStr、endStr

fullCalendar教學 
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- sweetAlert2 css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">
  </head>

  <body>
    <!-- Calendar position -->
    <div id="calendar"></div>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const calendarEl = document.getElementById("calendar")
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          buttonText: {
            today: "Today",
            month: "Month",
            week: "Week",
            day: "Day",
          },
          // ----- 本段落新增開始 -----
          selectable: true,
          dateClick: function(info) {
            console.log(info)
            Swal.fire({
              icon: "success",
              title: "Clicked",
              text: info.dateStr,
              confirmButtonText: "OK",
            })
          },
          select: function(info) {
            console.log(info)
            Swal.fire({
              icon: "success",
              title: "Selected",
              text: `${info.startStr} ~ ${info.endStr}`,
              confirmButtonText: "OK",
            })
          }
          // ----- 本段落新增結束 -----
        })
        calendar.render()
      })
      
    </script>
  <!-- sweetAlert2 origin code-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
  <!-- fullcalendar origin code-->
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
</body>

</html>

總結

FullCalendar是目前最多人使用的網頁前端行事曆，目前提供幾個基礎的用法，希望能夠減少大家在套件官網花費的時間，其他還有很多上方未提到的功能與方法，如果需要補充或是幫忙說明都可以在下方留言讓我知道，我會在一週內回覆或email你並將你想要知道的功能補上來，祝大家開發順利。

Related Posts

中文 前端教學

網頁前端拖曳套件 | 元素排序 移動 拖放 | SortableJS | 3分鐘Move

[email protected]
中文 前端教學

網頁前端圖片輪播套件 | 3D 自動播放 公告 | Swiper | 5分鐘使用

[email protected]

5 thoughts on “網頁前端行事曆(FullCalendar)教學 | 紀錄 事件 應用 | FullCalendar | 10分鐘熟悉”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *