When using the custom light box from samples samples/02_customization/16_custom_form.html along with samples/02_customization/09_timestep.html causes a Microsoft JScript runtime error: Function expected
error on the line scheduler.startLightbox(id, html(“my_form”) );
So as a test, I used the MyCalendarMVC3.zip sample application.
Below is the updated index.cshtml source with both customizations applied:
<html>
<head id="Head1" >
<title>Index</title>
<script src="/Scripts/dhtmlxscheduler.js" type="text/javascript"></script>
<link href="/Scripts/dhtmlxscheduler.css" rel="stylesheet" type="text/css" />
</head>
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
#my_form{
position:absolute;
top:100px;
left:200px;
z-index:10001;
display:none;
background-color:white;
border:2px outset gray;
padding:20px;
font-family:Tahoma;
font-size:10pt;
}
#my_form label {
width:200px;
}
<script type="text/javascript">
function init() {
var step = 15;
var format = scheduler.date.date_to_str("%h:%i %A");
scheduler.config.hour_size_px = (60 / step) * 21;
scheduler.templates.hour_scale = function (date) {
html = "";
for (var i = 0; i < 60 / step; i++) {
html += "<div style='height:21px;line-height:21px;'>" + format(date) + "</div>";
date = scheduler.date.add(date, step, "minute");
}
return html;
}
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.details_on_dblclick=true;
scheduler.config.details_on_create = true;
scheduler.config.xml_date = "%m/%d/%Y %H:%i";
scheduler.init("scheduler_here", new Date(2010, 6, 1), "month");
scheduler.load("/Calendar/Data");
var dp = new dataProcessor("/Calendar/Save");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
var html=function(id){ return document.getElementById(id); }; //just a helper
scheduler.showLightbox = function(id){
var ev = scheduler.getEvent(id);
scheduler.startLightbox(id, html("my_form") );
html("description").focus();
html("description").value = ev.text;
html("custom1").value = ev.custom1||"";
html("custom2").value = ev.custom2||"";
}
function save_form() {
var ev = scheduler.getEvent(scheduler.getState().lightbox_id);
ev.text = html("description").value;
ev.custom1 = html("custom1").value;
ev.custom2 = html("custom2").value;
scheduler.endLightbox(true, html("my_form"));
}
function close_form(argument) {
scheduler.endLightbox(false, html("my_form"));
}
Custom 1
Custom 2
<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>
</body>
</html>