jq.schedule.jsプラグインを使用してタイムテーブルを作成したい。

前提・実現したいこと

現在、jq.schedule.jsを使用して、タイムテーブルを作成しています。
デモサイトと同じようにコーディングを行いましたが、下記画像のようにレイアウトが崩れてしまいます。
どなたかご教授頂けますと幸いです。

発生している問題

デベロッパーツールで各セルの横幅と時間表示部分の横幅を確認したところ、
時間表示部分が150px、各セルの横幅が25px（6分割表示）と、問題なく設定されているようなのですが、、、


### 該当のソースコード
jqueryのソースコードは以下になります。

var $sc = jQuery("#schedule").timeSchedule({
        startTime: "07:00", // schedule start time(HH:ii)
        endTime: "21:00",   // schedule end time(HH:ii)
        widthTime:60 * 10,  // cell timestamp example 10 minutes
        timeLineY:60,       // height(px)
        verticalScrollbar:20,   // scrollbar (px)
        timeLineBorder:2,   // border(top and bottom)
        debug:"#debug",     // debug string output elements
        rows : {
            '1' : {
                title : 'Title Area',
                schedule:[
                    {
                        start:'09:00',
                        end:'12:00',
                        text:'Text Area',
                        data:{
                        }
                    },
                    {
                        start:'11:00',
                        end:'14:00',
                        text:'Text Area',
                        data:{
                        }
                    }
                ]
            },
            '2' : {
                title : 'Title Area',
                schedule:[
                    {
                        start:'16:00',
                        end:'17:00',
                        text:'Text Area',
                        data:{
                        }
                    }
                ]
            }
        },
        change: function(node,data){
            alert("change event");
        },
        init_data: function(node,data){
        },
        click: function(node,data){
            alert("click event");
        },
        append: function(node,data){
        },
        time_click: function(time,data){
            alert("time click event");
        },
    });