I know this is old stuff, but I need to get tooltips working on schedule cells, have been trying for days. And, I don't think this issue has anything to do with LightSwitch.
I need tooltips that accept variables. I tried the <IF></IF> statements used in your examples, but that doesn't seem to work well. I have things almost completely working using a combination of 'tooltipSettings' and 'appointmentHover'. But if I change update parameter for the query that feeds the Schedule, then the Schedule's oncollectionchange event fires as it should, and causes the tooltips to break. Specifically, the element the tooltip refers to that displays the tooltip ('fooholder') disappears and I get an " JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference" error. Below is my code:
myapp.Home.EventItems_render = function (element, contentItem) {
var deleteCustomizationMessage = {
DeleteConfirmation: "Are you sure you want to delete this Event?",
MouseOverDeleteTitle: "Delete Event",
};
$.extend(ej.Schedule.Locale["en-US"], deleteCustomizationMessage);
var script = document.createElement('script');
script.id = "apptemplate";
script.type = 'text/x-jsrender';
script.innerHTML = "{{if View == 'month'}}<div style='height:35px'><div style='float:left;'>{{:~format(StartTime,'month')}}</div><br><div>{{:Subject}}</div></div>{{else}}<div style='height:100%'><div style='float:left;'>{{:~format(StartTime,'strTime')}}</div><div style='float:left;'>{{:~format(EndTime)}}</div> <br><div>{{:Subject}}</div></div>{{/if}}";
document.head.appendChild(script);
var script1 = document.createElement('script');
script1.id = "tooltipTemplate";
script1.type = 'text/x-jsrender';
script1.innerHTML = "<div style='width:450px'> <div style='padding-top:3px;'> <div style='padding-top:2px; font:13px Segoe UI SemiBold;'>{{:Subject}}</div> </div> <div style='padding-top:3px'> <div id='fooHolder' style='padding-top:2px; font:12px Segoe UI SemiBold;'></div> </div> </div>";
document.head.appendChild(script1);
$.views.helpers({ format: _getTime });
var itemTemplate = $("<div id='schedule1'></div>");
itemTemplate.appendTo($(element));
contentItem.value.oncollectionchange = function () {
var first = contentItem.children[0];
var id = first.children[0].valueModel.name;
var subject = first.children[1].valueModel.name;
var starttime = first.children[2].valueModel.name;
var endtime = first.children[3].valueModel.name;
var categorize = first.children[4].valueModel.name;
var dataManger = ej.DataManager({
json: contentItem.value.data,
});
itemTemplate.ejSchedule({
width: "100%", height: "660px",
contextMenuSettings: {
enable: true,
menuItems: {
appointment: [{ id: "open", text: "Open Event" },
{ id: "delete", text: "Delete Event" }],
cells: [{ id: "new", text: "New Event" },
{ id: "today", text: "Today" },
{ id: "gotodate", text: "Go to date" }]
}
},
//currentView: ej.Schedule.CurrentView.Month,
categorizeSettings: { enable: true },
workHours: { highlight: true, start: 7, end: 18 },
tooltipSettings: {
enable: true,
templateId: "#tooltipTemplate"
},
appointmentHover: "setMouse",
showAppointmentNavigator: true,
showTimeZoneFields: false,
showQuickWindow: false,
enableResize: false,
appointmentWindowOpen: "onAppointmentWindowOpen",
beforeAppointmentRemove: "AppointmentRemove",
//navigation: "setYear",
navigation: "setNewDate",
timeMode: ej.Schedule.TimeMode.Hour12,
timeZone: "UTC -08:00",
enableAppointmentResize: false,
allowDragAndDrop: false,
appointmentTemplateId: "#apptemplate",
appointmentSettings: {
applyTimeOffset: false,
categorize: "categorize",
dataSource: dataManger,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
categorize: "categorize",
allday: false
}
});
}
};
function setMouse(args) {
//var vCat = "";
if (args.appointment.categorize == 3) { vCat = "Orange - Collaborating Agency: Collaborating Agency events are events offered or hosted by a community organization at a PSHH site."; }
else if (args.appointment.categorize == 0) { vCat = "Blue - Complete: The event information has been entered and nothing more is needed."; }
else if (args.appointment.categorize == 1) { vCat = "Green - Resident Only: Resident only events are open to only PSHH residents."; }
else if (args.appointment.categorize == 6) { vCat = "Yellow - Staff Only: Staff only events are open to only PSHH staff."; }
else { vCat = "Red - Incomplete: The event is missing information (# of residents, volunteers present, etc.)"; }
$('#fooHolder')[0].innerHTML = vCat;
//document.getElementById("fooHolder").innerHTML = vCat;
}
