HTML5事件日曆/計劃程序

分享于 

19分钟阅读

Web开发

  简体

HTML5 Event Calendar/Scheduler (Open-Source)

在本文中,我們將構建一個簡單的事件日曆 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主題

HTML5 Event Calendar - Default CSS Theme

綠色CSS主題

HTML5 Event Calendar - Green CSS Theme

google喜歡CSS主題

HTML5 Event Calendar - Google-Like CSS Theme

傳統的CSS主題

HTML5 Scheduler - Traditional CSS Theme

透明CSS主題

HTML5 Scheduler - Transparent CSS Theme

白色CSS主題

HTML5 Scheduler - White CSS Theme

步驟 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>



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

HTML5 Event Calendar (Empty)

步驟 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: 活動移動

HTML5 Event Calendar - Drag and Drop Moving

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

我們只需添加定製處理程序,使用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主題

HTML5 Event Calendar - CSS Theme

如果你想使用自定義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主題。

月曆日曆

HTML5 Monthly Event Calendar

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


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



<script type="text/javascript">


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


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


 dp.init();


</script>



事件日曆本地化

HTML5 Event Calendar Localization

可以使用。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>



持續時間欄

HTML5 event calendar with duration bar support

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

事件自定義( HTML,CSS )

HTML5 Event Calendar Customization

自版本 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
  • 工具提示

演示:

月曆事件自定義

HTML5 Monthly Event Calendar Customization

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

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

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

演示:

例如:


<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插件

Angular JS Event Calendar/Scheduler

,版本,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>



另請參閱

歷史記錄


CAL  Html5  EVE  event  日历  
相关文章