HTML5事件日曆/計劃程序

• PHP下載示例項目 PHP ( HTML5，JavaScript，CSS + PHP )
• 5 ( HTML5，JavaScript，CSS + ASP.NET MVC 5 ) [code.daypilot.org] 示例項目
• 下載用於 JavaScript 1.3 SP5事件日曆 ( 開放源代碼) [javascript.daypilot.org]的DayPilot Lite
• 在線演示 [javascript.daypilot.org]

在本文中，我們將構建一個簡單的事件日曆 web應用程序。 客戶端( html5/javascript ) 部分是通用的。 我們將使用示例PHP和 ASP.NET MVC後端。

功能：

• 每周HTML5事件日曆/計劃程序
• 使用日期導航器更改日曆( 在左側)
• 拖放事件創建，移動和調整大小
• 使用CSS主題在單個單擊中更改外觀
• PHP AJAX後端
• ASP.NET MVC AJAX後端

我們將使用 DayPilot Lite for構建事件日曆。 DayPilot版本的JavaScript開放源碼- 在Apache許可以證 2.0下可以用。

調度程序CSS主題

JavaScript的DayPilot Lite提供了幾個預先構建的CSS主題。

你可以使用在線 CSS主題設計器 [themes.daypilot.org]. 創建你自己的主題

默認的CSS主題

綠色CSS主題

google喜歡CSS主題

傳統的CSS主題

透明CSS主題

白色CSS主題

步驟 1: 事件日曆JavaScript庫

包含 daypilot-all.min.js。基本外觀( 默認的CSS主題是嵌入的) 不需要其他 dependecies。

<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script> 

步驟 2: 事件日曆佔位符

將佔位符 <div> 添加到HTML5頁面：

<div id="dp"></div> 

步驟 3: 初始化調度程序

使用 Daypilot.Calendar 類初始化調度程序：

<script type="text/javascript">


 var dp = new DayPilot.Calendar("dp");


 dp.viewType = "Week";


 dp.init();


</script>

這些簡單步驟將呈現一個空的調度程序：

步驟 4: 載入數據

我們將使用一個簡單的AJAX調用將數據載入到事件日曆：

function loadEvents() {


 $.post("backend_events.php", // use"backend/events" for ASP.NET MVC


 {


 start: dp.visibleStart().toString(),


 end: dp.visibleEnd().toString()


 }, 


 function(data) {


 dp.events.list = data;


 dp.update();


 });


}

我們將使用和 visibleEnd() 方法檢測當前可見的英鎊日期範圍，並將它的作為參數發送給 backend_events.php。

backend_event.php 端點按以下格式返回日曆事件數據:

[


 {


 "id":"1",


 "text":"Calendar Event 1",


 "start":"2014-02-25T10:30:00",


 "end":"2014-02-25T16:30:00"


 },


 {


 "id":"2",


 "text":"Calendar Event 2",


 "start":"2014-02-24T09:00:00",


 "end":"2014-02-24T14:30:00"


 },


 {


 "id":"3",


 "text":"Calendar Event 3",


 "start":"2014-02-27T12:00:00",


 "end":"2014-02-27T16:00:00"


 }


]

PHP後端( backend_events.php ):

<?php


require_once '_db.php';



$stmt = $db->prepare('SELECT * FROM events WHERE NOT ((end <= :start) OR (start> = :end))');



$stmt->bindParam(':start', $_POST['start']);


$stmt->bindParam(':end', $_POST['end']);



$stmt->execute();


$result = $stmt->fetchAll();



class Event {}


$events = array();



foreach($result as $row) {


 $e = new Event();


 $e->id = $row['id'];


 $e->text = $row['name'];


 $e->start = $row['start'];


 $e->end = $row['end'];


 $events[] = $e;


}



echo json_encode($events);



?>

ASP.NET MVC後端( backendcontroller。cs )

public ActionResult Events(DateTime? start, DateTime? end)


{



 var events = from ev in db.Events.AsEnumerable() where!(ev.end <= start || ev.start >= end) select ev;



 var result = events


. Select(e => new JsonEvent() { 


 start = e.start.ToString("s"),


 end = e.end.ToString("s"),


 text = e.name,


 id = e.id.ToString()


 })


. ToList();



 return new JsonResult { Data = result };


} 

閱讀有關載入日曆事件數據的更多信息 [doc.daypilot.org].

步驟 5: 活動移動

計劃程序中默認啟用拖放用戶操作(。選擇時間範圍，事件移動，事件調整大小)。

我們只需添加定製處理程序，使用AJAX調用將更改提交到伺服器端。

JavaScript事件處理程序

dp.onEventMoved = function (args) {


 $.post("backend_move.php", // use"backend/move" for ASP.NET MVC


 {


 id: args.e.id(),


 newStart: args.newStart.toString(),


 newEnd: args.newEnd.toString()


 }, 


 function() {


 console.log("Moved.");


 });


};

PHP後端( backend_move。PHP )

<?php


require_once '_db.php';



$insert = "UPDATE events SET start = :start, end = :end WHERE id = :id";



$stmt = $db->prepare($insert);



$stmt->bindParam(':start', $_POST['newStart']);


$stmt->bindParam(':end', $_POST['newEnd']);


$stmt->bindParam(':id', $_POST['id']);



$stmt->execute();



class Result {}



$response = new Result();


$response->result = 'OK';


$response->message = 'Update successful';



echo json_encode($response);



?>

ASP.NET MVC後端( backendcontroller。cs )

public ActionResult Move(int id, string newStart, string newEnd)


{


 var toBeResized = (from ev in db.Events where ev.id == id select ev).First();


 toBeResized.start = Convert.ToDateTime(newStart);


 toBeResized.end = Convert.ToDateTime(newEnd);


 db.SubmitChanges();



 return new JsonResult { Data = new Dictionary<string, object> { { "id", toBeResized.id } } };


} 

了解有關拖放事件移動的更多信息 [doc.daypilot.org].

步驟 6: 應用CSS主題

如果你想使用自定義CSS主題，你需要包含樣式表：

<link type="text/css" rel="stylesheet" href="themes/calendar_transparent.css" /> 

在初始化過程中設置主題屬性：

<script type="text/javascript">


 var dp = new DayPilot.Calendar("dp");


 dp.viewType = "Week";


 dp.theme = "calendar_transparent";


 dp.init();


</script> 

你可以選擇其中一個包含CSS主題，或者你可以使用在線 CSS主題設計器創建你自己的CSS主題。

月曆日曆

DayPilot還包括一個月事件日曆視圖。 月視圖控制項的API使用與每日/每周日曆相同的設計：

<div id="dp"></div>



<script type="text/javascript">


 var dp = new DayPilot.Month("dp");


 dp.startDate = "2016-01-01";


 dp.init();


</script>

事件日曆本地化

可以使用。locale屬性輕鬆地對事件日曆語言環境進行設置：

<script type="text/javascript">


 var dp = new DayPilot.Calendar("dp");


 dp.locale = "de-de";


 dp.init();


</script> 

日曆包括內置支持以下語言環境：

• ca
• cs-cz
• da
• at
• ch
• de-de
• de
• en
• ca
• m 位元組
• en
• es
• es-mx
• 歐盟
• fi-fi
• fr
• fr通道
• 發件人
• fr
• gl
• 它它
• ch
• ja-jp
• 不含
• nl-nl
• nl
• nn沒有
• pt
• pl-pl
• pt-pt
• 運行運行
• sk-sk
• sv感測器
• zh-cn

你還可以創建和 register 自己的語言環境：

DayPilot.Locale.register(


 new DayPilot.Locale('en-us', 


 {


 'dayNames':['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],


 'dayNamesShort':['Su','Mo','Tu','We','Th','Fr','Sa'],


 'monthNames':['January','February','March','April','May','June','July','August','September','October','November','December'],


 'monthNamesShort':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],


 'timePattern':'h:mm tt',


 'datePattern':'M/d/yyyy',


 'dateTimePattern':'M/d/yyyy h:mm tt',


 'timeFormat':'Clock12Hours',


 'weekStarts':0


 }


)); 

更改計劃程序日期

可以使用 DayPilot.Navigator 控制項( 在屏幕截圖 上面的左側) 更改調度程序的日期( 可見周):

<div id="nav"></div>



<script type="text/javascript">


 var nav = new DayPilot.Navigator("nav");


 nav.showMonths = 3;


 nav.skipMonths = 3;


 nav.selectMode = "week";


 nav.onTimeRangeSelected = function(args) {


 dp.startDate = args.day;


 dp.update();


 loadEvents();


 };


 nav.init();


</script>

持續時間欄

DayPilot事件日曆的版本 1.1支持持續時間欄( ( 事件左側真實日曆事件持續時間的指示符) )。 默認情況下啟用它，你可以使用CSS主題對它的進行樣式設置。

事件自定義( HTML，CSS )

自版本 1.3 SP3以來，DayPilot Lite支持使用onBeforeEventRender事件處理程序的事件定製:

<div id="dp"></div>



<script type="text/javascript">



 var dp = new DayPilot.Calendar("dp");



 // view


 dp.startDate = "2016-06-06";


 dp.viewType = "Week";


 dp.durationBarVisible = false;



 dp.events.list = [


 {


 "start": "2016-06-07T10:00:00",


 "end": "2016-06-07T13:00:00",


 "id": "29b7a553-d44f-8f2c-11e1-a7d5f62eb123",


 "text": "Event 3",


 "backColor": "#B6D7A8",


 "borderColor": "#6AA84F"


 },


 {


 "start": "2016-06-07T14:00:00",


 "end": "2016-06-07T17:00:00",


 "id": "ff968cfb-eba1-8dc1-7396-7f0d4f465c8a",


 "text": "Event 4",


 "backColor": "#EA9999",


 "borderColor": "#CC0000",


 "tags": {


 "type": "important"


 }


 }


 ];



 dp.onBeforeEventRender = function(args) {


 if (args.data.tags && args.data.tags.type === "important"){


 args.data.html = "<b>Important Event</b><br>" + args.data.text;


 args.data.fontColor = "#fff";


 args.data.backColor = "#E06666";


 }


 };



 dp.init();



</script>

你可以使用它自定義以下屬性：

• backColor
• barBackColor
• barColor
• barHidden
• 邊框顏色
• cssClass
• fontColor
• HTML
• 工具提示

演示：

• 事件自定義演示 [javascript.daypilot.org]

月曆事件自定義

在中，DayPilot Lite的月日曆控制項中添加了事件定製插件。

DayPilot Month支持自定義以下事件屬性：

• backColor
• 邊框顏色
• cssClass
• fontColor
• HTML
• 工具提示

演示：

• 月日曆事件定製演示 [javascript.daypilot.org]

例如：

<div id="dp"></div>



<script type="text/javascript">


 var dp = new DayPilot.Month("dp");



 //.. .


 


 dp.events.list = [


 {


 "start": "2013-03-03T00:00:00",


 "end": "2013-03-03T12:00:00",


 "id": "5a8376d2-8e3d-9739-d5d9-c1fba6ec02f9",


 "text": "Event 3"


 },


 {


 "start": "2013-02-25T00:00:00",


 "end": "2013-02-27T12:00:00",


 "id": "1fa34626-113a-ccb7-6a38-308e6cbe571e",


 "text": "Event 4",


 "tags": {


 "type": "important"


 }


 },


 //.. .


 ];



 dp.onBeforeEventRender = function(args) {


 var type = args.data.tags && args.data.tags.type;


 switch (type) {


 case "important":


 args.data.fontColor = "#fff";


 args.data.backColor = "#E06666";


 args.data.borderColor = "#E06666";


 break;


 //.. .


 }


 };



 dp.init();



</script>

AngularJS插件

，版本，DayPilot包含一個 AngularJS事件日曆插件插件，允許在AngularJS中使用事件日曆。 日曆可以使用特殊指令(。<daypilot日曆> 元素) 進行初始化。 它支持AngularJS雙向自動數據綁定。

快速示例：

<script src="scripts/angular.min.js" type="text/javascript"></script>


<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>



<div ng-app="main" ng-controller="CalendarCtrl" >


 <daypilot-calendar id="dp" config="config" ></daypilot-calendar>


</div>



<script type="text/javascript">


 var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope) {


 //.. .


 $scope.config = {


 startDate: "2016-09-01",


 viewType: "Week"


 };


 });


</script>

請參見 AngularJS事件日曆教程 [code.daypilot.org].

AngularJS的"控制器"語法

支持JavaScript的 DayPilot Lite和更高版本支持 angularjs"控制器"語法：

<script src="scripts/angular.min.js" type="text/javascript"></script>


<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>



<div ng-app="main" ng-controller="CalendarCtrl as ctrl" >


 <daypilot-calendar id="dp" config="ctrl.config" events="ctrl.events" publish-as="ctrl.calendar"></daypilot-calendar>


</div>



<script type="text/javascript">


 var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function() {


 //.. .


 var ctrl = this;



 ctrl.config = {


 startDate: "2016-09-01",


 viewType: "Week"


 };



 ctrl.events = [


 {


 start: new DayPilot.Date("2016-09-01T10:00:00"),


 end: new DayPilot.Date("2016-09-01T14:00:00"),


 id: 10001,


 text: "First Event"


 }


 ];


 });


</script>

請參見 "控制器"事件日曆演示 [javascript.daypilot.org].

jQuery插件

DayPilot包括一個 jQuery事件日曆插件插件，它允許使用 jQuery API初始化日曆。

快速示例：

<script src="scripts/jquery.min.js" type="text/javascript"></script>


<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>



<div id="dp"></div>


<script type="text/javascript">


 var dp = $("dp").daypilotCalendar({


 startDate: new DayPilot.Date("2013-03-25").firstDayOfMonth(),


 viewType: "Week"


 });


</script>

另請參閱

• DayPilot用於 JavaScript [javascript.daypilot.org]
• HTML5事件日曆( 開放源代碼) 教程 [code.daypilot.org]

歷史記錄

• 2016年12月12日: 1.3 SP5的 DayPilot Lite ；導航器CSS樣式改進
• 2016年08月24日: 發布了用於JavaScript的 DayPilot Lite ；包括對日曆事件定製的支持
• June: DayPilot Lite Lite的Lite發布；事件自定義示例
• 2016年04月26日: JavaScript的 DayPilot Lite released發布；angularjs"控制器"語法示例添加。
• January 3，2016: 切換CSS主題固定。 released發布的 DayPilot Lite版本。 示例項目使用最新的DayPilot Lite版本。 示例 ASP.NET MVC項目使用 Visual Studio 2015. 添加了jQuery節。添加了月曆視圖部分。
• November: DayPilot Lite的Lite版本發布。
• June: DayPilot的Lite，發布了 1.2 SP2.
• 2015年03月23日: 版本的 DayPilot Lite發布。 更新和固定( 拖放事件調整大小)的示例項目。
• java 1.2年版本，包括 AngularJS事件日曆，包括AngularJS事件日曆插件插件，AngularJS月日曆插件插件。
• November 10，2014: 文檔鏈接已經添加。
• July:: 切換可見周的導航代碼
• 15，2014: backend_events.php 代碼清單固定( $_POST而非 $_GET) )
• April: 2014: DayPilot的Lite Lite發布，本地化示例
• 示例MVC5後端( 下載與代碼清單)
• 2014年03月13日: 版的DayPilot Lite發布
• February 24，2014: 初始版本