How to show html tag content in appointment edit window ?
This knowledge base article explains the way to show html tag content in appointment edit window.
Step 1: Create a default schedule by referring the instructions given in the below UG link.
https://help.syncfusion.com/js/schedule/getting-started
And define the appointmentWindowOpen event as shown below.
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2017, 4, 5),
appointmentSettings: {
applyTimeOffset: false,
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
},
appointmentWindowOpen: "onOpen"
});
Step 2: By default, edit window will display the corresponding fields string value. Since the appointment’s Description field has html tag content in string format as shown below, we need to ignore the html tag and display only the content in edit window.
var dManager = [{
Id: 1,
Subject: "Meeting Review.",
StartTime: new Date(2017, 4, 3, 09, 30),
EndTime: new Date(2017, 4, 3, 10, 30),
Description: "<div><h1>Meeting Review</h1></div>",
AllDay: false,
Recurrence: false
}, {
Id: 2,
Subject: "Project Review.",
StartTime: new Date(2017, 4, 5, 09, 00),
EndTime: new Date(2017, 4, 5, 10, 30),
Description: "<h2>Project Review</h2>",
AllDay: false,
Recurrence: false
}];
Step 3: Within the appointmentWindowOpen scheduler event, appointments details can be accessed where the string format html tag content is appended to the temporary div element. Then fetching the content from that div element and assigning to appointment’s Description field will display only the content in edit window.
function onOpen(args) {
if (!ej.isNullOrUndefined(args.appointment) && !ej.isNullOrUndefined(args.appointment.Description)) {
var div = document.createElement("div");
div.innerHTML = args.appointment.Description;
var text = div.textContent || div.innerText || "";
args.appointment.Description = text;
}
}
Step 4: Run the sample, double clicking the appointment will display the html tag content in edit window as shown below.
Figure 1: Edit window displaying html tag content.
