Hi,
I am using dhtmlxScheduler 4.0 but my y_unit label is missing when there is only 1 label in my array. The label appears when I create an event. Please see pictures for more detail.
[code]function InitializeBothSchedulers()
{
try
{
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.drag_move = false;
scheduler.config.xml_date = ‘%Y-%m-%d %H:%i’;
scheduler.config.full_day = true;
scheduler.config.drag_resize = false;
scheduler.config.drag_create = false;
scheduler.keys.edit_save = -1;
scheduler.xy.bar_height = 21;
scheduler.createTimelineView({
name: 'AssessorsScheduler',
x_unit: 'day',
x_date: '%d %M',
x_step: 1,
x_size: 14,
y_unit: scheduler.serverList('MyList', AssessorsArray),
y_property: 'UserID',
event_dy: 'full',
render: 'bar'
});
scheduler.locale.labels.section_Assessor = 'Assessors Scheduler'; // This is a section in a lightbox
scheduler.form_blocks["my_editor"]={
render:function(sns){
return "<div id='AssessorLightboxDiv' class='dhx_cal_ltext' style='height:430px;'> <table width='630px' cellspacing='1'> <tbody> <tr> <td class='LightBoxHeadingCell'> Location : </td> <td class='LightBoxNormalCell'> <select name='AssessorsLocationDropDown' id='AssessorsLocationDropDown' onchange='AssessorsLocationDropDownOnChange();'> <option selected = '' value='Evaluators Office'>Evaluators Office</option> <option value='Clinic'>Clinic</option> <option value='N/A'>N/A</option> </select> </td> <td class='LightBoxHeadingCell' style='display:none;'> Event ID : </td> <td class='LightBoxNormalCell'> <input type='text' id='AssessorEventID' disabled style='display:none;width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='ReasonRow' style='display:none;'> <td class='LightBoxHeadingCell'> Reason : </td> <td class='LightBoxNormalCell'> <select name='ReasonDropDown' id='ReasonDropDown'> <option selected = '' value=''></option> <option value='Personal Leave'>Personal Leave</option> <option value='Sick'>Sick</option> <option value='Stat Holiday'>Stat Holiday</option> <option value='Training'>Training</option> <option value='Vacation'>Vacation</option> </select> </td> <td class='LightBoxHeadingCell'> </td> <td class='LightBoxHeadingCell'> </td> </tr> <tr id='ReserveRow'> <td class='LightBoxHeadingCell'> Reserve Type : </td> <td class='LightBoxNormalCell'> <select id='ReserveTypeDropDown' name='ReserveTypeDropDown'> <option value=''></option> <option selected = '' value='Regular'>Regular</option> <option value='All Call'>All Call</option> </select> </td> <td class='LightBoxHeadingCell'> Reserved For : </td> <td class='LightBoxNormalCell'> <select id='ReservedForDropDown' name='ReservedForDropDown'> <option value=''></option> <option selected = '' value='Any'>Any</option> <option value='CAT Only'>CAT Only</option> <option value='In-Person Only'>In-Person Only</option> </select> </td> </tr> <tr id='DatesRow'> <td class='LightBoxHeadingCell' id='StartDateHeadingTD'> Start Date : </td> <td id='AssessorsStartDateCalendarTD'> <input type='text' id='AssessorsStartDateCalendar' disabled style='width:150px; background-color: #E2EFFF;'> </td> <td class='LightBoxHeadingCell' id='EndDateHeadingTD'> End Date : </td> <td class='LightBoxNormalCell' id='AssessorsEndDateCalendarTD'> <input type='text' id='AssessorsEndDateCalendar' style='width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='AvailableTimesRow'> <td colspan='4'> <table width='620px' cellspacing='5' style='height: 150px;margin-top: 1px;border: 1px solid black; background-color: #E2EFFF;' id='AvailableTimesTable'> <tbody> <tr> <td colspan='4' class='LightBoxHeadingCell'> Available Times : </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:00 AM - 09:00 AM;'>08:00 AM - 09:00 AM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:30 AM - 09:30 AM;'>08:30 AM - 09:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:00 AM - 10:00 AM;'>09:00 AM - 10:00 AM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:30 AM - 10:30 AM;'>09:30 AM - 10:30 AM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='10:00 AM - 11:00 AM;'>10:00 AM - 11:00 AM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='10:30 AM - 11:30 AM;'>10:30 AM - 11:30 AM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='11:00 AM - 12:00 PM;'>11:00 AM - 12:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='11:30 AM - 12:30 PM;'>11:30 AM - 12:30 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='12:00 PM - 01:00 PM;'>12:00 PM - 01:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='12:30 PM - 01:30 PM;'>12:30 PM - 01:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='01:00 PM - 02:00 PM;'>01:00 PM - 02:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='01:30 PM - 02:30 PM;'>01:30 PM - 02:30 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='02:00 PM - 03:00 PM;'>02:00 PM - 03:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='02:30 PM - 03:30 PM;'>02:30 PM - 03:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='03:00 PM - 04:00 PM;'>03:00 PM - 04:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='03:30 PM - 04:30 PM;'>03:30 PM - 04:30 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='04:00 PM - 05:00 PM;'>04:00 PM - 05:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='04:30 PM - 05:30 PM;'>04:30 PM - 05:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='05:00 PM - 06:00 PM;'>05:00 PM - 06:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='05:30 PM - 06:30 PM;'>05:30 PM - 06:30 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='06:00 PM - 07:00 PM;'>06:00 PM - 07:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='06:30 PM - 07:30 PM;'>06:30 PM - 07:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='07:00 PM - 08:00 PM;'>07:00 PM - 08:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='07:30 PM - 08:30 PM;'>07:30 PM - 08:30 PM </td> </tr> <tr> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:00 PM - 09:00 PM;'>08:00 PM - 09:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='08:30 PM - 09:30 PM;'>08:30 PM - 09:30 PM </td> <td class='AvailableTimes' style='color:green;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:00 PM - 10:00 PM;'>09:00 PM - 10:00 PM </td> <td class='AvailableTimes' style='color:blue;'> <input type='checkbox' name='AvailableTimesCheckboxes' value='09:30 PM - 10:30 PM;'>09:30 PM - 10:30 PM </td> </tr> </tbody> </table> </td> </tr> <tr id='AssessorNotesRow'> <td valign='top' class='LightBoxHeadingCell'> Assessor Notes : </td> <td colspan='3'> <textarea name='AssessorNotes' style='font-size: 11px;border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='AssessorNotes'> </textarea> </td> </tr> <tr id='BookingNotesRow'> <td valign='top' class='LightBoxHeadingCell'> Booking Notes : </td> <td colspan='3'> <textarea name='BookingNotes' style='font-size: 11px;border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='BookingNotes'> </textarea> </td> </tr> <tr id='AssessmentsImageRow' style='display:none;'> <td valign='top' class='LightBoxHeadingCell'> Assessments : </td> <td colspan='3'> <img id='ToolTipImage' class='tooltip' src='/files/404048/93171/Info-32.png' height='15' width='15' title='' /> <div id='AssessmentsGrid' style='width:10px;display:none;'></div> </td> </tr> </tbody> </table> </div>";
},
set_value:function(node,value,ev){
$('#AssessorEventID').val(ev.EventID || '');
$('#ReasonDropDown').val(ev.Reason || '');
$('#ReserveTypeDropDown').val(ev.ReserveType || 'Regular');
$('#ReservedForDropDown').val(ev.ReservedFor || 'Any');
$('#AssessorsStartDateCalendar').val(ev.StartDate || '');
$('#AssessorsEndDateCalendar').val(ev.EndDate || '');
$('#AssessorNotes').val(ev.AssessorNotes || '');
$('#BookingNotes').val(ev.BookingNotes || '');
$('#AvailableTimesTable input:checkbox').attr('checked','');
if(ev.AvailableTimes)
{
var CurrentCoordinationTimesArray, CurrentAvailableTimesArray;
for(var i = 0; i < gAssessorEventsArray.length; i++)
{
if(gAssessorEventsArray[i].EventID == ev.EventID)
{
CurrentCoordinationTimesArray = gAssessorEventsArray[i].CoordinationTimes.split(';');
for(var j = 0; j < CurrentCoordinationTimesArray.length; j++)
{
$('#AvailableTimesTable input[type=checkbox]').each(function (){
if ($(this).val() == (CurrentCoordinationTimesArray[j] + ';')) {
this.disabled = 'true';
var ParentTD = $(this).parent();
var ParentTR = ParentTD.parent();
ParentTD.css('background-color','#CFCAA8');
if(ParentTD.next().find('input[type="checkbox"]').length)
{
ParentTD.next().find('input[type="checkbox"]').attr("disabled", true);
ParentTD.next().css('text-decoration','line-through');
}
else
{
ParentTR.next().find('input[type="checkbox"]').first().attr("disabled", true);
ParentTR.next().find('td').first().css('text-decoration','line-through');
}
if(ParentTD.prev().find('input[type="checkbox"]').length)
{
ParentTD.prev().find('input[type="checkbox"]').attr("disabled", true);
ParentTD.prev().css('text-decoration','line-through');
}
else
{
ParentTR.prev().find('td>input[type="checkbox"]').last().attr("disabled", true);
if(ParentTR.prev().find('input[type="checkbox"]').length)
ParentTR.prev().find('td').last().css('text-decoration','line-through');
}
}
});
}
break;
}
}
CurrentAvailableTimesArray = ev.AvailableTimes.split(';');
for(var k = 0; k < CurrentAvailableTimesArray.length; k++)
{
$('#AvailableTimesTable input[type=checkbox]').each(function (){
if($(this).val() == (CurrentAvailableTimesArray[k] + ';'))
this.checked = 'true';
});
}
}
},
get_value:function(node,ev){
ev.EventID = $('#AssessorEventID').val();
ev.LocationType = $('#AssessorsLocationDropDown option:selected').text();
if($('#AssessorsLocationDropDown option:selected').text() != 'Clinic' && $('#AssessorsLocationDropDown option:selected').text() != 'N/A')
{
if($('#AvailableTimesTable input[type=checkbox]:checked').length > 0)
{
var GetCurrentAvailableTimes = '';
$('#AvailableTimesTable input[type=checkbox]:checked').each(function (){
GetCurrentAvailableTimes += $(this).val();
});
ev.AvailableTimes = GetCurrentAvailableTimes.substring(0,GetCurrentAvailableTimes.length-1);
}
else
ev.AvailableTimes = '';
if($('#AssessorsLocationDropDown option:selected').text() == 'Evaluators Office')
{
ev.AssociationCompanyID = '';
ev.AssociationCompanyName = '';
}
else
{
ev.AssociationCompanyID = $('#AssessorsLocationDropDown').val();
ev.AssociationCompanyName = $('#AssessorsLocationDropDown option:selected').text();
}
ev.Reason = '';
ev.ReserveType = $('#ReserveTypeDropDown').val();
ev.ReservedFor = $('#ReservedForDropDown').val();
}
else if($('#AssessorsLocationDropDown option:selected').text() == 'Clinic')
{
ev.Reason = '';
ev.ReserveType = '';
ev.ReservedFor = '';
ev.AssociationCompanyID = '';
ev.AssociationCompanyName = '';
ev.AvailableTimes = 'N/A';
}
else
{
ev.Reason = $('#ReasonDropDown').val();
ev.ReserveType = '';
ev.ReservedFor = '';
ev.AssociationCompanyID = '';
ev.AssociationCompanyName = '';
ev.AvailableTimes = 'N/A';
}
ev.StartDate = $('#AssessorsStartDateCalendar').val();
ev.EndDate = $('#AssessorsEndDateCalendar').val();
ev.AssessorNotes = $('#AssessorNotes').val();
ev.BookingNotes = $('#BookingNotes').val();
},
focus:function(node){
node.getElementsByTagName('select')[0].focus();
}
}
//===============
//Data loading
//===============
scheduler.config.lightbox.sections = [{name:'Assessor', height:130, map_to:'text', type:'my_editor'}]
scheduler.attachEvent("onBeforeEventChanged", function(event_object, native_event, is_new, unmodified_event){
});
scheduler.attachEvent("onBeforeLightbox", function(event_id){
});
scheduler.attachEvent("onLightbox", function (event_id){
});
scheduler.attachEvent("onAfterLightbox", function(){ //alert("onAfterLightbox");
scheduler.myCalendar.unload();
});
scheduler.attachEvent("onEventSave",function(id,data,is_new){
})
scheduler.attachEvent("onEventChanged", function(event_id, event_object){
});
scheduler.attachEvent("onEventAdded", function(event_id, event_object){
});
scheduler.attachEvent("onViewChange", function (new_mode , new_date){
GetAssessorData();
return true;
});
scheduler.attachEvent("onBeforeEventDelete", function(event_id, event_object){
});
scheduler.init('Assessors_Scheduler',new Date(Date.parse($('#MainDate').val())),'AssessorsScheduler');
scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.config.details_on_create = true;
scheduler2.config.details_on_dblclick = true;
scheduler2.config.drag_move = false;
scheduler2.config.xml_date = '%Y-%m-%d %H:%i';
scheduler2.config.full_day = true;
scheduler2.config.drag_resize = false;
scheduler2.config.drag_create = false;
scheduler2.keys.edit_save = -1;
scheduler2.xy.bar_height = 21;
scheduler2.createTimelineView({
name: 'EquipmentScheduler',
x_unit: 'day',
x_date: '%d %M',
x_step: 1,
x_size: 14,
y_unit: scheduler2.serverList('MyList', gEquipmentArray),
y_property: 'UserID',
event_dy: 'full',
render: 'bar'
});
scheduler2.locale.labels.section_Equipment = 'Equipment Scheduler'; // This is a section in a lightbox
scheduler2.form_blocks["my_editor"]={
render:function(sns){
return "<div id='EquipementLightboxDiv' class='dhx_cal_ltext' style='height:170px;'> <table width='630px' cellspacing='1'> <tbody> <tr> <td class='LightBoxHeadingCell'> Status : </td> <td class='LightBoxNormalCell'> <select style='width:150px; background-color: #E2EFFF;' name='EquipmentStatusDropDown' id='EquipmentStatusDropDown' onchange='EquipmentStatusDropDownOnChange();'> <option selected='' value='25233'>Available</option> <option value='25234'>Booked</option> <option value='25235'>On Hold</option> </select> </td> <td class='LightBoxHeadingCell' style='display:none;'> Event ID : </td> <td class='LightBoxNormalCell'> <input type='text' id='EquipmentEventID' disabled style='display:none;width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='AssessorNameRow'> <td class='LightBoxHeadingCell'> Name : </td> <td class='LightBoxNormalCell'> <select name='AssessorNameDropDown' id='AssessorNameDropDown' onchange='AssessorNameDropDownOnChange();' style='width:150px; background-color: #E2EFFF;'> </select> </td> <td class='LightBoxHeadingCell'> </td> <td class='LightBoxNormalCell'> </td> </tr> <tr> <td class='LightBoxHeadingCell'> Location : </td> <td class='LightBoxNormalCell'> <select name='EquipementLocationDropDown' id='EquipementLocationDropDown' style='width:150px; background-color: #E2EFFF;'> </select> </td> <td class='LightBoxHeadingCell'> </td> <td class='LightBoxNormalCell'> </td> </tr> <tr id='DatesRow'> <td class='LightBoxHeadingCell' id='StartDateHeadingTD'> Start Date : </td> <td id='EquipementStartDateCalendarTD' class='LightBoxNormalCell'> <input type='text' id='EquipementStartDateCalendar' disabled style='width:150px; background-color: #E2EFFF;'> </td> <td class='LightBoxHeadingCell' id='EndDateHeadingTD'> End Date : </td> <td id='EquipementEndDateCalendarTD' class='LightBoxNormalCell'> <input type='text' id='EquipementEndDateCalendar' style='width:150px; background-color: #E2EFFF;'> </td> </tr> <tr id='AssessorNotesRow'> <td valign='top' class='LightBoxHeadingCell'> Notes : </td> <td colspan='3'> <textarea name='EquipmentNotes' style='border: solid 1px #CCC; width:465px; height:50px; background-color: #E2EFFF;' id='EquipmentNotes'> </textarea> </td> </tr> </tbody> </table> </div>";
},
set_value:function(node,value,ev){
$('#EquipmentEventID').val(ev.EventID || '');
var CurrentStatusValue = '';
if(ev.Status == 'Available')
CurrentStatusValue = 25233;
else if(ev.Status == 'Booked')
CurrentStatusValue = 25234;
else if(ev.Status == 'On Hold')
CurrentStatusValue = 25235;
$('#EquipmentStatusDropDown').val(CurrentStatusValue || '');
$('#EquipementStartDateCalendar').val(ev.StartDate || '');
$('#EquipementEndDateCalendar').val(ev.EndDate || '');
$('#EquipmentNotes').val(ev.AssessorNotes || '');
},
get_value:function(node,ev){
ev.EventID = $('#EquipmentEventID').val();
ev.Status = $('#EquipmentStatusDropDown option:selected').text();
ev.AssessorName = $('#AssessorNameDropDown option:selected').text();
ev.AssessorID = $('#AssessorNameDropDown').val();
ev.AssociationCompanyID = $('#EquipementLocationDropDown').val();
ev.AssociationCompanyName = $('#EquipementLocationDropDown option:selected').text();
ev.StartDate = $('#EquipementStartDateCalendar').val();
ev.EndDate = $('#EquipementEndDateCalendar').val();
ev.AssessorNotes = $('#EquipmentNotes').val();
},
focus:function(node){
node.getElementsByTagName('select')[0].focus();
}
}
//===============
//Data loading
//===============
scheduler2.config.lightbox.sections = [{name:'Equipment', height:130, map_to:'text', type:'my_editor'}]
scheduler2.attachEvent("onBeforeEventChanged", function(event_object, native_event, is_new, unmodified_event){
});
scheduler2.attachEvent("onBeforeLightbox", function(event_id){
});
scheduler2.attachEvent("onLightbox", function (event_id){
});
scheduler2.attachEvent("onAfterLightbox", function(){ //alert("onAfterLightbox");
scheduler2.myCalendar.unload();
});
scheduler2.attachEvent("onEventSave",function(id,data,is_new){
})
scheduler2.attachEvent("onEventChanged", function(event_id, event_object){
});
scheduler2.attachEvent("onEventAdded", function(event_id, event_object){
});
scheduler2.attachEvent("onViewChange", function (new_mode , new_date){
GetEquipmentData();
return true;
});
scheduler2.attachEvent("onBeforeEventDelete", function(event_id, event_object) {
});
scheduler2.init('Equipment_Scheduler',new Date(Date.parse($('#MainDate').val())),'EquipmentScheduler');
dhxLayout = new dhtmlXLayoutObject('InterfaceDiv', '3E');
dhxLayout.progressOn();
dhxLayout.cells('a').setText('Criteria');
dhxLayout.cells('b').setText('Assessors Scheduler');
dhxLayout.cells('c').setText('Equipment Scheduler');
if(gCurrentLoggedInUserInfoArray[0].RoleList.indexOf('9875') > 0 || gCurrentLoggedInUserInfoArray[0].RoleList.indexOf('9970') > 0)
{
$('#Assessors_Scheduler').width(1020).height(265);
$('#Equipment_Scheduler').width(1020).height(275);
dhxLayout.cells('a').setHeight(60);
dhxLayout.cells('c').setHeight(330);
}
else
{
$('#Assessors_Scheduler').width(1020).height(100);
$('#Equipment_Scheduler').width(1020).height(440);
dhxLayout.cells('a').setHeight(60);
dhxLayout.cells('c').setHeight(520);
}
dhxLayout.cells('a').fixSize(true, true);
dhxLayout.cells('b').fixSize(true, true);
dhxLayout.cells('c').fixSize(true, true);
dhxLayout.cells('a').hideArrow();
dhxLayout.cells('b').hideArrow();
dhxLayout.cells('c').hideArrow();
dhxLayout.attachEvent('onCollapse',function(id){
this.cells(id).expand();
dhxLayout.cells('a').hideArrow();
dhxLayout.cells('b').hideArrow();
dhxLayout.cells('c').hideArrow();
})
dhxLayout.cells('a').attachObject('DateDiv');
dhxLayout.cells('b').attachObject('AssessorsSchedulerDiv');
dhxLayout.cells('c').attachObject('EquipmentDiv');
dhxLayout.progressOff();
}
catch (err)
{
alert(err.name + ': ' + err.message); alert('InitializeBothSchedulers()');
}
}[/code]
Thanks