<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="col-md-12">
@Html.EJS().Schedule("schedule").Width("100%").Height("650px").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2019, 1, 10)).ActionBegin("onActionBegin").RenderCell("onRenderCell").ActionComplete("onActionComplete").DragStop("onStart").ResizeStop("onStart").Render()
</div>
</div>
</div>
<style>
td.e-work-cells.e-work-hours.paint, td.e-work-cells.e-alternate-cells.paint, td.e-work-cells.paint {
pointer-events: none;
}
td.e-work-cells.e-work-hours.AM, td.e-work-cells.e-alternate-cells.AM, td.e-work-cells.AM {
background: #ecdef1 !important;
}
td.e-work-cells.e-work-hours.PM, td.e-work-cells.e-alternate-cells.PM, td.e-work-cells.PM {
background: #def0f2 !important;
}
</style>
<script>
function onActionComplete(args) {
// you can send mail from here
alert("Event Created");
}
// To paint the AM and PM
function onRenderCell(args) {
if (args.elementType == 'workCells') {
if (args.date.getHours() < 12) {
ej.base.addClass([args.element], 'AM');
}
else if (args.date.getHours() > 12) {
ej.base.addClass([args.element], 'PM');
}
else {
ej.base.addClass([args.element], 'paint');
}
}
}
function onStart(args) {
// To prevent drag and resize on 12Am to 1PM
if (args.data.StartTime.getHours() == 12 || args.data.EndTime.getHours() == 12 || args.data.StartTime.getHours() == 13 || args.data.EndTime.getHours() == 13) {
args.cancel = true;
}
}
// To pervent repeat bookings on the same day and time
function onActionBegin(args) {
if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {
var data;
if (args.requestType === 'eventCreate') {
data = args.data[0];
} else if (args.requestType === 'eventChange') {
data = args.data;
}
if (!this.isSlotAvailable(data.StartTime, data.EndTime)) {
args.cancel = true;
}
}
}
</script> |