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.
318 lines (237 loc) • 8.62 kB
HTML
<html>
<head>
<title>Default View with DatePicker</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">
.calendarDatePicker
{
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 200px;
height: 230px;
font-size: 12px;
}
.calendarContOuter
{
position: absolute;
top: 10px;
left: 220px;
display: inline-block;
width: 1000px;
height: 600px;
font-size: 14px;
}
.cElemDatePicker
{
font-size: 14px;
}
.calendarDatePicker .cContHeader
{
padding: 0px;
}
.calendarContAgenda
{
position: absolute;
top: 250px;
left: 10px;
display: inline-block;
width: 200px;
height: 360px;
font-size: 12px;
background-color: #E4F1FE;
}
</style>
<script type="text/javascript">
$(function()
{
var oCal1, oCal2, oCal3;
var dCal2Selected, dCal2Highlight;
$(".calendarContOuter").CalenStyle(
{
visibleView: "DetailedMonthView",
headerSectionsList:
{
left: ["PreviousButton", "NextButton"],
center: ["HeaderLabel"],
right: ["MenuSegmentedTab"]
},
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);
}
}
}
}
],
initialize: function()
{
oCal1 = this;
},
viewLoaded: function(selectedDate, highlightDates)
{
dCal2Selected = selectedDate,
dCal2Highlight = highlightDates;
},
visibleViewChanged: function(visibleView, selectedDate, highlightDates)
{
oCal2.setting.selectedDate = selectedDate;
oCal2.reloadData();
oCal2.highlightDatesInDatePicker(highlightDates);
oCal3.setting.selectedDate = selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
previousButtonClicked: function(selectedDate, highlightDates)
{
oCal2.setting.selectedDate = selectedDate;
oCal2.reloadData();
oCal2.highlightDatesInDatePicker(highlightDates);
oCal3.setting.selectedDate = selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
nextButtonClicked: function(selectedDate, highlightDates)
{
oCal2.setting.selectedDate = selectedDate;
oCal2.reloadData();
oCal2.highlightDatesInDatePicker(highlightDates);
oCal3.setting.selectedDate = selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
todayButtonClicked: function(selectedDate, highlightDates)
{
oCal2.setting.selectedDate = selectedDate;
oCal2.reloadData();
oCal2.highlightDatesInDatePicker(highlightDates);
oCal3.setting.selectedDate = selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
saveChangesOnEventDrop: function(oDraggedEvent, startDateBeforeDrop, endDateBeforeDrop, startDateAfterDrop, endDateAfterDrop)
{
var calObj1 = this;
console.log(oDraggedEvent);
console.log(startDateAfterDrop);
console.log(endDateAfterDrop);
//calObj1.revertToOriginalEvent(oDraggedEvent, startDateBeforeDrop, endDateBeforeDrop);
//oCal3.setting.selectedDate = oCal1.setting.selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
saveChangesOnEventResize: function(oResizedEvent, startDateBeforeResize, endDateBeforeResize, startDateAfterResize, endDateAfterResize)
{
var calObj1 = this;
console.log(oResizedEvent);
console.log(startDateAfterResize);
console.log(endDateAfterResize);
//calObj1.revertToOriginalEvent(oResizedEvent, startDateBeforeResize, endDateBeforeResize);
//oCal3.setting.selectedDate = selectedDate;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
}
});
$(".calendarDatePicker").CalenStyle(
{
visibleView: "DatePicker",
headerSectionsList:
{
left: ["TodayButton"],
center: ["HeaderLabel"],
right: ["PreviousButton", "NextButton"]
},
selectedDate: dCal2Selected,
shortDayNames: ["S", "M", "T", "W", "T", "F", "S"],
fullMonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
initialize: function()
{
oCal2 = this;
oCal1.datePickerObject = oCal2;
console.log("oCal1.datePickerObject");
console.log(oCal1.datePickerObject);
},
viewLoaded: function(selectedDate, highlightDates)
{
oCal2.highlightDatesInDatePicker(dCal2Highlight);
},
cellClicked: function(sView, dSelectedDateTime, bIsAllDay, pClickedAt)
{
oCal1.setting.selectedDate = dSelectedDateTime;
oCal1.reloadData();
oCal2.reloadData();
//oCal2.highlightDatesInDatePicker(oCal1.getVisibleDates());
oCal3.setting.selectedDate = dSelectedDateTime;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
oCal3.setting.selectedDate = oCal1.tv.dVSDt;
oCal3.setting.daysInAgendaView = oCal1.tv.iNoVDay;
oCal3.tv.iNoVDay = oCal1.tv.iNoVDay;
oCal3.refreshView();
},
parentObject: oCal1,
calDataSource: oCal1.setting.datePickerCalDataSource
});
$(".calendarContAgenda").CalenStyle(
{
visibleView: "AgendaView",
agendaViewTheme: "Timeline3",
sectionsList: ["Calendar"],
selectedDate: oCal1.tv.dVSDt,
agendaViewDuration: "CustomDays",
daysInAgendaView: oCal1.tv.iNoVDay,
initialize: function()
{
oCal3 = this;
oCal3.tv.oAEvents = oCal1.tv.oAEvents;
//oCal3.refreshView();
}
});
});
</script>
</head>
<body>
<div class="calendarDatePicker"></div>
<div class="calendarContAgenda"></div>
<div class="calendarContOuter"></div>
</body>
</html>