iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 43
0
Modern Web

30天學習30套前端技術(2018年)系列 第 43

[十分鐘學習] FullCalendar - 滿版行事曆

example1

設計一套滿版、且可拖曳事件的行事曆。Bootstrap的排版風格,可讀入JSON格式資訊,安裝容易,支援響應式排版,要做行事曆的極佳利器

GitHub Star: 7,500
Javascripting Overall: 85%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- jQuery v1.9.1 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- Moment.js v2.20.0 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
    <!-- FullCalendar v3.8.1 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.min.css" rel="stylesheet"  />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.print.css" rel="stylesheet" media="print"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.min.js"></script>
    
  • npm

    $ npm install fullcalendar
    
  • Bower

    $ bower install fullcalendar
    

《範例》

  • 可拖曳的行事曆

    <div id="example"></div>
    <script>
    	$( "#example" ).fullCalendar({
    		// 參數設定[註1]
    		header: { // 頂部排版
    			left: "prev,next today", // 左邊放置上一頁、下一頁和今天
    			center: "title", // 中間放置標題
    			right: "month,basicWeek,basicDay" // 右邊放置月、周、天
    		},
    		defaultDate: "2018-02-12", // 起始日期
    		weekends: false, // 顯示星期六跟星期日
    		editable: true,  // 啟動拖曳調整日期
    		events: [ // 事件
    			{ // 事件
    				title: "約會",
    				start: "2018-02-01"
    			},
    			{ // 事件(包含開始時間)
    				title: "中餐",
    				start: "2018-02-12T12:00:00"
    			},
    			{ // 事件(包含跨日開始時間、結束時間)
    				title: "音樂節",
    				start: "2018-02-07",
    				end: "2018-02-10"
    			},
    			{ // 事件(包含開始時間、結束時間)
    				title: "會議",
    				start: "2018-02-12T10:30:00",
    				end: "2018-02-12T12:30:00"
    			},
    			{ // 事件(設定連結)
    				title: "Click for Google",
    				url: "http://google.com/",
    				start: "2018-02-28"
    			}
    		]
    	});
    </script>
    

    [註1]

    參數 描述
    defaultDate 起始日期
    weekends 顯示星期六跟星期日
    editable 啟動拖曳調整日期

《延伸》

  1. FullCalendar - JavaScript Event Calendar
  2. fullcalendar/fullcalendar: Full-sized drag & drop event calendar

上一篇
[十分鐘學習] Store.js - 前端微型暫存DB
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言