Search results

Show quick info Template in ASP.NET Core Schedule control

29 Jul 2021 / 1 minute to read

This demo showcases the quick popups for cells and appointments with the customized templates.

tagHelper
data.cs
Copied to clipboard
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2020, 1, 09)" currentView="WorkWeek" popupOpen="OnPopupOpen" eventRendered="onEventRendered">
    <e-schedule-quickinfotemplates header="#header-template" content="#content-template" footer="#footer-template">
    </e-schedule-quickinfotemplates>
    <e-schedule-resources>
        <e-schedule-resource dataSource="@ViewBag.Categories" field="RoomId" title="Room Type" name="MeetingRoom" textField="Name" idField="Id" colorField="Color"></e-schedule-resource>
    </e-schedule-resources>
    <e-schedule-eventsettings dataSource="@ViewBag.appointments">
    </e-schedule-eventsettings>
</ejs-schedule>


<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>
Copied to clipboard
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; }
}