Hi,
Please let me know, how can we set height/width of lightbox?
Height of lightbox is defined by heights of its sections, which can be changed in lightbox configuration.
Width of lightbox is hardcoded in the css file, and can be changed there if necessary ( but I’m not sure that all elements will look good with new width )
Hi,
Thanks for reply. But my implementation is bit different. I am having many extra custom fields on the lightbox. Please below code.
[code]scheduler.form_blocks[“appointmentdetails_editor”] = {
render: function(sns) {
var customfields = “”;
customfields += “
| Contact Name | ”; customfields += “ |
| Appointment Location | ”; customfields += “ |
| Contact Details | ”; customfields += “ |
| Appointment Type | ”; customfields += “ |
| Appointment Details | ”; customfields += “ |
| Allocated To | ”; customfields += “ |
| Incident Details | |
| Incident Id | ”; customfields += “ |
| Brief Incident Details | ”; customfields += “ |
| Incident Location | ”; customfields += “ |
| Class/SubClass | ”; customfields += “ |
| Status | ”; customfields += “ |
| Free Text Notes | ”; customfields += “ |
return customfields;
},
set_value: function(node, value, ev) {
//node.childNodes[1].value = value || “”;
if (value != “New event”) {
var myarray = value.split("|");
document.getElementById(“txtContactName”).value = myarray[0] || “”;
document.getElementById(“txtAppointmentLocation”).value = myarray[1] || “”;
document.getElementById(“txtContactDetails”).value = myarray[2] || “”;
document.getElementById(“txtAppointmentType”).value = myarray[3] || “”;
document.getElementById(“txtAllocatedTo”).value = myarray[4] || “”;
document.getElementById(“txtIncidentId”).value = myarray[5] || “”;
document.getElementById(“txtBriefIncDetails”).value = myarray[6] || “”;
document.getElementById(“txtIncLocation”).value = myarray[7] || “”;
document.getElementById(“txtClassSubClass”).value = myarray[8] || “”;
document.getElementById(“txtStatus”).value = myarray[9] || “”;
document.getElementById(“txtFreeText”).value = myarray[10] || “”;
}
else {
document.getElementById("txtContactName").value = document.getElementById("txtMainCallerName").value;
document.getElementById("txtAppointmentLocation").value = document.getElementById("txtMainCallerLocation").value;
document.getElementById("txtContactDetails").value = document.getElementById("txtCallerTelephoneNumber").value;
document.getElementById("txtAppointmentType").value = document.getElementById("cmbMainAppointmentType").value;
document.getElementById("txtAppointmentDetails").value = document.getElementById("txtMainAppointmentDetails").value;
document.getElementById("txtAllocatedTo").value = "";
if (document.getElementById("txtIncidentId").value = "") {
}
else {
document.getElementById("txtIncidentId").value = document.getElementById("txtMainIncidentId").value;
document.getElementById("txtIncLocation").value = ""; //inci location
document.getElementById("txtClassSubClass").value = ""; //class/subclass
document.getElementById("txtStatus").value = ""; //Status
document.getElementById("txtFreeText").value = "";
}
document.getElementById("txtBriefIncDetails").value = document.getElementById("txtMainBriefIncidentDetails").value;
}
//node.childNodes[4].value = ev.details || "";
},
get_value: function(node, ev) {
//ev.location = node.childNodes[4].value;
document.getElementById("txtContactName").value;
document.getElementById("txtAppointmentLocation").value;
document.getElementById("txtContactDetails").value;
document.getElementById("txtAppointmentType").value;
document.getElementById("txtAllocatedTo").value;
document.getElementById("txtIncidentId").value;
document.getElementById("txtBriefIncDetails").value;
document.getElementById("txtIncLocation").value;
document.getElementById("txtClassSubClass").value;
document.getElementById("txtStatus").value;
document.getElementById("txtFreeText").value;
//return node.childNodes[1].value;
return document.getElementById("txtContactName").value;
},
focus: function(node) {
//var a = node.childNodes[1]; a.select(); a.focus();
}
}
scheduler.config.lightbox.sections = [
{ name: "time", height: 72, type: "calendar_time", map_to: "auto" },
{ name: "description", height: 0, map_to: "text", type: "appointmentdetails_editor", focus: true }
][/code]
I am using only 1 section for new extra fields, when i increase height of div in appointmentdetails_editor, lightbox is not fully visible. And i want to show atleast many fields.
The same code works correctly locally. At least height value of
<div class='dhx_cal_ltext' style='height:265pxIs correctly applied and that height is reserved in lightbox for the custom form section.
If you change height of section by some other code, be sure to call
scheduler.setLightboxSize()
It will update height of lightbox
Hi,
I am not setting height from anywhere. But then also Lightbox is not appearing complete if i extend div height more to see more extra fields. Please see for attached screenshot of the same. Also i have attached code file.
and here is complete code to render this lightbox.
<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“DiaryManagementSystem.aspx.cs”
Inherits=“com.northgate_is.iim.webeims.ui.DiaryManagementSystem” %>
<!-- end DHTMLX control Stylesheets & skins-->
<!--start WebEIMS custom stylesheets-->
<link rel="STYLESHEET" type="text/css" href="App_Themes/Standard/Layout.css" />
<link rel='STYLESHEET' type='text/css' href='../common/style.css' />
<!--end WebEIMS custom stylesheets-->
<!-- start DHTMLX control js libraries-->
<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/ext/dhtmlxscheduler_minical.js"type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="./codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/dhtmlxlayout.js" type="text/javascript"></script>
<script src="codebase/dhtmlxwindows.js" type="text/javascript"></script>
<script type="text/javascript"> window.fe = "codebase/imgs/";</script>
<script type="text/javascript" src="codebase/HandleException.js"></script>
<!-- end DHTMLX control libraries-->
<!-- start third party control js libraries-->
<!-- end third party control js libraries-->
<script type="text/javascript" charset="utf-8">
var sectionstring = "";
var WebEIMSMinwindowWidth = 0, WebEIMSMinwindowHeight = 0;
function CalculatePageSize() {
if (typeof (window.innerWidth) == 'number') {
//Non-IE
WebEIMSMinwindowWidth = window.innerWidth;
WebEIMSMinwindowHeight = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
WebEIMSMinwindowWidth = document.documentElement.clientWidth;
WebEIMSMinwindowHeight = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
WebEIMSMinwindowWidth = document.body.clientWidth;
WebEIMSMinwindowHeight = document.body.clientHeight;
}
}
function mainpageload() {
// calculating the page size
CalculatePageSize();
document.getElementById("parentId").style.height = WebEIMSMinwindowHeight - 30;
// initializing the layout of the page body
var dhxLayout = new dhtmlXLayoutObject("parentId", "1C");
// initilizing the body layout cell containing the main div
dhxLayout.cells("a").attachObject("divMain");
//dhxLayout.cells("a").fixSize(false, true);
dhxLayout.cells("a").hideHeader();
}
function initcalendarcontrol() {
var sections = [
{ key: 1, label: "James Smith" },
{ key: 2, label: "John Williams" },
{ key: 3, label: "David Miller" },
{ key: 4, label: "Linda Brown" }
];
//alert(sectionstring);
//var sections = scheduler.serverList("");
//var sections = sectionstring;
//alert(sections);
scheduler.locale.labels.unit_tab = "Persons"
scheduler.locale.labels.section_custom = "Incident Details";
scheduler.locale.labels.section_description = "Appointment Details";
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
//Add new fields to details page
scheduler.form_blocks["appointmentdetails_editor"] = {
render: function(sns) {
var customfields = "";
customfields += "<div class='dhx_cal_ltext' style='height:550px;overflow:scroll;' ><table border='0' align='left' cellspacing='0' cellpadding='1'>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Contact Name</label></td><td align='left'>";
customfields += "<input type='text' id='txtContactName' style='width:300px'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Appointment Location</label></td><td align='left'>";
customfields += "<textarea cols='1' id='txtAppointmentLocation' rows='2' name='S1' style='width:300px;background-color: #FFFFFF'></textarea></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Contact Details</label></td><td align='left'>";
customfields += "<input type='text' id='txtContactDetails' style='width:300px'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Appointment Type</label></td><td align='left'>";
customfields += "<input type='text' id='txtAppointmentType' style='width:300px'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Appointment Details</label></td><td align='left'>";
customfields += "<textarea cols='1' id='txtAppointmentDetails' rows='4' name='S1' style='width:300px;background-color: #FFFFFF;border:1'></textarea></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Allocated To</label></td><td align='left'>";
customfields += "<input type='text' id='txtAllocatedTo' style='width:300px'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:large; font-weight:bold'>Incident Details</label></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Incident Id</label></td><td align='left'>";
customfields += "<input type='text' id='txtIncidentId' style='width:300px' readonly='readonly'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Brief Incident Details</label></td><td align='left'>";
customfields += "<textarea cols='1' id='txtBriefIncDetails' rows='4' name='S1' style='width:300px;background-color: #FFFFFF'readonly='readonly'></textarea></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Incident Location</label></td><td align='left'>";
customfields += "<textarea cols='1' id='txtIncLocation' rows='2' name='S2' style='width:300px;background-color: #FFFFFF' readonly='readonly'></textarea></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Class/SubClass</label></td><td align='left'>";
customfields += "<input type='text' id='txtClassSubClass' style='width:300px' readonly='readonly'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Status</label></td><td align='left'>";
customfields += "<input type='text' id='txtStatus' style='width:300px' readonly='readonly'></td></tr>";
customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Free Text Notes</label></td><td align='left'>";
customfields += "<textarea cols='1' id='txtFreeText' rows='10' name='S3' style='width:300px;background-color: #FFFFFF'></textarea></td></tr>";
customfields += "</table></div>";
return customfields;
},
set_value: function(node, value, ev) {
//node.childNodes[1].value = value || "";
if (value != "New event") {
var myarray = value.split("|");
document.getElementById("txtContactName").value = myarray[0] || "";
document.getElementById("txtAppointmentLocation").value = myarray[1] || "";
document.getElementById("txtContactDetails").value = myarray[2] || "";
document.getElementById("txtAppointmentType").value = myarray[3] || "";
document.getElementById("txtAllocatedTo").value = myarray[4] || "";
document.getElementById("txtIncidentId").value = myarray[5] || "";
document.getElementById("txtBriefIncDetails").value = myarray[6] || "";
document.getElementById("txtIncLocation").value = myarray[7] || "";
document.getElementById("txtClassSubClass").value = myarray[8] || "";
document.getElementById("txtStatus").value = myarray[9] || "";
document.getElementById("txtFreeText").value = myarray[10] || "";
}
else {
document.getElementById("txtContactName").value = document.getElementById("txtMainCallerName").value;
document.getElementById("txtAppointmentLocation").value = document.getElementById("txtMainCallerLocation").value;
document.getElementById("txtContactDetails").value = document.getElementById("txtCallerTelephoneNumber").value;
document.getElementById("txtAppointmentType").value = document.getElementById("cmbMainAppointmentType").value;
document.getElementById("txtAppointmentDetails").value = document.getElementById("txtMainAppointmentDetails").value;
document.getElementById("txtAllocatedTo").value = "";
if (document.getElementById("txtIncidentId").value = "") {
}
else {
document.getElementById("txtIncidentId").value = document.getElementById("txtMainIncidentId").value;
document.getElementById("txtIncLocation").value = ""; //inci location
document.getElementById("txtClassSubClass").value = ""; //class/subclass
document.getElementById("txtStatus").value = ""; //Status
document.getElementById("txtFreeText").value = "";
}
document.getElementById("txtBriefIncDetails").value = document.getElementById("txtMainBriefIncidentDetails").value;
}
//node.childNodes[4].value = ev.details || "";
},
get_value: function(node, ev) {
//ev.location = node.childNodes[4].value;
document.getElementById("txtContactName").value;
document.getElementById("txtAppointmentLocation").value;
document.getElementById("txtContactDetails").value;
document.getElementById("txtAppointmentType").value;
document.getElementById("txtAllocatedTo").value;
document.getElementById("txtIncidentId").value;
document.getElementById("txtBriefIncDetails").value;
document.getElementById("txtIncLocation").value;
document.getElementById("txtClassSubClass").value;
document.getElementById("txtStatus").value;
document.getElementById("txtFreeText").value;
//return node.childNodes[1].value;
return document.getElementById("txtContactName").value;
},
focus: function(node) {
//var a = node.childNodes[1]; a.select(); a.focus();
}
}
scheduler.config.lightbox.sections = [
{ name: "time", height: 0, type: "calendar_time", map_to: "auto" },
{ name: "description", height: 0, map_to: "text", type: "appointmentdetails_editor", focus: true }
//{ name: "custom", height: 130, map_to: "text", type: "incicdentdetails_editor" }
]
scheduler.setLightboxSize();
scheduler.createUnitsView("unit", "section_id", sections);
// get tomorrow's Date
var today = new Date();
var d = today.getDate();
var m = today.getMonth();
var y = today.getYear();
var NextDate = new Date(y, m, d + 1);
var Ndate = NextDate.getMonth() + 1 + "/" + NextDate.getDate() + "/" + NextDate.getYear();
dateArray = Ndate.split("/");
scheduler.init('scheduler_here', new Date(dateArray[2], dateArray[0] - 1, dateArray[1]), "unit"); //TODO:Date will be tomorrow's date
//scheduler.init('scheduler_here', new Date(2009, 5, 30), "unit"); //TODO:Date will be tomorrow's date
// defines end time for new event i.e. time step
//it should be defaulted to appointmenttype time TODO:
scheduler.config.time_step = 45;
//scheduler.config.show_loading = true;
//custom logic when new event is saved/created.
scheduler.attachEvent("onEventSave", function(id, data) {
if (!data.text) {
alert("Text must not be empty");
return false;
}
if (!data.text.length < 20) {
alert("Text too small");
return false;
}
return true;
})
//show details on view/new appointment click
scheduler.templates.event_text = function(start, end, event) {
return "Text:<b> " + event.text + "</b><br>" + "Descr." + event.details;
}
//TODO: need to write xml for no events
scheduler.load("codebase/xml/units.xml?uid=" + scheduler.uid());
}
function show_minical() {
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position: "dhx_minical_icon",
date: scheduler._date,
navigation: true,
handler: function(date, calendar) {
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
//Load Diaries for selected named area.
function LoadDiaries() {
GetAvailableDiaries();
document.getElementById("scheduler_here").style.visibility = "visible";
}
//get appointmenttypedesc
function GetAppointmentTypeDesc() {
document.getElementById("lblAppointmentTypeDesc").style.visibility = "visible";
}
function GetAvailableDiaries() {
BOService.GetAvailableDivisons(cbGetAvailableDiaries);
}
function cbGetAvailableDiaries(result) {
//sectionstring = result;
initcalendarcontrol();
}
</script>
<style type="text/css" media="screen">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
| Incident Id | Area | Select Area Central Division North Division South Divison | |
| Appointment Type | Select Appointment Type Take Statement Investigate things This Appointment requires appointment time of 45 mins. | ||
| Brief Incident Details | Appointment Details | ||
| Name | Caller Telephone Number | ||
| Appointment Location |
As far as I can see lightbox - just goes beyond the visible window borders. ( which is valid because of defined height:550px; )
Which result you need to achieve, autosize lightbox to show max info and still be in window borders, or something else ?
Yes, i want to autosize lightbox to show max info and still be in window borders. Because then only we can see Save, Delete and Cancel Button which are required.Please help
Hi Stanislav, Please can you help me for previous query.
There is no direct API which will do the necessary action. Lightbox depends on height settings of form blocks and can’t auto-size itself.
You can have some kind of custom code in render method, which will have height of window, and assign the necessary height to the form block, based on it.
Hi Stanislav,
Please can you give me more details as how i can have custom code in render method? How can i set window height. Thanks in advance…
Can I know if you found a solution?
Hello Faten,
You can modify the HTML elements of the lightbox in the onLightbox event handler:
https://docs.dhtmlx.com/scheduler/api__scheduler_onlightbox_event.html
If you want to increase the lightbox height, you can change the height property.
Here is an example of how it might work:
http://snippet.dhtmlx.com/afe8fb74e
If you want to decrease the lightbox height and scroll the lightbox, you can also add the overflow: scroll property. Here is the snippet:
http://snippet.dhtmlx.com/ef436561f