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.
158 lines (116 loc) • 4.17 kB
HTML
<html>
<head>
<title>Default View with Custom Event Click</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" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.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>
<!-- Sample Styles and Element Generation code for EventList -->
<link rel="stylesheet" type="text/css" href="css/CalEventList.css" />
<script type="text/javascript" src="js/CalJsonGenerator.js"></script>
<style type="text/css">
.calendarContOuter
{
width: 95%;
height: 500px;
margin: 10px auto;
font-size: 16px;
}
.cElemDatePicker
{
font-size: 14px;
}
button
{
margin: 10px;
}
.popover-content>div
{
margin-top: 10px;
margin-bottom: 10px;
}
.popover-content .cTooltipTitle
{
font-size: 1.3em;
font-weight: normal;
}
.popover-content .cTooltipTime
{
font-size: 1.0em;
}
</style>
<script type="text/javascript">
$(function()
{
$(".calendarContOuter").CalenStyle(
{
//visibleView: "WeekView",
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);
}
}
}
}
],
eventClicked: function(visibleView, sElemSelector, oEvent)
{
var thisObj = this;
console.log(oEvent);
$(thisObj.elem).find(sElemSelector).popover(
{
placement: "top",
trigger: "manual",
html: true,
container: "body",
content: function()
{
var oTooltipContent = $(this).data("tooltipcontent"),
sTitle = oTooltipContent.title || "",
sStartDateTime = oTooltipContent.startDateTime || "",
sEndDateTime = oTooltipContent.endDateTime || "",
sTime = sStartDateTime + ((sEndDateTime !== "") ? ("<br/>" + sEndDateTime) : ""),
sTooltipText = "<div class='cTooltipTitle'>" + sTitle + "</div><div class='cTooltipTime'>" + sTime + "</div>",
sViewStr = '<div>'+sTooltipText+'</div><div><button type="button" class="btn btn-default" data-dismiss="modal">Delete</button><button type="button" class="btn btn-primary">Edit</button></div>';
return sViewStr;
}
});
$(thisObj.elem).find(sElemSelector).popover('show');
$(document).click(function()
{
$(".popover").remove();
});
},
cellClicked: function(sView, dSelectedDate, bIsAllDay, pClickedAt)
{
console.log("Cell Clicked 1 : " + dSelectedDate);
// showModal(true, dSelectedDate);
$(".popover").remove();
}
});
});
</script>
</head>
<body>
<div class="calendarContOuter"></div>
</body>
</html>