calenstyle
Version:
CalenStyle is a Responsive Drag-and-Drop Event Calendar for Web, iOS, Android & Windows. CalenStyle is customizable plugin having multiple, clean-designed event calendar templates specially designed for web & mobile applications.
152 lines (102 loc) • 3.36 kB
HTML
<html>
<head>
<title>One Day Navigation</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">
.calendarContOuterParent
{
width: 100%;
height: 700px;
}
.calendarContOuter
{
width: 90%;
height: 500px;
margin: 0px auto;
font-size: 14px;
}
.cElemDatePicker
{
font-size: 14px;
}
</style>
<script type="text/javascript">
$(function()
{
$(".calendarContOuter").CalenStyle(
{
viewsToDisplay: [
{
viewName: "QuickAgendaView",
viewDisplayName: ""
},
{
viewName: "TaskPlannerView",
viewDisplayName: ""
}
],
visibleView: "QuickAgendaView",
quickAgendaViewDuration: "CustomDays",
daysInQuickAgendaView: 4,
navigateOneDayInQuickAgendaView: true,
taskPlannerViewDuration: "CustomDays",
daysInTaskPlannerView: 4,
fixedHeightOfTaskPlannerView: false,
navigateOneDayInTaskPlannerView: true,
addDaySummaryInTaskPlannerView: function(dThisDate, $oDaySummaryCell)
{
var oCS = this,
iHours = getRandomInt(5, 10),
iMinutes = getRandomInt(0, 60),
iRate = 20,
sTemplate = "";
sTemplate += "<span class='sum_time'>" + iHours + "h " + iMinutes + "m - </span>";
sTemplate += "<span class='sum_amount'>$" + ((iHours * 60 + iMinutes) * iRate) + ".00</span>";
$oDaySummaryCell.html(sTemplate);
},
is24Hour: true,
calDataSource:
[
{
sourceFetchType: "DateRange",
sourceType: "FUNCTION",
source: function(fetchStartDate, fetchEndDate, durationStartDate, durationEndDate, oConfig, loadViewCallback)
{
var calObj1 = this;
calObj1.incrementDataLoadingCount(1);
var oEventResponse = generateJsonEvents(fetchStartDate, fetchEndDate);
if(oEventResponse != undefined)
{
if(oEventResponse[0])
{
calObj1.parseDataSource("eventSource", oEventResponse[1], durationStartDate, durationEndDate, loadViewCallback, oConfig, false);
}
}
}
}
],
isNonBusinessHoursDroppable: false,
isRestrictedSectionDroppable: false
});
});
function getRandomInt(iMin, iMax)
{
return Math.floor(Math.random() * (iMax - iMin)) + iMin;
}
</script>
</head>
<body>
<div class="calendarContOuterParent">
<div class="calendarContOuter"></div>
</div>
</body>
</html>