Show quick info Template
17 Feb 202224 minutes to read
This demo showcases the quick popups for cells and appointments with the customized templates.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("650px").QuickInfoTemplates(new ScheduleQuickInfoTemplates { Header = "#header-template", Content = "#content-template", Footer = "#footer-template" }).PopupOpen("OnPopupOpen").EventRendered("onEventRendered").EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2020, 1, 09)).Resources(res =>
{
res.DataSource(ViewBag.Categories).Field("RoomId").Title("Room Type").Name("MeetingRoom").TextField("Name").IdField("Id").ColorField("Color").Add();
}).Render()
</div>
</div>
<style>
.quick-info-header {
background-color: white;
padding: 8px 18px;
}
.quick-info-header-content {
justify-content: flex-end;
display: flex;
flex-direction: column;
padding: 5px 10px 5px;
}
.quick-info-title {
font-weight: 500;
font-size: 16px;
letter-spacing: 0.48px;
height: 22px;
}
.duration-text {
font-size: 11px;
letter-spacing: 0.33px;
height: 14px;
}
.content-area {
padding: 10px;
width: auto;
}
.event-content {
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 15px;
}
.meeting-type-wrap,
.meeting-subject-wrap,
.notes-wrap {
font-size: 11px;
color: #666;
letter-spacing: 0.33px;
height: 24px;
padding: 5px;
}
.event-content div label {
display: inline-block;
min-width: 45px;
color: #666;
}
.event-content div span {
font-size: 11px;
color: #151515;
letter-spacing: 0.33px;
line-height: 14px;
padding-left: 8px;
}
.cell-footer .e-btn {
background-color: #ffffff;
border-color: #878787;
color: #878787;
}
.cell-footer {
padding-top: 10px;
}
.e-quick-popup-wrapper .e-cell-popup .e-popup-content {
padding: 0 14px;
}
.e-quick-popup-wrapper .e-event-popup .e-popup-footer {
display: block;
}
.e-quick-popup-wrapper .e-popup-footer button:first-child {
margin-right: 5px;
}
</style>
<script id="header-template" type="text/x-template">
<div class="quick-info-header">
<div class="quick-info-header-content" style='${getHeaderStyles(data)}'>
<div class="quick-info-title">${if (elementType == "cell")}Add Appointment${else}Appointment Details${/if}</div>
<div class="duration-text">${getHeaderDetails(data)}</div>
</div>
</div>
</script>
<script id="content-template" type="text/x-template">
<div class="quick-info-content">
${if (elementType == "cell")}
<div class="e-cell-content">
<div class="content-area">
<input id="title" placeholder="Title" />
</div>
<div class="content-area">
<input id="eventType" placeholder="Choose Type" />
</div>
<div class="content-area">
<input id="notes" placeholder="Notes" />
</div>
</div>
${else}
<div class="event-content">
<div class="meeting-type-wrap">
<label>Subject</label>:
<span>${Subject}</span>
</div>
<div class="meeting-subject-wrap">
<label>Type</label>:
<span>${getEventType(data)}</span>
</div>
<div class="notes-wrap">
<label>Notes</label>:
<span>${Description}</span>
</div>
</div>
${/if}
</div>
</script>
<script id="footer-template" type="text/x-template">
<div class="quick-info-footer">
${if (elementType == "cell")}
<div class="cell-footer">
<button id="more-details">More Details</button>
<button id="add">Add</button>
</div>
${else}
<div class="event-footer">
<button id="delete">Delete</button>
<button id="more-details">More Details</button>
</div>
${/if}
</div>
</script>
<script type="text/javascript">
var intl = new ej.base.Internationalization();
window.getResourceData = function (data) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var resources = scheduleObj.getResourceCollections().slice(-1)[0];
var resourceData = resources.dataSource.filter(function (resource) {
return resource.Id === data.RoomId;
})[0];
return resourceData;
};
window.getHeaderDetails = function (data) {
return intl.formatDate(data.StartTime, { type: 'date', skeleton: 'full' }) + ' (' +
intl.formatDate(data.StartTime, { skeleton: 'hm' }) + ' - ' + intl.formatDate(data.EndTime, { skeleton: 'hm' }) + ')';
};
window.getHeaderStyles = function (data) {
if (data.elementType === 'cell') {
return 'align-items: center; color: #919191;';
}
else {
var resourceData = window.getResourceData(data);
return 'background:' + resourceData.Color + '; color: #FFFFFF;';
}
};
var buttonClickActions = function (e) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var quickPopup = scheduleObj.element.querySelector('.e-quick-popup-wrapper');
var getSlotData = function () {
var cellDetails = scheduleObj.getCellDetails(scheduleObj.getSelectedElements());
var addObj = {};
addObj.Id = scheduleObj.getEventMaxID();
addObj.Subject = quickPopup.querySelector('#title').value;
addObj.StartTime = new Date(+cellDetails.startTime);
addObj.EndTime = new Date(+cellDetails.endTime);
addObj.Description = quickPopup.querySelector('#notes').value;
addObj.RoomId = quickPopup.querySelector('#eventType').ej2_instances[0].value;
return addObj;
};
if (e.target.id === 'add') {
var addObj = getSlotData();
scheduleObj.addEvent(addObj);
}
else if (e.target.id === 'delete') {
var eventDetails = scheduleObj.activeEventData.event;
var currentAction = void 0;
if (eventDetails.RecurrenceRule) {
currentAction = 'DeleteOccurrence';
}
scheduleObj.deleteEvent(eventDetails, currentAction);
}
else {
var isCellPopup = quickPopup.classList.contains('e-cell-popup');
var eventDetail = isCellPopup ? getSlotData() :
scheduleObj.activeEventData.event;
var currentActions = isCellPopup ? 'Add' : 'Save';
if (eventDetail.RecurrenceRule) {
currentActions = 'EditOccurrence';
}
scheduleObj.openEditor(eventDetail, currentActions, true);
}
scheduleObj.closeQuickInfoPopup();
};
window.getEventType = function (data) {
var resourceData = window.getResourceData(data);
return resourceData.Name;
};
function onEventRendered(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var categoryColor = args.data.CategoryColor;
if (!args.element || !categoryColor) {
return;
}
if (scheduleObj.currentView === 'Agenda') {
(args.element.firstChild).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
}
function OnPopupOpen(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
if (args.type === 'QuickInfo') {
var titleObj = new ej.inputs.TextBox({ placeholder: 'Title' });
titleObj.appendTo(args.element.querySelector('#title'));
var typeObj = new ej.dropdowns.DropDownList({
dataSource: scheduleObj.getResourceCollections().slice(-1)[0].dataSource,
placeholder: 'Choose Type',
fields: { text: 'Name', value: 'Id' },
index: 0
});
typeObj.appendTo(args.element.querySelector('#eventType'));
var notesObj = new ej.inputs.TextBox({ placeholder: 'Notes' });
notesObj.appendTo(args.element.querySelector('#notes'));
var moreDetailsBtn = args.element.querySelector('#more-details');
if (moreDetailsBtn) {
var moreObj = new ej.buttons.Button({
content: 'More Details', cssClass: 'e-flat',
isPrimary: args.element.firstElementChild.classList.contains('e-event-popup')
});
moreObj.appendTo(moreDetailsBtn);
moreDetailsBtn.onclick = function (e) { buttonClickActions(e); };
}
var addBtn = args.element.querySelector('#add');
if (addBtn) {
new ej.buttons.Button({ content: 'Add', cssClass: 'e-flat', isPrimary: true }, addBtn);
addBtn.onclick = function (e) { buttonClickActions(e); };
}
var deleteBtn = args.element.querySelector('#delete');
if (deleteBtn) {
new ej.buttons.Button({ content: 'Delete', cssClass: 'e-flat' }, deleteBtn);
deleteBtn.onclick = function (e) { buttonClickActions(e); };
}
}
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<QuickInfoDataSourceModel> categories = new List<QuickInfoDataSourceModel>();
categories.Add(new QuickInfoDataSourceModel { Name = "Jammy", Id = 1, Capacity = 20, Color = "#ea7a57", Type = "Conference" });
categories.Add(new QuickInfoDataSourceModel { Name = "Tweety", Id = 2, Capacity = 7, Color = "#7fa900", Type = "Cabin" });
categories.Add(new QuickInfoDataSourceModel { Name = "Nestle", Id = 3, Capacity = 5, Color = "#5978ee", Type = "Cabin" });
categories.Add(new QuickInfoDataSourceModel { Name = "Phoenix", Id = 4, Capacity = 15, Color = "#fec200", Type = "Conference" });
categories.Add(new QuickInfoDataSourceModel { Name = "Mission", Id = 5, Capacity = 25, Color = "#df5286", Type = "Conference" });
categories.Add(new QuickInfoDataSourceModel { Name = "Hangout", Id = 6, Capacity = 10, Color = "#00bdae", Type = "Cabin" });
categories.Add(new QuickInfoDataSourceModel { Name = "Rick Roll", Id = 7, Capacity = 20, Color = "#865fcf", Type = "Conference" });
categories.Add(new QuickInfoDataSourceModel { Name = "Rainbow", Id = 8, Capacity = 8, Color = "#1aaa55", Type = "Cabin" });
categories.Add(new QuickInfoDataSourceModel { Name = "Swarm", Id = 9, Capacity = 30, Color = "#df5286", Type = "Conference" });
categories.Add(new QuickInfoDataSourceModel { Name = "Photogenic", Id = 10, Capacity = 25, Color = "#710193", Type = "Conference" });
ViewBag.Categories = categories;
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
RoomId= 10,
Id= 1,
Subject= 'Board Meeting',
Description= 'Meeting to discuss business goal of 2020.',
StartTime= '2020-01-05T04:00:00.000Z',
EndTime= '2020-01-05T05:30:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 8,
Id= 2,
Subject= 'Training session on JSP',
Description= 'Knowledge sharing on JSP topics.',
StartTime= '2020-01-07T04:00:00.000Z',
EndTime= '2020-01-07T05:30:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 3,
Id= 3,
Subject= 'Sprint Planning with Team members',
Description= 'Planning tasks for sprint.',
StartTime= '2020-01-09T04:00:00.000Z',
EndTime= '2020-01-09T05:30:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 2,
Id= 4,
Subject= 'Meeting with Client',
Description= 'Customer meeting to discuss features.',
StartTime= '2020-01-11T03:30:00.000Z',
EndTime= '2020-01-11T05:00:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 5,
Id= 5,
Subject= 'Support Meeting with Managers',
Description= 'Meeting to discuss support plan.',
StartTime= '2020-01-06T06:30:00.000Z',
EndTime= '2020-01-06T08:00:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 1,
Id= 6,
Subject= 'Client Meeting',
Description= 'Meeting to discuss client requirements.',
StartTime= '2020-01-08T06:00:00.000Z',
EndTime= '2020-01-08T07:30:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 10,
Id= 1,
Subject= 'Board Meeting',
Description= 'Meeting to discuss business goal of 2020.',
StartTime= '2020-01-05T04:00:00.000Z',
EndTime= '2020-01-05T05:30:00.000Z'
});
appData.Add(new AppointmentData
{
RoomId= 7,
Id= 7,
Subject= 'Appraisal Meeting',
Description= 'Meeting to discuss employee appraisals.',
StartTime= '2020-01-10T05:30:00.000Z',
EndTime= '2020-01-10T07:00:00.000Z'
});
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public int RoomId { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
public string Description { get; set; }
}
public class QuickInfoDataSourceModel
{
public int Id { get; set; }
public string Name { get; set; }
public int Capacity { get; set; }
public string Color { get; set; }
public string Type { get; set; }
}