Skip to content

Commit 0d06344

Browse files
nehakadamnehakadam
committed
Improvement : Documentation
Improved Documentation to add explanation of calDataSource and added example to illustrate the same.
1 parent 01e8fb8 commit 0d06344

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+445
-58
lines changed

Diff for: ‎Gruntfile.js

+1
Original file line numberDiff line numberDiff line change
@@ -350,4 +350,5 @@ module.exports = function(grunt)
350350
}
351351

352352
grunt.registerTask('lint', ['jshint:Main', 'csslint']);
353+
353354
};

Diff for: ‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "calenstyle",
33

4-
"version": "2.0.0",
4+
"version": "2.0.2",
55

66
"license" : "See License Information in LICENSE file",
77

Diff for: ‎demo/Data-JSON.htm

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>JSON Data</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9+
10+
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
11+
<script type="text/javascript" src="js/jquery-ui-custom-1.11.2.min.js"></script>
12+
<link rel="stylesheet" type="text/css" href="css/jquery-ui-custom-1.11.2.min.css" />
13+
14+
<link rel="stylesheet" type="text/css" href="../src/calenstyle.css" />
15+
<link rel="stylesheet" type="text/css" href="../src/calenstyle-jquery-ui-override.css" />
16+
<link rel="stylesheet" type="text/css" href="../src/calenstyle-iconfont.css" />
17+
<script type="text/javascript" src="../src/calenstyle.js"></script>
18+
19+
<script type="text/javascript" src="js/CalJsonGenerator.js"></script>
20+
21+
<style type="text/css">
22+
23+
.calendarContOuter
24+
{
25+
width: 90%;
26+
height: 600px;
27+
margin: 0px auto;
28+
29+
font-size: 14px;
30+
}
31+
32+
.cElemDatePicker
33+
{
34+
font-size: 14px;
35+
}
36+
37+
.cActionBar
38+
{
39+
line-height: 30px;
40+
background: #F5F5F5;
41+
}
42+
43+
.reload
44+
{
45+
margin-left: 10px;
46+
padding: 3px 5px;
47+
border-radius: 2px;
48+
background: #444444;
49+
font-size: 80%;
50+
color: #FFFFFF;
51+
52+
cursor: pointer;
53+
}
54+
55+
</style>
56+
57+
<script type="text/javascript">
58+
59+
$(function()
60+
{
61+
62+
$(".calendarContOuter").CalenStyle(
63+
{
64+
65+
sectionsList: ["Header", "ActionBar", "Calendar"],
66+
67+
visibleView: "DetailedMonthView",
68+
69+
calDataSource:
70+
[
71+
{
72+
sourceFetchType: "DATERANGE",
73+
sourceType: "JSON",
74+
source: {
75+
76+
eventSource: [
77+
{
78+
"identifier": "1",
79+
"isAllDay": false,
80+
"start": "22-05-2016 09:00",
81+
"end": "22-05-2016 10:00",
82+
"calendar": "Meeting",
83+
"tag": "Work",
84+
"title": "Meeting with Ana",
85+
"description": "",
86+
"url": "",
87+
88+
"icon": "icon-Meeting",
89+
"color": "20DAEC",
90+
"borderColor": "000000",
91+
"textColor": "000000",
92+
"nonAllDayEventsTextColor": "000000",
93+
94+
"isDragNDropInMonthView": true,
95+
"isDragNDropInDetailView": true,
96+
"isResizeInDetailView": true
97+
}
98+
]
99+
}
100+
101+
}
102+
],
103+
104+
modifyActionBarView: function(actionBar, visibleViewName)
105+
{
106+
var thisObj = this;
107+
108+
$(actionBar).empty();
109+
$(actionBar).append("<span class='reload'>Reload</span>");
110+
$(".reload").click(function()
111+
{
112+
thisObj.reloadData();
113+
});
114+
}
115+
116+
});
117+
118+
});
119+
120+
</script>
121+
122+
</head>
123+
124+
<body>
125+
126+
<div class="calendarContOuter"></div>
127+
128+
</body>
129+
130+
</html>

Diff for: ‎demo/Mobile/Angular/CalExampleAngular.htm

+242
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>CalenStyle with AngularJS</title>
8+
9+
<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
10+
<script type="text/javascript" src="../../js/jquery-ui-custom-1.11.2.min.js"></script>
11+
<link rel="stylesheet" type="text/css" href="../../css/jquery-ui-custom-1.11.2.min.css" />
12+
13+
<script type="text/javascript" src="../../js/angular.min.js"></script>
14+
15+
<script type="text/javascript" src="../../js/jquery.ui.touch-punch.js"></script>
16+
<script type="text/javascript" src="../../js/hammer.min.js"></script>
17+
<script type="text/javascript" src="../../js/fastclick.js"></script>
18+
19+
<link rel="stylesheet" type="text/css" href="../../../src/calenstyle.css" />
20+
<link rel="stylesheet" type="text/css" href="../../../src/calenstyle-jquery-ui-override.css" />
21+
<link rel="stylesheet" type="text/css" href="../../../src/calenstyle-iconfont.css" />
22+
<script type="text/javascript" src="../../../src/calenstyle.js"></script>
23+
24+
<link rel="stylesheet" type="text/css" href="../../css/CalEventList.css" />
25+
<script type="text/javascript" src="../../js/CalJsonGenerator.js"></script>
26+
27+
28+
<style type="text/css">
29+
30+
.calendarContOuter
31+
{
32+
position: absolute;
33+
left: 0px;
34+
right: 0px;
35+
top: 0px;
36+
bottom: 0px;
37+
38+
font-size: 14px;
39+
text-shadow: none;
40+
}
41+
42+
.cElemDatePicker
43+
{
44+
font-size: 13px;
45+
}
46+
47+
.cdlvDaysTableRowCustom
48+
{
49+
display: -webkit-flex; /* Safari */
50+
-webkit-flex-direction: row; /* Safari 6.1+ */
51+
-webkit-flex-wrap: wrap-reverse;
52+
-webkit-justify-content: center;
53+
54+
display: flex;
55+
flex-direction: row;
56+
flex-wrap: wrap-reverse;
57+
justify-content: center;
58+
align-content: flex-start;
59+
60+
padding: 2px;
61+
}
62+
63+
.custEvent
64+
{
65+
display: inline-block;
66+
width: 5px;
67+
height: 5px;
68+
line-height: 5px;
69+
70+
margin: 1px 2px;
71+
72+
text-align: center;
73+
}
74+
75+
@media screen and (max-width: 500px), (max-height: 400px)
76+
{
77+
.custEvent
78+
{
79+
display: inline-block;
80+
width: 4px;
81+
height: 4px;
82+
line-height: 4px;
83+
84+
margin: 1px 2px;
85+
86+
text-align: center;
87+
}
88+
}
89+
90+
</style>
91+
92+
<script type="text/javascript">
93+
94+
95+
angular.module("App-CS", []);
96+
97+
$(document).ready(function()
98+
{
99+
$(".calendarContOuter").CalenStyle(
100+
{
101+
sectionsList: ["Header", "Calendar", "EventList"],
102+
103+
headerSectionsList:
104+
{
105+
left: ["HeaderLabelWithDropdownMenuArrow"],
106+
center: [],
107+
right: ["PreviousButton", "NextButton"]
108+
},
109+
110+
visibleView: "DayEventListView",
111+
112+
daysInDayListView: 3,
113+
114+
eventIndicatorInDayListView: "Custom",
115+
116+
dropdownMenuElements: ["DatePicker"],
117+
118+
displayEventsForPeriodInList: function(listStartDate, listEndDate)
119+
{
120+
return displayEventsInList(this, listStartDate, listEndDate);
121+
},
122+
123+
eventListAppended: function()
124+
{
125+
adjustList();
126+
},
127+
128+
calDataSource:
129+
[
130+
{
131+
sourceFetchType: "DateRange",
132+
sourceType: "FUNCTION",
133+
source: function(fetchStartDate, fetchEndDate, durationStartDate, durationEndDate, oConfig, loadViewCallback)
134+
{
135+
var calObj1 = this;
136+
calObj1.incrementDataLoadingCount(1);
137+
138+
var oEventResponse = generateJsonEvents(fetchStartDate, fetchEndDate);
139+
console.log("Response " + fetchStartDate + " " + fetchEndDate);
140+
console.log(oEventResponse);
141+
if(oEventResponse != undefined)
142+
{
143+
if(oEventResponse[0])
144+
{
145+
calObj1.parseDataSource("eventSource", oEventResponse[1], durationStartDate, durationEndDate, loadViewCallback, oConfig, false);
146+
}
147+
}
148+
}
149+
}
150+
],
151+
152+
modifyCustomView: function(dArrViewDates)
153+
{
154+
var calObj1 = this;
155+
156+
for(var iTempIndex = 0; iTempIndex < dArrViewDates.length; iTempIndex++)
157+
{
158+
var dThisDate = dArrViewDates[iTempIndex],
159+
sDayId = "#cdlvRowDay"+iTempIndex,
160+
oArrEvents = calObj1.getArrayOfEventsForView(dThisDate, dThisDate),
161+
sTempStr = "",
162+
iTempIndex2,
163+
sBgColor = "", bIsMarkedG = false;
164+
165+
for(iTempIndex2 = 0; iTempIndex2 < oArrEvents.length; iTempIndex2++)
166+
{
167+
var oEvent = oArrEvents[iTempIndex2],
168+
sEventColor = oEvent.fromSingleColor ? oEvent.textColor : oEvent.backgroundColor,
169+
bIsMarked = ($.cf.isValid(oEvent.isMarked) && oEvent.isMarked);
170+
if(bIsMarked)
171+
{
172+
bIsMarkedG = true;
173+
sBgColor = oEvent.fromSingleColor ? oEvent.backgroundColor : $.cf.addHashToHexcode(oEvent.backgroundColor, 0.1);
174+
}
175+
176+
sTempStr += "<span class='custEvent' style='background: "+sEventColor+";'></span>";
177+
}
178+
179+
var sTemp = sTempStr;
180+
/*
181+
for(iTempIndex3 = 0; iTempIndex3 < 15; iTempIndex3++)
182+
{
183+
sTemp += sTempStr;
184+
}
185+
*/
186+
187+
if(bIsMarkedG)
188+
$(calObj1.elem).find(sDayId).css({"background": sBgColor});
189+
190+
$(calObj1.elem).find(sDayId + " .cdlvDaysTableRowCustom").html(sTemp);
191+
}
192+
193+
calObj1.addRemoveViewLoader(false, "cEventLoaderBg");
194+
calObj1.addRemoveLoaderIndicators(false, "cEventLoaderIndicator");
195+
196+
//alert("Modified CustomView");
197+
},
198+
199+
useHammerjsAsGestureLibrary: true,
200+
201+
//hideEventIcon: {Default: false},
202+
203+
hideEventTime: {Default: true}
204+
205+
});
206+
207+
adjustList();
208+
$(window).resize(function()
209+
{
210+
adjustList();
211+
});
212+
213+
function adjustList()
214+
{
215+
var oCal3 = $(".calendarContOuter").CalenStyle();
216+
var iEventWidth = $(oCal3.elem).width(),
217+
iEventColorWidth = $(".cListEventColor").outerWidth(true),
218+
iEventIconWidth = $(".cListEventIcon span").outerWidth(true),
219+
oElems = $(".cListEventTime span");
220+
var iMaxWidth = Math.max.apply(null, $(oElems).map(function()
221+
{
222+
return $(this).outerWidth(true);
223+
}).get());
224+
iMaxWidth += 5;
225+
$(".cListEventTime").css({"width": iMaxWidth});
226+
227+
var iEventTitleWidth = iEventWidth - (iEventColorWidth + iMaxWidth + iEventIconWidth) - 25;
228+
$(".cListEventTitle").css({"width": iEventTitleWidth});
229+
}
230+
231+
});
232+
</script>
233+
234+
</head>
235+
236+
<body ng-app="App-CS">
237+
238+
<div class="calendarContOuter"></div>
239+
240+
</body>
241+
242+
</html>

0 commit comments

Comments
 (0)