Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
141966 | Jan 13,2019 02:04 PM UTC | Jan 14,2019 11:59 AM UTC | ASP.NET Core - EJ 2 | 1 |
![]() |
Tags: Scheduler |
@{
ViewData["Title"] = "Home Page";
}
<ejs-schedule id="schedule" height="550px" selectedDate="new DateTime(2018, 2, 11)" actionBegin="onActionBegin" popupOpen="onPopupOpen" editorTemplate="#EventEditorTemplate">
<e-schedule-eventsettings dataSource="@ViewBag.AppointmentData">
</e-schedule-eventsettings>
</ejs-schedule>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">List Option</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" required />
</td>
</tr>
<tr>
<td class="e-textlabel">Subject</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Start Time</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">End Time</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Description</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</script>
<script type="text/javascript">
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;
}
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {
args.cancel = true;
}
}
}
function onPopupOpen(args) {
if (args.type === 'Editor') {
if (typeof (document.getElementById("EventType_Error")) == 'undefined') {
document.getElementById("EventType_Error").style.display = "none";
}
var formElement = args.element.querySelector('.e-schedule-form');
var statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
var dropDownListObject = new ej.dropdowns.DropDownList({
placeholder: 'Choose status', value: statusElement.value,
fields: { text: 'Value', value: 'Id' },
dataSource: [{ "Id": 0, "Value": "Unknown" }, { "Id": 1, "Value": "Open" }, { "Id": 2, "Value": "Closed" }, { "Id": 3, "Value": "Approve" }],
change: function () {
if (typeof (document.getElementById("EventType_Error")) != 'undefined') {
document.getElementById("EventType_Error").style.display = "none";
}
}
});
dropDownListObject.appendTo(statusElement);
statusElement.setAttribute('name', 'EventType');
}
var startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
var endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
// Add the custom validation message to the dropdown
var validator = (formElement).ej2_instances[0];
validator.addRules('EventType', { required: true });
}
}
</script>
@*Alignment CSS for error message*@
<style type="text/css">
.e-tooltip-wrap.e-schedule-error {
top: 38px !important;
margin-left: 200px;
}
</style>
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.