fullcalendar

使用FullCalendar實作行事曆

葉子瑄 2021/01/14 18:55:45

2 9724

1. 前言

行事曆可用來紀錄日程或會議的安排、追蹤待辦事項並予以提醒通知。對於現代忙碌的人來說，是個很方便又實用的東西。

FullCalender是一款基於JQuery的日曆控制元件，但需搭配Moment.js套件一起使用。Moment.js是由JavaScript編寫的一款日期處理套件，包含對日期的操作與格式的轉換，甚至支持多國語系。而應用於行事曆上更是綽綽有餘。

本文將應用FullCalender，從如何構建、建立事件、查看事件，而實作一個簡易版的行事曆。

2. 目的

針對現代忙碌的人來說，客戶都會希望讓使用者能簡單明暸且方便的容易上手。而行事曆可與系統功能作結合，例如：到信用卡結帳日時，可通知客戶是否加入行事曆中，並可設立欲通知的日期諸如此類。

希望藉此提供當客戶有需求時，能快速掌握此教學文章，並實作應用於專案中。

3. 介紹與說明

> 載入FullCalender與Moment

> 設定id為calender的div

> 將設定的id轉為calender物件

> 這樣就會出現一個基本的行事曆

> 編輯事件:當該日期空白處被點選時，跳出編輯視窗，可針對事件的名稱、事件類型、事件內容作新增、編輯、刪除。

> JS的設定

n eventFormOkButton：事件確認按鈕，綁定事件ID。

n eventFormDelButton：事件刪除按鈕，綁定事件ID。

n dateInput：事件日期，預設填入被點選的日期，不得修改。

n eventInput：事件名稱，若已有值，帶入欄位中顯示。

n eventItemInput：事件類型，下拉選單，選單內容為：工作、家庭、朋友、個人。

n contentInput：事件內容，若已有值，帶入欄位中顯示。

n eventFormModalTitle：定義編輯視窗的標題名稱。

n eventFormDelButton：事件刪除按鈕，針對已設定的事件，進行刪除。

n eventFormModal：顯示編輯視窗，供使用者編輯。

> 以div設定欲呈現的編輯視窗，並隱藏於頁面中，當該日期空白處被點選時，搭配JS的設定，即可跳出編輯視窗畫面。

> 當設定好事件時，事件標題會出現在該日期上，並針對事件類型顯示不同的顏色

葉子瑄

D7490EC5F7AC27A31F181E3C15318D6E

2021/01/13 17:32:31

請問如何可以看到文章內的圖片

葉子瑄

2021/01/14 09:56:40

你好，可以試著登入查看，就可以正常看到圖片，謝謝

葉子瑄

2021/01/15 09:49:24

已經重新上傳圖片囉，你再看看喔～

D7490EC5F7AC27A31F181E3C15318D6E

2021/01/18 09:21:39

看到哦!感謝您!

0DABFC651AE4750749A0B007271F8E91

2023/05/15 20:08:00

我想請問為什麼我照著圖片上打卻沒辦法跳出表單?他會在最下面有表單的形式出現，而不是出現你上面呈現的畫面

0DABFC651AE4750749A0B007271F8E91

2023/05/15 20:51:29

程式碼是這樣:

<!DOCTYPE html>
<html>

<head>
   
    <!-- <link href='fullcalendar.min.css' rel="stylesheet">
    <script src="moment.js"></script>
    <script src="jquery-1.11.2.min.js"></script>
    <script src='fullcalendar/fullcalendar/fullcalendar.min.js'></script> -->

    <meta charset='utf-8' />
    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' rel='stylesheet' />
    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.min.css' rel='stylesheet'
        media='print' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>  

    <style>
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id='calendar'></div>

    <script>
        $(document).ready(function () {
            $('#calendar').fullCalendar({
                dayClick: function (data, event, view) {
                    // 顯示編輯畫面事件
                    $('#eventFormOkButton').data('key', data.id);
                    $('#eventFormDelButton').data('key', data.id);
                    $('#dateInput').val(data.format('YYYY-MM-DD'));
                    $('#eventInput').val(data.spendEvent);
                    $('#eventItemInput').val(data.eventItem).trigger('change');
                    $('#contentInput').val(data.content);
                    // 修改modal標題名稱
                    $('#eventFormModalTitle').text('編輯事件');
                    // 顯示刪除按鈕
                    $('#eventFormDelButton').show();
                    $('#eventFormModal').modal('show');
                }
            });
        });
    </script>

    <div class="modal fade" id="eventFormModal" tabindex="-1" role="dialog" aria-labelledby="eventFormModal" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="eventFormModalTitle"></h4>
                </div>

                <div class="modal-body">
                    <form id="eventForm">
                        <div class="form-group">
                            <label for="dateInput" class="control-label">事件日期</label>
                            <input type="text" class="form-control" id="dateInput" name="dateInput" readonly>
                        </div>

                        <div class="form-group">
                            <label for="eventInput" class="control-label">事件名稱</label>
                            <input type="text" class="form-control" id="eventInput" name="eventInput">
                        </div>

                        <div class="form-group">
                            <label for="eventItemInput" class="control-label">事件類型</label>
                            <select class="form-control" id="eventItemInput" name="eventItemInput">
                                <option>請選擇</option>
                                <option value="工作">工作</option>
                                <option value="家庭">家庭</option>
                                <option value="朋友">朋友</option>
                                <option value="家人">家人</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="contentInput" class="control-label">事件內容</label>
                            <textarea class="form-control" id="contentInput" name="contentInput" rows="4" cols="25"></textarea>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="eventFormOkButton">確定</button>
                    <button type="button" class="btn btn-danger" id="eventFormDelButton">刪除</button>
                </div>

            </div>
        </div>
    </div>


</body>

</html>

TypeScript - Non-null assertion operator - !

軟體工程：更新 Vue 2 的 Vue Cli

Angular-SCAM concept

[Vue] 新一代狀態管理工具 Pinia

[Vuex] 認識 Vue 的好朋友

如何使用 AE 製作流暢的文字筆畫動態