2017年1月2日 星期一

【ASP.NET - C#】FullCalendar 月曆插件-連接資料庫


基礎教學:https://mapleskill.blogspot.tw/2016/12/aspnet-cfullcalendar.html

屬性之應用,可參考這篇:http://www.helloweba.com/view-blog-231.html


今天主要教大家,如何連接後端,從資料庫撈需顯示的資料



Step 1

根據官網文件的說明,可使用JSON傳值,因此我們先創一個新的網頁,做傳值使用,並在屬性"events"處,給予此網址。

例: events:{url: 'getCalendarData.aspx'}

Step 2

建立一個類別檔,將所需設定的欄位,建立出來

例:



id:此筆資料的ID,若之後需做新增或修改之功能,務必要有此欄。
title:顯示的標題
start:開始時間
overlap:是否堆疊
color:背景顏色
(以上類別可有可無,你也可以自己新增其他需要的類別,EX:結束時間)


Step 3

在剛剛新建好的網頁(getCalendarData.aspx),開始撰寫程式

先宣告List

List<CalendarEvent> eventsList = new List<CalendarEvent>();

接著寫SQL語法,將資料庫資料撈出 ,並利用迴圈把每筆資料塞進eventsList裡

for (int i = 0; i < ResultDt.Rows.Count; i++) 
{ 
 CalendarEvent calEvent = new CalendarEvent();  //new一個新的類別,將值一一塞進去  
 calEvent.id = i.ToString(); //由於我的需求是要每筆資料的ID都不同,因此利用迴圈給ID  
 calEvent.start = 給值; 
 calEvent.title = 給值; 
 calEvent.overlap = true;  //true or false 
 calEvent.color = "#1221ba";  //填入色碼 
 eventsList.Add(calEvent);   //將此類別新增到eventsList 
}


Step 4


New一個JSON序列化之方法


System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

將eventsList序列化

string strEvents = js.Serialize(eventsList);

清除並寫入

Response.Clear();
Response.Write(strEvents);
Response.End();


完成!!!

由於資料有隱私,因此有做模糊處理
如果資料超過顯示的內容 會藏在more裡

2016年12月29日 星期四

【ASP.NET - C#】FullCalendar 月曆插件-基礎


因工作需求,需要撰寫日曆之相關功能,在網路上找到此功能 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




後續會介紹,如何設定及使用其他功能