1
ブートストラップに関連する問題があります。私は2つのグリッド、col-lg6でページを分割しようとしています。 divにクラスを追加した後、空白のページが表示されます。DHTMLXスケジューラがブートストラップと競合しています
は、それは私のhtml
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; 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_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>
<style type="text/css" media="screen">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
だとここで私は、私は例
<div class='col-lg-6'>---HERE IS CALENDAR---</div>
<div class='col-lg-6'>---WHATEVER</div>
のための2つのdivを作成した場合、スクリプトが
<script type="text/javascript">
scheduler.init('scheduler_here', new Date(), "week");
scheduler.form_blocks["my_editor"] = {
render: function (sns) {
return "<div class='dhx_cal_ltext' style='height:380px;'>" +
"<div class='col-lg-6'>" +
"<p>Nazwa posiłku </p><input type='text' class='form-control'></input>" +
"<p>Przygotowanie posiłku:</p> <textarea type='text' class='form-control' style='width: 100%;height: 50px; font-size: smaller; line-height: normal'></textarea>" +
"<br/>" +
"</div>" +
"<div class='col-lg-6'>" +
"<p>Składniki</p>" +
"<textarea type='text' class='form-control' style='width: 100%;height: 150px; font-size: smaller; line-height: normal;'></textarea>" +
"</div>" +
"<p style='margin-left:15px;'>Lista produktów: </p><select class='js-example-basic-single' multiple='multiple' style='width: 98%; margin-left:15px;' id='lightboxCalendar'></select>" +
"</div><br>";
},
set_value: function (node, value, ev) {
$.ajax({
url: "/Calendar/GetDataForInvoiceNumber",
data: { 'key': '2112sd' },
type: "post",
dataType: "json",
success: function (data) {
var inner = "";
for (var i = 0; i < data.length; i++) {
inner += "<option value='" + data[i].id + "'>" + data[i].Nazwa_Produktu + "</option>";
}
document.getElementById("lightboxCalendar").innerHTML = inner;
},
error: function (xhr, ajaxOptions, thrownError) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
$(".js-example-basic-single").select2();
},
get_value: function (node, ev) {
ev.location = node.childNodes[4].value;
return node.childNodes[1].value;
},
focus: function (node) {
//var a = node.childNodes[1]; s
}
}
scheduler.config.lightbox.sections = [
{ name: "description", height: 500, map_to: "text", type: "my_editor", focus: true }
]
var events = [
{ id: 1, text: "Meeting", start_date: "04/11/2013 14:00", end_date: "04/11/2013 17:00" },
{ id: 2, text: "Conference", start_date: "04/15/2013 12:00", end_date: "04/18/2013 19:00" },
{ id: 3, text: "Interview", start_date: "04/24/2013 09:00", end_date: "04/24/2013 10:00" }
];
scheduler.parse(events, "json");//takes the name and format of the data source
</script>
私のウェブは空白になっています。 dhtmlxのようなブートストラップといくつかの競合を持っているように見えます。何が間違っているかも考えていますか?
ありがとうございました!
この問題は解決しましたか?あなたは共有できますか? –
@GregoireMulliez私はそれを修正することができませんでしたので、ほとんど同じ機能を持つ完全なカレンダーに切り替えました – Icet