Hello, I want to redesign the event box with class dhx_cal_event from what I can see on firebug. The current design is great, but I want to add a few more fields on to it ( the yellow box that shows the details of the event). Does anyone know how to do this? It has been too difficult for me to figure out
Hello,
Sure, what you need to do is to modify scheduler.config.lightbox.sections array, for example:
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
Check additional information on the Details form page in out documentation.
Best regards,
Ilya
Hi, I"m trying the following code, but It’s not showing the extra sections that I added (i only edited this file). What’s wrong with it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="../scripts/dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../scripts/dhtmlxScheduler/codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../scripts/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../scripts/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html
{
margin:0px;
padding:0px;
height:100%;
background-image: url("../images/cp_background.jpg");
background-width:100%;
background-height:1800px;
background-repeat: no-repeat;
}
body
{
margin:0px;
padding:0px;
height:100%;
padding-bottom:30px;overflow-y: scroll;
}
.Header
{
background-repeat:repeat-x;
visibility : visible;
margin-top:-8;margin-left:-8; margin-right:-7;
height:70px;
}
footer
{
height:100px;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.multi_day = true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2010,0,10),"week");
scheduler.load("../scripts/dhtmlxScheduler/common/events.xml");
scheduler.form_blocks["campus_editor"]={
render:function(sns){
return "<div class='dhx_cal_ltext' style='height:60px;'>Text <input type='text'><br/>Details <input type='text'></div>";
},
set_value:function(node,value,ev){
node.childNodes[1].value=value||"";
node.childNodes[4].value=ev.details||"";
},
get_value:function(node,ev){
ev.location = node.childNodes[4].value;
return node.childNodes[1].value;
},
focus:function(node){
var a=node.childNodes[1]; a.select(); a.focus();
}
}
scheduler.form_blocks["event_title"]={
render:function(sns){
return "<div class='campus_event_title' style='height:10px;'><form><label>Title</label></form></div>";
},
set_value:function(node,value,ev){
node.firstChild.value=value||"";
node.firstChild.disabled = ev.disabled;
}
}
scheduler.config.lightbox.sections=[
{ name:"title", height:10, map_to:"auto", type:"event_title"},
{ name:"organizer", height:10, map_to:"auto"},
{ name:"description", height:200, map_to:"description", type:"campus_editor" , focus:true},
{ name:"time", height:72, type:"time", map_to:"auto"}
]
}
function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:"dhx_minical_icon",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
</script>
<body onload="init();">
<div class="Header" >
<div align="right" style="position:absolute;top:130px;left:800px" >
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' style="font-size:12px" >UserName:</label>
<input type='text' name='username' id='username' style="width:100px" maxlength="20" />
<label for='password' style="font-size:12px" >Password:</label>
<input type='password' name='password' id='password' maxlength="20" style="width:100px" />
<input type='submit' name='Submit' value='GO!' style="background-color:#F8D300" />
</div>
</div>
<div id="scheduler_here" class="dhx_cal_container" style='width:900px; height:425px; position:absolute; top:175px; left:50px;padding-bottom:30px;'>
<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="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>
<div id ="footer" class="footer">
</div>
</body>Hello,
Place scheduler.config.lightbox.section definition before scheduler.init call.
Best regards,
Ilya
ok so I got my custom Detailed box to work, and thanks a lot for helping me out.
But I still need to customize the event box on the monthly view (picture here tinyurl.com/66hon7e)
is there a way to customize that?
I couldn’t find it in documentation
Hello,
You want additional information based on event properties displayed in that box? If so be sure to check templates page in our documentation. What you need is event_text template.
Best regards,
Ilya
and one more (hopefully last) question. Thank you very much for helping me out so far. Is there a way to make the boxes (details and event) have round corners? Current design and customization features are great, but it’d be great if we can have round corners to make it look more modern
Hello,
For the lightbox (event details) form:
- Open dhtmlxscheduler.css file
- Locate following line
.dhx_cal_light {- Add border radius styles;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
Best regards,
Ilya
