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.
463 lines (366 loc) • 14.4 kB
HTML
<html>
<head>
<title>Add Event</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" />
<script type="text/javascript" src="js/DateTimePicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/DateTimePicker.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: 1024px;
height: 768px;
margin: 0px auto;
}
.calendarContOuter
{
width: 1000px;
height: 500px;
margin: 0px auto;
font-size: 14px;
}
.cElemDatePicker
{
font-size: 14px;
}
#ipAlertStartEnd, #ipAlertTitle
{
display:none;
}
</style>
<script type="text/javascript">
var oCal1, sInputTZOffset = "-00:00";
$(document).ready(function()
{
$(".calendarContOuter").CalenStyle(
{
initialize: function()
{
oCal1 = this;
},
//selectedDate: new Date(2014, 05, 12, 0, 0, 0, 0),
//visibleView: "QuickAgendaView",
viewsToDisplay: [
{
"viewName": "DetailedMonthView",
"viewDisplayName": "Month"
},
{
"viewName": "WeekView",
"viewDisplayName": "Week"
},
{
"viewName": "DayView",
"viewDisplayName": "Day"
},
{
"viewName": "QuickAgendaView",
"viewDisplayName": "QuickAgenda"
},
{
viewName: "TaskPlannerView",
viewDisplayName: ""
}
],
displayWeekNumInMonthView: true,
changeColorBasedOn: "Event",
hideEventIcon: {Default: true},
formatDates:
{
"hh:mm": function(iDate)
{
if(iDate.H < 5)
return "Night " + oCal1.getNumberStringInFormat(iDate.h, 2, true) + ":" + oCal1.getNumberStringInFormat(iDate.m, 2, true);
else if(iDate.H < 10)
return "Morning " + oCal1.getNumberStringInFormat(iDate.h, 2, true) + ":" + oCal1.getNumberStringInFormat(iDate.m, 2, true);
else if(iDate.H < 14)
return "Afternoon " + oCal1.getNumberStringInFormat(iDate.h, 2, true) + ":" + oCal1.getNumberStringInFormat(iDate.m, 2, true);
else if(iDate.H < 19)
return "Evening " + oCal1.getNumberStringInFormat(iDate.h, 2, true) + ":" + oCal1.getNumberStringInFormat(iDate.m, 2, true);
else
return "Night " + oCal1.getNumberStringInFormat(iDate.h, 2, true) + ":" + oCal1.getNumberStringInFormat(iDate.m, 2, true);
}
},
calDataSource:
[
{
sourceId: "s1",
sourceFetchType: "DateRange",
sourceType: "FUNCTION",
config:
{
inputTZOffset: sInputTZOffset,
},
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);
}
}
}
}
],
saveChangesOnEventDrop: function(oDraggedEvent, startDateBeforeDrop, endDateBeforeDrop, startDateAfterDrop, endDateAfterDrop)
{
var calObj1 = this;
console.log(oDraggedEvent);
console.log(startDateAfterDrop);
console.log(endDateAfterDrop);
//calObj1.revertToOriginalEvent(oDraggedEvent, startDateBeforeDrop, endDateBeforeDrop);
},
cellClicked: function(sView, dSelectedDateTime, bIsAllDay, pClickedAt)
{
console.log("Cell Clicked : " + sView + " " + dSelectedDateTime + " " + pClickedAt.x + " " + pClickedAt.y);
showModal(bIsAllDay, dSelectedDateTime);
},
eventsAddedInView: function(visibleView, eventClass)
{
var thisObj = this;
$(thisObj.elem).find(eventClass).popover(
{
placement: "top",
trigger: "hover",
html: true,
container: "body",
content: function()
{
var oTooltipContent = $(this).data("tooltipcontent"),
sTooltipText = "<div class='cTooltipTitle'>" + oTooltipContent.title + "</div><div class='cTooltipTime'>" + oTooltipContent.startDateTime + "<br/>" + oTooltipContent.endDateTime + "</div>";
return sTooltipText;
}
});
}
});
$('input[type="checkbox"]').bind('click',function()
{
validateAllDayChecked();
});
$('#modal-form').on('show.bs.modal', function (e)
{
validateAllDayChecked();
});
customizeInputs();
defineFormEvents();
});
function showModal(bIsAllDay, dStartDateTime)
{
console.log("showModal : " + bIsAllDay + " " + dStartDateTime);
$("#modal-form").modal('show');
$("#ipTitle, #ipDesc").val("");
$("#ipAllDay").prop("checked", bIsAllDay);
var dEndDateTime, sStartDateTime, sEndDateTime;
if(bIsAllDay)
{
dEndDateTime = new Date(dStartDateTime);
dEndDateTime.setDate(dStartDateTime.getDate() + (oCal1.setting.allDayEventDuration - 1));
sStartDateTime = oCal1.getDateInFormat({"date": dStartDateTime}, "dd-MM-yyyy", false, false);
sEndDateTime = oCal1.getDateInFormat({"date": dEndDateTime}, "dd-MM-yyyy", false, false);
}
else
{
dEndDateTime = new Date(dStartDateTime.getTime() + (oCal1.setting.eventDuration * 6E4));
sStartDateTime = oCal1.getDateInFormat({"date": dStartDateTime}, "dd-MM-yyyy HH:mm", oCal1.setting.is24Hour, false);
sEndDateTime = oCal1.getDateInFormat({"date": dEndDateTime}, "dd-MM-yyyy HH:mm", oCal1.setting.is24Hour, false);
}
console.log(sEndDateTime + " " + sEndDateTime);
$("#ipStart").val(sStartDateTime);
$("#ipEnd").val(sEndDateTime);
validateAllDayChecked();
}
function customizeInputs()
{
console.log("DateTimePicker : ");
console.log($(".modal-dtpicker"));
$(".modal-dtpicker").DateTimePicker(
{
dateSeparator: oCal1.setting.formatSeparatorDate,
timeSeparator: oCal1.setting.formatSeparatorTime,
dateTimeSeparator: oCal1.setting.formatSeparatorDateTime,
dateFormat: "dd-MM-yyyy",
dateTimeFormat: "dd-MM-yyyy HH:mm:ss"
});
}
function validateDateTimes(bIsAllDay, dStartDateTime, dEndDateTime)
{
if(bIsAllDay)
{
console.log("Date Comparison : " + oCal1.compareDates(dStartDateTime, dEndDateTime));
if(oCal1.compareDates(dStartDateTime, dEndDateTime) > 0)
{
$("#ipAlertStartEnd").show();
return false;
}
}
else
{
console.log("DateTime Comparison : " + oCal1.compareDateTimes(dStartDateTime, dEndDateTime));
if(oCal1.compareDateTimes(dStartDateTime, dEndDateTime) > 0)
{
$("#ipAlertStartEnd").show();
return false;
}
}
$("#ipAlertStartEnd").hide();
return true;
}
function validateAllDayChecked()
{
console.log("validateAllDayChecked " + ($("#ipAllDay").is(':checked')));
if($("#ipAllDay").is(':checked'))
{
$("#ipStart-group label").html("Start Date : ");
$("#ipEnd-group label").html("End Date : ");
$("#ipStart, #ipEnd").data("field", "date");
var sDateTimeRegex = /^([0-3]{1}[0-9]{1})(-([0-1]{1}[0-9]{1}))(-([0-9]{4}))(\s)([0-2]{1}[0-9]{1}):([0-6]{1}[0-9]{1})/;
var sDateTimeStart = $("#ipStart").val(),
sArrDateTimeStart = sDateTimeStart.match(sDateTimeRegex),
sDateTimeEnd = $("#ipEnd").val(),
sArrDateTimeEnd = sDateTimeEnd.match(sDateTimeRegex);
if(sArrDateTimeStart != null)
$("#ipStart").val(sDateTimeStart.split(" ")[0]);
if(sArrDateTimeEnd != null)
$("#ipEnd").val(sDateTimeEnd.split(" ")[0]);
}
else
{
$("#ipStart-group label").html("Start Date Time : ");
$("#ipEnd-group label").html("End Date Time : ");
$("#ipStart, #ipEnd").data("field", "datetime");
var sDateTimeRegex = /^([0-3]{1}[0-9]{1})(-([0-1]{1}[0-9]{1}))(-([0-9]{4}))(\s)([0-2]{1}[0-9]{1}):([0-6]{1}[0-9]{1})/;
var sDateTimeStart = $("#ipStart").val(),
sArrDateTimeStart = sDateTimeStart.match(sDateTimeRegex),
sDateTimeEnd = $("#ipEnd").val(),
sArrDateTimeEnd = sDateTimeEnd.match(sDateTimeRegex);
console.log("Arrays : " + sDateTimeStart + " " + sDateTimeEnd);
console.log(sArrDateTimeStart);
console.log(sArrDateTimeEnd);
if(sArrDateTimeStart == null)
$("#ipStart").val(sDateTimeStart + " 00:00");
if(sArrDateTimeEnd == null)
$("#ipEnd").val(sDateTimeEnd + " 00:00");
}
}
function parseDateInFormat(bIsAllDay, sDateTime)
{
var dDateTime;
if(bIsAllDay)
{
var sArrDateTime = sDateTime.match(/^([0-3]{1}[0-9]{1})(-([0-1]{1}[0-9]{1}))(-([0-9]{4}))/);
console.log(sArrDateTime);
dDateTime = new Date(sArrDateTime[5], sArrDateTime[3] - 1, sArrDateTime[1], 0, 1, 0, 0);
}
else
{
var sArrDateTime = sDateTime.match(/^([0-3]{1}[0-9]{1})(-([0-1]{1}[0-9]{1}))(-([0-9]{4}))(\s)([0-2]{1}[0-9]{1}):([0-6]{1}[0-9]{1})/);
console.log(sArrDateTime);
dDateTime = new Date(sArrDateTime[5], sArrDateTime[3] - 1, sArrDateTime[1], sArrDateTime[7], sArrDateTime[8], 0, 0);
}
return dDateTime;
}
function defineFormEvents()
{
$("#ipStart, #ipEnd").change(function()
{
var bIsAllDay = $("#ipAllDay").is(':checked'),
dStartDateTime = parseDateInFormat(bIsAllDay, $("#ipStart").val()),
dEndDateTime = parseDateInFormat(bIsAllDay, $("#ipEnd").val());
validateDateTimes(bIsAllDay, dStartDateTime, dEndDateTime);
});
$("#submit").click(function()
{
var bIsAllDay = $("#ipAllDay").is(':checked'),
dStartDateTime = parseDateInFormat(bIsAllDay, $("#ipStart").val()),
dEndDateTime = parseDateInFormat(bIsAllDay, $("#ipEnd").val()),
sTitle = $("#ipTitle").val(),
sDesc= $("#ipDesc").val();
if(sTitle != "")
$("#ipAlertTitle").hide();
else
$("#ipAlertTitle").show();
if(sTitle != "" && validateDateTimes(bIsAllDay, dStartDateTime, dEndDateTime))
{
if(!bIsAllDay)
{
dStartDateTime = oCal1.normalizeDateTimeWithOffset(dStartDateTime, oCal1.setting.outputTZOffset, sInputTZOffset);
dEndDateTime = oCal1.normalizeDateTimeWithOffset(dEndDateTime, oCal1.setting.outputTZOffset, sInputTZOffset);
}
var oEvent = new CalEvent("AddedOnUI", bIsAllDay, dStartDateTime, dEndDateTime, "Dynamic", sTitle, sDesc, "https://www.google.com");
var oArrEvent = new Array();
oArrEvent.push(oEvent);
console.log(oEvent);
console.log(oArrEvent);
oCal1.addEventsForSource(oArrEvent, "s1");
oCal1.refreshView();
$("#modal-form").modal("hide");
}
});
}
</script>
</head>
<body>
<div class="calendarContOuterParent">
<div class="calendarContOuter"></div>
</div>
<div id="modal-form" class="modal fade">
<div class="modal-dtpicker"></div>
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
Add Event
</div>
<div class="modal-body">
<div id="ipAlertTitle" class="alert alert-danger" role="alert">
Title should not be Empty
</div>
<div id="ipTitle-group" class="form-group">
<label for="ipTitle">Title : </label>
<input type="text" class="form-control" id="ipTitle" placeholder="Title">
</div>
<div id="ipAllDay-group" class="checkbox">
<label>
<input id="ipAllDay" type="checkbox" checked> All Day
</label>
</div>
<div id="ipAlertStartEnd" class="alert alert-danger" role="alert">
Start DateTime should be earlier than End DateTime
</div>
<div id="ipStart-group" class="form-group">
<label for="ipStart">Start Date : </label>
<input type="text" class="form-control" id="ipStart" data-field="date" placeholder="Start">
</div>
<div id="ipEnd-group" class="form-group">
<label for="ipStart">End Date : </label>
<input type="text" class="form-control" id="ipEnd" data-field="date" placeholder="End">
</div>
<div id="ipDesc-group" class="form-group">
<label for="ipDesc">Description : </label>
<textarea class="form-control" rows="3" id="ipDesc" placeholder="Description"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default form-btn" data-dismiss="modal">Close</button>
<button id="submit" type="button" class="btn btn-default form-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>