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.
208 lines (143 loc) • 5.02 kB
HTML
<html>
<head>
<title>Restricted Section</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: 550px;
margin: 0px auto;
font-size: 14px;
}
.cElemDatePicker
{
font-size: 14px;
}
.note
{
color: #FF0000;
}
</style>
<script type="text/javascript">
$(function()
{
$(".calendarContOuter").CalenStyle(
{
sectionsList: ["Header", "Calendar"],
visibleView: "WeekView",
viewsToDisplay: [
{
viewName: "DetailedMonthView",
viewDisplayName: "Detail Month"
},
{
viewName: "WeekView",
viewDisplayName: ""
},
{
viewName: "QuickAgendaView",
viewDisplayName: ""
},
{
viewName: "MonthView",
viewDisplayName: ""
},
{
viewName: "TaskPlannerView",
viewDisplayName: ""
}
],
calDataSource:
[
{
sourceFetchType: "DateRange",
sourceType: "FUNCTION",
source: function(fetchStartDate, fetchEndDate, durationStartDate, durationEndDate, oConfig, loadViewCallback)
{
var calObj1 = this;
calObj1.incrementDataLoadingCount(2);
var oEventResponse = generateJsonEvents(fetchStartDate, fetchEndDate);
if(oEventResponse != undefined)
{
if(oEventResponse[0])
{
calObj1.parseDataSource("eventSource", oEventResponse[1], durationStartDate, durationEndDate, loadViewCallback, oConfig, false);
}
}
var oBlockedTimeResponse = generateJsonRestrictedSection(fetchStartDate, fetchEndDate);
console.log("oBlockedTimeResponse");
console.log(oBlockedTimeResponse);
if(oBlockedTimeResponse != undefined)
{
if(oBlockedTimeResponse[0])
{
calObj1.parseDataSource("restrictedSectionSource", oBlockedTimeResponse[1], durationStartDate, durationEndDate, loadViewCallback, {}, false);
}
}
}
}
],
isNonBusinessHoursDroppable: false,
isRestrictedSectionDroppable: false
});
});
</script>
</head>
<body>
<p class="note">View Explanation of Restricted Section inside Data-RestrictedSection.htm file.</p>
<div class="calendarContOuter"></div>
<!--
Restricted Section
You can view 4 types of Restricted Sections in the Example.
/* ----------------------------------------------------- */
1. The default restricted section can be displayed as an image with white background and dotted diagonal line gray lines.
You will not be able to drop events in this section with
global setting "isRestrictedSectionDroppable: false"
and
restricted section setting not defined or "isDroppable: false"
/* ----------------------------------------------------- */
2. Restricted Section with Blue Color -
Settings -
backgroundColor: "E4F1FE",
droppableId: "AliceBlue",
isDroppable: true,
allowedDroppables: ["AliceBlue"]
In this section you will be able to drop events with droppableId "AliceBlue".
Events with droppableId = "AliceBlue"
1. "Cycling" event on Friday
2. Movie
/* ----------------------------------------------------- */
3. Restricted Section with Green Color -
Settings -
backgroundColor: "C8F7C5",
droppableId: "Madang",
isDroppable: true,
allowedDroppables: ["All"]
In this section you will be able to drop all events.
/* ----------------------------------------------------- */
3. Restricted Section with Yellow Color -
Settings -
backgroundColor: "FDE3A7",
droppableId: "CapeHoney",
isDroppable: true,
allowedDroppables: ["CapeHoney", "AliceBlue"]
In this section you will be able to drop events with droppableId "CapeHoney" or "AliceBlue".
Events with droppableId = "AliceBlue"
1. "Cycling" event on Friday
2. Movie
Events with droppableId = "CapeHoney"
1. Movie
/* ----------------------------------------------------- */
-->
</body>
</html>