dhtmlxScheduler inside dhtmlxTabbar

Scheduler Javascript
#1

Hi,
I am trying to place scheduler inside a tabbar tab as shown below. If I browse directly scheduler.html page, the scheduler loads perfect. But when I click on the tab “Calendar”, the call goes to scheduler.html but the scheduler is not loading. Any ideas how to implement scheduler inside a tabbar? Thanks.

tabbar=new dhtmlXTabBar(“a_tabbar”,“top”);
tabbar.setImagePath(“codebase/imgs/tabbar/”);
tabbar.setSkin(‘modern’);
tabbar.addTab(“rep_hp”,“Reporting”,“135px”);
tabbar.addTab(“sch_hp”,“Calendar”,“135px”);
tabbar.setHrefMode(“ajax-html”);
tabbar.setContentHref(“rep_hp”, “reportmain.html”);
tabbar.setContentHref(“sch_hp”, “scheduler.html”);
tabbar.setTabActive(“rep_hp”);

#2

Fastest solution will be in switching

tabbar.setHrefMode(“ajax-html”);

to

tabbar.setHrefMode(“iframes”);

#3

Stanislav, thanks for the quick reply. Your solution is short and sweet. Meanwhile, I got it to work without iframe. I added all the Scheduler js, css file references and Divs to the Tabbar page and wrote some JavaScript as shown below. It seems to work fine. Thanks again.

Here is the longest solution:

var tabbar;
function initTabbar()
{
tabbar=new dhtmlXTabBar(“a_tabbar”,“top”);
tabbar.setImagePath(“codebase/imgs/tabbar/”);
tabbar.setSkin(‘modern’);
tabbar.addTab(“rep_hp”,“Reporting”,“135px”);
tabbar.addTab(“sch_hp”,“Calendar”,“135px”);
tabbar.setHrefMode(“ajax-html”);
tabbar.setContentHref(“rep_hp”, “ajax_reportmain.html”);
tabbar.setTabActive(“rep_hp”);
tabbar.attachEvent(“onSelect”, function(id) { SelectTabView(id); return true; });
}

function SelectTabView(tabID)
{
if (tabID == “sch_hp”)
{
initScheduler();
}
}

function initScheduler()
{
scheduler.config.multi_day = true;
scheduler.config.default_date = “%d %F %Y”;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init(‘ncms_scheduler’,null,“month”);
scheduler.load(“data/events.xml”, SchedulerAfterLoad(scheduler));
}

function SchedulerAfterLoad(scheduler)
{
tabbar.setContent(“sch_hp”, “ncms_scheduler”);
scheduler.setCurrentView(new Date());
}

#4

After strugling some days with te same problem, I think I found the actual cause of the problem.
The problem is that the tabbar loads by html-ajax. Somehow the div structure is not added to the DOM structure if you want to use it from the inline scripts. (loaded in the same call from the tabbar)

The following sample does NOT work

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

-------------

    var s= dhxUsersScheduler= scheduler;
    s.config.multi_day = true;
    s.config.default_date = "%d %F %Y";
    s.config.xml_date="%Y-%m-%d %H:%i";
    s.init('usersScheduler',null,"month");
    s.load('data/schedules.json','json');
    dhxUsersTabbar.setContent('tab_UsersSchedules','usersScheduler');
    scheduler.setCurrentView(new Date());

but by using JQuery it works.

[code] $(“body”).append("

 
 
"); 
var s= dhxUsersScheduler= scheduler;
s.config.multi_day = true;
s.config.default_date = "%d %F %Y";
s.config.xml_date="%Y-%m-%d %H:%i";
s.init('usersScheduler',null,"month");

// s.load(‘data/schedules.json’,‘json’,‘modUsers_attachScheduler(s)’);
s.load(‘data/schedules.json’,‘json’);
dhxUsersTabbar.setContent(‘tab_UsersSchedules’,‘usersScheduler’);
scheduler.setCurrentView(new Date());

[/code]

My has the id=‘body’

The problem seems to be timing. Using jquery forces the DOM to be appended with the

framework.
#5

In first case you are using

s.init(‘usersScheduler’,null,“month”);

Which attempts to init the scheduler in the DIV with ID = usersScheduler, but html code doesn’t contain such element, it contains DIV with ID = scheduler_here

You need to change id in html snippet or in init command ( id must be the same in both cases )