How to add additional columns in the Agenda view of ASP.NET Core Scheduler?
This knowledge base article explains the way to add additional columns in Agenda view of ASP.NET Core Scheduler.
Step 1: Create an ASP.NET Core application with default scheduler code example in Agenda view by following the instructions given in the below links.
https://help.syncfusion.com/aspnet-core/schedule/getting-started
https://help.syncfusion.com/aspnet-core/schedule/views#agenda
Step 2: Define the client-side query-cell-info event which will be triggered during the rendering of each rows and columns.
<ej-schedule id="Schedule1" width="100%" height="525px" current-view="Agenda" current-date="new DateTime(2017, 6, 2)" query-cell-info="addColumns"> <e-appointment-settings datasource="@ViewBag.appointments" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"' location='"Location"' description='"Description"'> </e-appointment-settings> </ej-schedule>
Step 3: In query-cell-info event function addColumns, additional column and header elements can be added as mentioned below.
function addColumns(args) {
if (args.model.currentView == "agenda") {
// The following code example is used to add the additional event columns
if (args.requestType == "agendacells" && args.cellType == "agendaeventcell") {
var customDesign = "<td class='e-agendacells location-column'><div class='e-textwrapper'><span>" + args.appointment.Location + "</span></div></td><td class='e-agendacells description-column'><div class='e-textwrapper'><span>" + args.appointment.Description + "</span></div></td>";
$(args.element).after(customDesign);
}
// The following code example is used to add the additional event columns headers
if (args.requestType == "agendacells" && args.cellType == "agendaheadercells" && $(args.element).hasClass("e-eventcolumn") && $(".e-headercells.loccolumn").length == 0) {
var customDesign1 = "<td class='e-headercells location-column'><div class='e-textwrapper'><b>Event Location</b></div></td><td class='e-headercells description-column'><div class='e-textwrapper'><b>Event Description</b></div></td>";
args.element.after(customDesign1);
}
}
}
Step 4: Run the sample and the scheduler control will be displayed as follows with the additional columns in Agenda view.
Figure 1: Scheduler control displayed with additional columns
Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/203127/ze/AgendaAddiotionalFields-1270606945
