Improvement : Documentation

Improved Documentation to add explanation of calDataSource and added example to illustrate the same.
nehakadam · May 29, 2016 · 0d06344 · 0d06344
1 parent 01e8fb8
commit 0d06344
Show file tree

Hide file tree

Showing 55 changed files with 445 additions and 58 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -350,4 +350,5 @@ module.exports = function(grunt)
 	}
 
 	grunt.registerTask('lint', ['jshint:Main', 'csslint']);
+
 };
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "calenstyle",
 
-    "version": "2.0.0",
+    "version": "2.0.2",
 
     "license" : "See License Information in LICENSE file",
 

diff --git a/demo/Data-JSON.htm b/demo/Data-JSON.htm
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+
+		<title>JSON Data</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
+		<script type="text/javascript" src="js/jquery-ui-custom-1.11.2.min.js"></script>
+    	<link rel="stylesheet" type="text/css" href="css/jquery-ui-custom-1.11.2.min.css" />
+
+		<link rel="stylesheet" type="text/css" href="../src/calenstyle.css" />
+		<link rel="stylesheet" type="text/css" href="../src/calenstyle-jquery-ui-override.css" />
+		<link rel="stylesheet" type="text/css" href="../src/calenstyle-iconfont.css" />
+		<script type="text/javascript" src="../src/calenstyle.js"></script>
+
+		<script type="text/javascript" src="js/CalJsonGenerator.js"></script>
+
+		<style type="text/css">
+
+			.calendarContOuter
+			{
+            	width: 90%;
+				height: 600px;
+				margin: 0px auto;
+
+				font-size: 14px;
+			}
+
+			.cElemDatePicker
+			{
+				font-size: 14px;
+			}
+
+			.cActionBar
+			{
+				line-height: 30px;
+				background: #F5F5F5;
+			}
+
+			.reload
+			{
+				margin-left: 10px;
+				padding: 3px 5px;
+				border-radius: 2px;
+				background: #444444;
+                font-size: 80%;
+                color: #FFFFFF;
+
+				cursor: pointer;
+			}
+
+		</style>
+
+		<script type="text/javascript">
+
+			$(function() 
+			{
+
+				$(".calendarContOuter").CalenStyle(
+				{
+
+					sectionsList: ["Header", "ActionBar", "Calendar"],
+
+					visibleView: "DetailedMonthView",
+
+					calDataSource: 
+					[
+					    {
+					        sourceFetchType: "DATERANGE",
+					        sourceType: "JSON",						
+					        source: {
+
+						        eventSource: [
+						        	{
+						              "identifier": "1", 
+						              "isAllDay": false, 
+						              "start": "22-05-2016 09:00",
+						              "end": "22-05-2016 10:00",
+						              "calendar": "Meeting", 
+						              "tag": "Work",
+						              "title": "Meeting with Ana", 
+						              "description": "", 
+						              "url": "", 
+
+						              "icon": "icon-Meeting", 
+						              "color": "20DAEC", 
+						              "borderColor": "000000", 
+						              "textColor": "000000",
+						              "nonAllDayEventsTextColor": "000000",
+
+						              "isDragNDropInMonthView": true, 
+						              "isDragNDropInDetailView": true, 
+						              "isResizeInDetailView": true 
+						            }
+						        ]
+						    }
+
+					    }
+					],
+
+					modifyActionBarView: function(actionBar, visibleViewName)
+					{
+						var thisObj = this;
+
+						$(actionBar).empty();
+						$(actionBar).append("<span class='reload'>Reload</span>");
+						$(".reload").click(function()
+						{
+							thisObj.reloadData();
+						});
+					}
+
+				});
+
+			});
+
+		</script>
+
+	</head>
+
+	<body>
+
+		<div class="calendarContOuter"></div>
+
+	</body>
+
+</html>
diff --git a/demo/Mobile/Angular/CalExampleAngular.htm b/demo/Mobile/Angular/CalExampleAngular.htm
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+
+		<title>CalenStyle with AngularJS</title>
+
+		<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
+        <script type="text/javascript" src="../../js/jquery-ui-custom-1.11.2.min.js"></script>
+        <link rel="stylesheet" type="text/css" href="../../css/jquery-ui-custom-1.11.2.min.css" />
+
+        <script type="text/javascript" src="../../js/angular.min.js"></script>
+
+        <script type="text/javascript" src="../../js/jquery.ui.touch-punch.js"></script>
+        <script type="text/javascript" src="../../js/hammer.min.js"></script>
+        <script type="text/javascript" src="../../js/fastclick.js"></script>
+
+        <link rel="stylesheet" type="text/css" href="../../../src/calenstyle.css" />
+        <link rel="stylesheet" type="text/css" href="../../../src/calenstyle-jquery-ui-override.css" />
+        <link rel="stylesheet" type="text/css" href="../../../src/calenstyle-iconfont.css" />
+        <script type="text/javascript" src="../../../src/calenstyle.js"></script>
+
+        <link rel="stylesheet" type="text/css" href="../../css/CalEventList.css" />
+        <script type="text/javascript" src="../../js/CalJsonGenerator.js"></script>
+
+
+		<style type="text/css">
+
+			.calendarContOuter
+			{
+            	position: absolute;
+                left: 0px;
+                right: 0px;
+                top: 0px;
+                bottom: 0px;
+
+				font-size: 14px;
+				text-shadow: none;
+			}
+
+            .cElemDatePicker
+            {
+                font-size: 13px;
+            }
+
+			.cdlvDaysTableRowCustom
+			{
+                display: -webkit-flex; /* Safari */
+                -webkit-flex-direction: row; /* Safari 6.1+ */
+                -webkit-flex-wrap: wrap-reverse;
+                -webkit-justify-content: center;
+
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap-reverse;
+                justify-content: center;
+                align-content: flex-start;
+
+                padding: 2px;
+			}
+
+			.custEvent
+			{
+                display: inline-block;
+                width: 5px;
+                height: 5px;
+                line-height: 5px;
+
+                margin: 1px 2px;
+
+                text-align: center;
+			}
+
+			@media screen and (max-width: 500px), (max-height: 400px)
+			{
+				.custEvent
+				{
+                    display: inline-block;
+                    width: 4px;
+                    height: 4px;
+                    line-height: 4px;
+
+                    margin: 1px 2px;
+
+                    text-align: center;
+				}
+			}
+
+		</style>
+
+		<script type="text/javascript">
+
+
+			angular.module("App-CS", []);
+
+			$(document).ready(function()
+			{
+			    $(".calendarContOuter").CalenStyle(
+				{                            
+					sectionsList: ["Header", "Calendar", "EventList"],
+
+                    headerSectionsList: 
+					{
+						left: ["HeaderLabelWithDropdownMenuArrow"],
+						center: [],
+						right: ["PreviousButton", "NextButton"]
+					},
+
+					visibleView: "DayEventListView",
+
+					daysInDayListView: 3,
+
+					eventIndicatorInDayListView: "Custom",
+
+                    dropdownMenuElements: ["DatePicker"],
+
+					displayEventsForPeriodInList: function(listStartDate, listEndDate)
+					{
+						return displayEventsInList(this, listStartDate, listEndDate);
+					},
+
+					eventListAppended: function()
+					{
+						adjustList();
+					},
+
+					calDataSource: 
+					[
+						{
+							sourceFetchType: "DateRange",
+							sourceType: "FUNCTION",						
+							source: function(fetchStartDate, fetchEndDate, durationStartDate, durationEndDate, oConfig, loadViewCallback)
+							{
+								var calObj1 = this;
+								calObj1.incrementDataLoadingCount(1);
+
+								var oEventResponse = generateJsonEvents(fetchStartDate, fetchEndDate);
+								console.log("Response " + fetchStartDate + " " + fetchEndDate);
+								console.log(oEventResponse);
+								if(oEventResponse != undefined)
+								{
+									if(oEventResponse[0])
+									{
+										calObj1.parseDataSource("eventSource", oEventResponse[1], durationStartDate, durationEndDate, loadViewCallback, oConfig, false);
+									}
+								}
+							}
+						}
+					],
+
+					modifyCustomView: function(dArrViewDates)
+					{
+						var calObj1 = this;
+
+						for(var iTempIndex = 0; iTempIndex < dArrViewDates.length; iTempIndex++)
+						{
+							var dThisDate = dArrViewDates[iTempIndex],
+							sDayId = "#cdlvRowDay"+iTempIndex,
+							oArrEvents = calObj1.getArrayOfEventsForView(dThisDate, dThisDate),
+							sTempStr = "",
+							iTempIndex2,
+							sBgColor = "", bIsMarkedG = false;
+
+							for(iTempIndex2 = 0; iTempIndex2 < oArrEvents.length; iTempIndex2++)
+							{
+								var oEvent = oArrEvents[iTempIndex2],
+								sEventColor = oEvent.fromSingleColor ? oEvent.textColor : oEvent.backgroundColor,
+								bIsMarked = ($.cf.isValid(oEvent.isMarked) && oEvent.isMarked);
+								if(bIsMarked)
+								{
+									bIsMarkedG = true;
+									sBgColor = oEvent.fromSingleColor ? oEvent.backgroundColor : $.cf.addHashToHexcode(oEvent.backgroundColor, 0.1);
+								}
+
+								sTempStr += "<span class='custEvent' style='background: "+sEventColor+";'></span>";
+							}
+
+							var sTemp = sTempStr;
+							/*
+							for(iTempIndex3 = 0; iTempIndex3 < 15; iTempIndex3++)
+							{
+								sTemp += sTempStr;
+							}
+							*/
+
+							if(bIsMarkedG)
+								$(calObj1.elem).find(sDayId).css({"background": sBgColor});
+
+							$(calObj1.elem).find(sDayId + " .cdlvDaysTableRowCustom").html(sTemp);
+						}
+
+						calObj1.addRemoveViewLoader(false, "cEventLoaderBg");
+						calObj1.addRemoveLoaderIndicators(false, "cEventLoaderIndicator");
+
+                       	//alert("Modified CustomView");
+					},
+
+                    useHammerjsAsGestureLibrary: true,
+
+                    //hideEventIcon: {Default: false},
+
+                    hideEventTime: {Default: true}
+
+				});
+
+                adjustList();
+				$(window).resize(function()
+				{
+					adjustList();
+				});
+
+				function adjustList()
+				{
+                    var oCal3 = $(".calendarContOuter").CalenStyle();
+					var iEventWidth = $(oCal3.elem).width(),
+                    iEventColorWidth = $(".cListEventColor").outerWidth(true),
+                    iEventIconWidth = $(".cListEventIcon span").outerWidth(true),
+                    oElems = $(".cListEventTime span");
+                    var iMaxWidth = Math.max.apply(null, $(oElems).map(function()
+                    {
+                        return $(this).outerWidth(true);
+                    }).get());
+                    iMaxWidth += 5;
+                    $(".cListEventTime").css({"width": iMaxWidth});
+
+                    var iEventTitleWidth = iEventWidth - (iEventColorWidth + iMaxWidth + iEventIconWidth) - 25;
+                    $(".cListEventTitle").css({"width": iEventTitleWidth});
+				}
+
+			});
+		</script>
+
+	</head>
+
+	<body ng-app="App-CS">
+
+		<div class="calendarContOuter"></div>
+
+	</body>
+
+</html>