因工作需求，需要撰寫日曆之相關功能，在網路上找到此功能 https://fullcalendar.io/
僅供大家參考。
【使用方式】
Step 1 下載壓縮檔
Step 2 將檔案解壓縮至專案目錄下，並在檔案中加入路徑
如果你的專案有主版頁面(Masterpage)，且此功能不只用在單一頁面，可將路徑寫在MasterPage裡
若只有某一個頁面會用到，就加在那一頁面裡就好。
CSS
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
JS
<script src='js/moment.min.js'></script>
<script src='js/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
※如果檔案內本身就有jquery.min.js，不可重複加入，需取消原本之jquery.min.js ※資料夾裡有一些範例檔，可以做參考
※通常我們在寫網頁時，會把Script寫在<head></head>裡
Step 3 加入Div標籤
在你想要放置的地方，加入標籤即可
<div id='calendar'></div>
Step 4 加入Script
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
});
});
</script>
這樣就完成了!!!成品如下↓↓↓
※可能出現不太一樣的樣式，因為我有使用CSS其他的設定，但不影響整個功能
其他注意事項!!
1.FullCalendar會需要用到jquery，如果專案已經引入了jquery，則不需要重複導入
2.如果要在日曆中使用滑鼠拖拽之功能，需要導入jquery-ui
沒有留言:
張貼留言