Having trouble getting help?
Contact Support
Contact Support
Quick info template in EJ2 JavaScript Scheduler control
18 Mar 202524 minutes to read
The Scheduler control displays a pop-up window (Quick Info) when users click on cells or appointments. By default, this Quick Info displays standard information, but you can customize its appearance and content using templates.
This guide demonstrates how to create custom templates for Quick Info pop-ups that appear when clicking on both empty time cells and appointments in the Scheduler control.
window.getResourceData = function (data) {
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) {
var intl = new ej.base.Internationalization();
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;';
}
};
window.getEventType = function (data) {
var resourceData = window.getResourceData(data);
return resourceData.Name;
};
var buttonClickActions = function (e) {
var quickPopup = scheduleObj.element.querySelector('.e-quick-popup-wrapper');
var getSlotData = function () {
var cellDetails = scheduleObj.getCellDetails(scheduleObj.getSelectedElements());
if (ej.base.isNullOrUndefined(cellDetails)) {
cellDetails = scheduleObj.getCellDetails(scheduleObj.activeCellsData.element);
}
var subject = quickPopup.querySelector('#title').ej2_instances[0].value;
var notes = quickPopup.querySelector('#notes').ej2_instances[0].value;
var addObj = {};
addObj.Id = scheduleObj.getEventMaxID();
addObj.Subject = ej.base.isNullOrUndefined(subject) ? 'Add title' : subject;
addObj.StartTime = new Date(+cellDetails.startTime);
addObj.EndTime = new Date(+cellDetails.endTime);
addObj.IsAllDay = cellDetails.isAllDay;
addObj.Description = ej.base.isNullOrUndefined(notes) ? 'Add notes' : notes;
addObj.RoomId = quickPopup.querySelector('#eventType').ej2_instances[0].value;
return addObj;
};
var eventDetails;
var currentAction;
if (e.target.id === 'add') {
var addObj = getSlotData();
scheduleObj.addEvent(addObj);
} else if (e.target.id === 'delete') {
eventDetails = scheduleObj.activeEventData.event;
if (eventDetails.RecurrenceRule) {
currentAction = 'DeleteOccurrence';
}
scheduleObj.deleteEvent(eventDetails, currentAction);
} else {
var isCellPopup = quickPopup.firstElementChild.classList.contains('e-cell-popup');
eventDetails = isCellPopup ? getSlotData() : scheduleObj.activeEventData.event;
currentAction = isCellPopup ? 'Add' : 'Save';
if (eventDetails.RecurrenceRule) {
currentAction = 'EditOccurrence';
}
scheduleObj.openEditor(eventDetails, currentAction, true);
}
scheduleObj.closeQuickInfoPopup();
};
var roomData = [
{ Name: 'Jammy', Id: 1, Capacity: 20, Color: '#ea7a57', Type: 'Conference' },
{ Name: 'Tweety', Id: 2, Capacity: 7, Color: '#7fa900', Type: 'Cabin' },
{ Name: 'Nestle', Id: 3, Capacity: 5, Color: '#5978ee', Type: 'Cabin' },
{ Name: 'Phoenix', Id: 4, Capacity: 15, Color: '#fec200', Type: 'Conference' },
{ Name: 'Mission', Id: 5, Capacity: 25, Color: '#df5286', Type: 'Conference' },
{ Name: 'Hangout', Id: 6, Capacity: 10, Color: '#00bdae', Type: 'Cabin' },
{ Name: 'Rick Roll', Id: 7, Capacity: 20, Color: '#865fcf', Type: 'Conference' },
{ Name: 'Rainbow', Id: 8, Capacity: 8, Color: '#1aaa55', Type: 'Cabin' },
{ Name: 'Swarm', Id: 9, Capacity: 30, Color: '#df5286', Type: 'Conference' },
{ Name: 'Photogenic', Id: 10, Capacity: 25, Color: '#710193', Type: 'Conference' }
];
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '650px',
selectedDate: new Date(2020, 0, 9),
eventSettings: {
dataSource: scheduleData
},
resources: [{
field: 'RoomId', title: 'Room Type', name: 'MeetingRoom', textField: 'Name', idField: 'Id',
colorField: 'Color', dataSource: ej.base.extend([], roomData, null, true)
}],
quickInfoTemplates: {
header: '#header-template',
content: '#content-template',
footer: '#footer-template'
},
eventRendered: function (args) {
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;
}
},
popupOpen: function (args) {
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: ej.base.extend([], roomData, null, true),
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); };
}
}
}
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<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 {
margin: 0;
padding: 10px;
width: 100%;
}
.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 {
padding-top: 10px;
}
.cell-footer .e-btn {
background-color: #ffffff;
border-color: #878787;
color: #878787;
}
.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 src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<div id="Schedule"></div>
</div>
</div>
<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>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
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"
},
{
RoomId: 6,
Id: 8,
Subject: "HR Meeting",
Description: "Meeting to discuss HR plans.",
StartTime: "2020-01-05T07:30:00.000Z",
EndTime: "2020-01-05T09:00:00.000Z"
},
{
RoomId: 4,
Id: 9,
Subject: "Customer Meeting",
Description: "Meeting to discuss customer reported issues.",
StartTime: "2020-01-09T07:00:00.000Z",
EndTime: "2020-01-09T08:30:00.000Z"
},
{
RoomId: 9,
Id: 10,
Subject: "Board Meeting",
Description: "Meeting to discuss business plans.",
StartTime: "2020-01-11T07:30:00.000Z",
EndTime: "2020-01-11T09:00:00.000Z"
}
];