The event window can be customized by making use of the editorTemplate API. Here, the custom design is built with the required fields through the script template and its type should be text/x-template.
Each field defined through it should contain the e-field class, so as to allow the processing of those fields in the default event object from internal source. The ID of this customized script template section is assigned to the editorTemplate option, so that this customized fields will be replaced onto the default editor window.
As we are using our Syncfusion sub-components within this editor in the below demo, the custom defined form elements needs to be configured as required Syncfusion components such as DropDownList and DateTimePicker which needs to be done within the popupOpen event. This particular step can be skipped, if the user needs to simply use the normal form design with applicable fields.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(ViewBag.view).PopupOpen("onPopupOpen").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).EditorTemplate("#EventEditorTemplate").ShowQuickInfo(false).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script id="EventEditorTemplate" type="text/template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</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">Status</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</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 onPopupOpen(args) {
if (args.type === 'Editor') {
var statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
var dropDownListObject = new ej.dropdowns.DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed']
});
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);
}
}
}
</script>
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public IActionResult custom-editor-template()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}The quick pop up window can be customized by making use of the popupOpen event which will trigger when a pop up window is about to open. In the below demo an additional description field is added.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(ViewBag.view).ActionBegin("onActionBegin").PopupOpen("onPopupOpen").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
function onActionBegin(args) {
if (args.requestType === 'eventCreate') {
var eventData = args.data;
eventData.Description = document.getElementById("DescriptionValue").innerText;
}
}
function onPopupOpen(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
if (args.type === 'QuickInfo') {
if (args.target.classList.contains("e-work-cells")) {
if (!args.element.querySelector('.custom-field-row')) {
var row = ej.base.createElement('div', { className: 'custom-field-row' });
var formElement = args.element.querySelector('.e-schedule-form');
formElement.appendChild(row);
var container = ej.base.createElement('div', { className: 'custom-field-container' });
var classNames = 'e-field e-custom-description';
var inputEle = ej.base.createElement('input', {
className: classNames, attrs: { type: 'text', value: '', name: 'Description' }
});
container.appendChild(inputEle);
row.appendChild(container);
ej.inputs.Input.createInput({
element: inputEle, floatLabelType: 'Auto',
properties: {
enableRtl: scheduleObj.enableRtl,
placeholder: "Description"
}
});
var element = document.querySelector(".e-custom-description");
element.addEventListener("keypress", function (e) {
document.getElementById("DescriptionValue").innerHTML = e.target.value;
});
}
}
else if (args.target.classList.contains("e-appointment")) {
var eventData = args.data;
var row = ej.base.createElement('div', { className: 'e-event-description' });
row.textContent = eventData.Description;
var element = args.element.querySelector('.e-subject-wrap');
element.parentNode.insertBefore(row, element.nextSibling);
}
}
}
</script>
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public IActionResult custom-quick-popup()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
};
ViewBag.view = viewOption;
return View();
}
}
}