So I open my calendar page the tabs at the top are viewed “off the right of the screen” initially.
When I click one of the tabs to open that tabbed page, the tabs snap into position on the screen, and they can then all be seen in the browser.
Any ideas what the issue is? See image attached.
<script type="text/javascript" charset="utf-8">
function doOnLoad() {
var prev = null;
var curr = null;
var next = null;
var step = 10;
var format = scheduler.date.date_to_str("%h:%i %A");
scheduler.config.hour_size_px=(60/step)*21;
scheduler.locale.labels.section_reason= "Reason";
scheduler.locale.labels.section_howheard= "How Heard";
scheduler.locale.labels.section_promos= "Promos";
//scheduler.locale.labels.section_patient_ID = "Patient ID";
scheduler.locale.labels.section_name = "Name";
//scheduler.locale.labels.office_tab = "Offices";
//scheduler.locale.labels.pottsville_tab = "Pottsville";
scheduler.locale.labels.section_offices="Office";
scheduler.config.multi_day = true;
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.first_hour=8;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.config.agenda_start = new Date(); //now
scheduler.config.agenda_end = scheduler.date.add(new Date(), 1, "month"); //1 month from a current date
dhtmlXTooltip.config.className = 'dhtmlXTooltip tooltip';
dhtmlXTooltip.config.timeout_to_display = 50;
dhtmlXTooltip.config.delta_x = 10;
dhtmlXTooltip.config.delta_y = 60;
scheduler.templates.tooltip_text = function(start,end,event) {
return "<b>Name:</b> "+event.name+"<br/><b>Comments:</b> "+event.text+"<br/><b>Office:</b> "+scheduler.getLabel("office_ID", event.office_ID) + "<br/><b>Reason:</b> " +scheduler.getLabel("reason", event.reason);
}
scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
scheduler.templates.event_text = function(start, end, event) {
var result = "<b>Name:</b> " + "<a href='link'>"+event.name+"</a>" + "<br/><b>Reason:</b> " +scheduler.getLabel("reason", event.reason);
return result;
/* var users=[];
if (event.user_id){
users = event.user_id.split(",");
for (var i=0; i < users.length; i++)
users[i] = scheduler.getLabel("user_id",users[i])
}
result += users.join(",");
return result; */
}
scheduler.config.hour_date="%h:%i %A";
scheduler.config.full_day = true;
scheduler.init('scheduler_here',null,"week");
scheduler.load("php/events_rec.php?Office_ID=<?php echo $_GET['Office_ID']; ?>");
var dp = new dataProcessor("php/events_rec.php?Office_ID=<?php echo $_GET['Office_ID']; ?>");
dp.init(scheduler);
var calendar = scheduler.renderCalendar({
container:"cal_here",
navigation:true,
handler:function(date){
scheduler.setCurrentView(date, scheduler._mode);
}
});
scheduler.form_blocks.textarea.set_value=function(node,value,ev){
node.firstChild.value=value||"";
var style = ev.company_ID?"1":"none";
node.style.display=style; // editor area
node.previousSibling.style.display=style; //section header
scheduler.setLightboxSize(); //correct size of lightbox
}
scheduler.linkCalendar(calendar);
scheduler.attachEvent("onBeforeLightbox", function (event_id){
var ev = scheduler.getEvent(event_id);
if(scheduler._new_event){
ev.patient_ID= "<?php echo $_GET['Patient_ID']; ?>";
ev.name= "<?php echo $_GET['First']; ?> " + "<?php echo $_GET['Last']; ?>";
ev.office_ID = "<?php echo $_GET['Office_ID']; ?>";
ev.company_ID = "<?php echo $_SESSION['Company_ID']; ?>";
}
return true;
});
scheduler.config.lightbox.sections=[
{name:"name", height:20, map_to:"name", type:"textarea"},
{name:"description", height:50, map_to:"text", type:"textarea", focus:true},
{name:"offices", height:20, type:"select", options:scheduler.serverList("offices"), map_to:"office_ID"},
{name:"reason", height:20, type:"select", map_to:"reason", options:scheduler.serverList("reason")},
{name:"howheard", height:20, type:"select", map_to:"howheard_ID", options:scheduler.serverList("howheard")},
{name:"promos", height:20, type:"select", map_to:"promo_ID", options:scheduler.serverList("promos")},
{name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
{name:"time", height:115, type:"time", map_to:"auto"}
]
}
</script> <div id="scheduler_here" class="dhx_cal_container" style='width:auto; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()"> </div>
<!-- <div class="dhx_cal_tab" name="office_tab" style="right:346px;"></div> -->
<div class="dhx_cal_tab" name="agenda_tab" style="right:302px;"></div>
<div class="dhx_cal_tab" name="year_tab" style="right:238px;"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:174px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:110px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:46px;"></div>
</div>