Quick Info Template in JavaScript Scheduler

The Scheduler displays a Quick Info popup when users click cells or appointments. By default it shows standard details; you can customize its appearance and content using templates.
This guide shows how to create custom Quick Info templates for empty time cells and for appointments.
index.js
index.html
es5-datasource.js
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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/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>
</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"
     }
];
Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Quick Info Template in JavaScript Scheduler
