Unless I’ve missed it, I can’t find anywhere that describes how to set different colours for the background of individual events. I want to to provide a quick visual indentification of the type of event for a club site so that matches are different from socials which are different from committee meetings, etc. Can this be done?
Roger Hampson
Hello,
Check following sample (place it among other samples):
[code]
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
/*event in day or week view*/
.dhx_cal_event.past_event div{
background-color: black !important;
color: white !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.past_event{
background-color: black !important;
color: white !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.past_event{
color: black !important;
}
.dhx_cal_event.event_math div, .dhx_cal_event_line.event_math{
background-color: orange !important;
color: blue !important;
}
.dhx_cal_event_clear.event_math{
color: blue !important;
}
.dhx_cal_event.event_science div, .dhx_cal_event_line.event_science{
background-color: #add8e6 !important;
color: #8b0000 !important;
}
.dhx_cal_event_clear.event_science{
color: #8b0000 !important;
}
.dhx_cal_event.event_english div, .dhx_cal_event_line.event_english{
background-color: #e0ffff !important;
color: #008b8b !important;
}
.dhx_cal_event_clear.event_english{
color: #008b8b !important;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.time_step = 30;
scheduler.config.multi_day = true;
scheduler.locale.labels.section_subject = "Subject";
scheduler.config.first_hour = 6;
var control_date = new Date(2011, 3, 20);
scheduler.templates.event_class=function(start, end, event){
if(start<control_date) // event start before control date
return "past_event";
if(event.subject) // if event has subject property then special class should be assigned
return "event_"+event.subject;
return ""; // default return
/*
Note that it is possible to create more complex checks
events with the same properties could have different CSS classes depending on the current view:
var mode = scheduler.getState().mode;
if(mode == "day"){
// custom logic here
}
else {
// custom logic here
}
*/
};
var subject = [
{ key: '', label: 'Appointment' },
{ key: 'english', label: 'English' },
{ key: 'math', label: 'Math' },
{ key: 'science', label: 'Science' }
];
scheduler.config.lightbox.sections=[
{name:"description", height:43, map_to:"text", type:"textarea" , focus:true},
{name:"subject", height:20, type:"select", options: subject, map_to:"subject" },
{name:"time", height:72, type:"time", map_to:"auto" }
];
scheduler.init('scheduler_here', new Date(2011, 3, 18), "week");
scheduler.parse([
{ start_date: "2011-04-18 09:00", end_date: "2011-04-18 12:00", text:"English lesson", subject: 'english' },
{ start_date: "2011-04-20 10:00", end_date: "2011-04-21 16:00", text:"Math exam", subject: 'math' },
{ start_date: "2011-04-21 10:00", end_date: "2011-04-21 14:00", text:"Science lesson", subject: 'science' },
{ start_date: "2011-04-23 16:00", end_date: "2011-04-23 17:00", text:"English lesson", subject: 'english' },
{ start_date: "2011-04-24 09:00", end_date: "2011-04-24 17:00", text:"Usual event" }
], "json");
}
</script>