Added AngularJS Demo

Added [AngularJS Demo for Mobile](https://github.com/CuriousSolutions/CalenStyle/tree/master/demo/Mobile/AngularJS/CalExampleAngularJS.htm)
nehakadam · Mar 27, 2016 · 0b58985 · 0b58985
1 parent 08c9d64
commit 0b58985
Show file tree

Hide file tree

Showing 2 changed files with 556 additions and 0 deletions.
diff --git a/demo/Mobile/AngularJS/CalExampleAngularJS.htm b/demo/Mobile/AngularJS/CalExampleAngularJS.htm
@@ -0,0 +1,245 @@
+<!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", []).controller("Ctrl-CS", function($scope) 
+			{
+
+			});
+
+			$(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" ng-controller="Ctrl-CS">
+
+		<div class="calendarContOuter"></div>
+
+	</body>
+
+</html>