Here’s the code I use, including an ability to store the preference in a cookie. Hope this helps those who are starting out like I am.
<!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="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="./codebase/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
/*event in day or week view*/
.dhx_cal_event.general div
{
background-color: #996600 !important;
color: #ffffff !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.general{
background-color: #996600 !important;
color: #ffffff !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.general{
background-color: #996600 !important;
color: #ffffff !important;
}
/*event in day or week view*/
.dhx_cal_event_line.team1 div
{
background-color: #ff6600 !important;
color: #ffffff !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.team1{
background-color: #ff6600 !important;
color: #ffffff !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.team1{
background-color: #ff6600 !important;
color: #ffffff !important;
}
/*event in day or week view*/
.dhx_cal_event_line.team2 div
{
background-color:purple !important;
color:white !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.team2{
background-color:purple !important;
color:white !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.team2{
background-color:purple !important;
color:white !important;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.locale.labels.section_custom="Team";
var teamType=[
{key:0, label:"General Notes"},
{key:1, label:"team 1"},
{key:2, label:"team 2"},
];
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
{name:"custom", height:23, type:"select", options:teamType, map_to:"team_id"},
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.templates.event_class=function(start,end,event)
{
switch ( event.team_id )
{
case "0" : return "general";
case "1" : return "team1";
case "2" : return "team2";
}
}
scheduler.config.first_hour=4;
var startMondayVariable = getCookie("startMondayVariable");
if (startMondayVariable != null && startMondayVariable != "")
{
if (startMondayVariable == "true")
{
scheduler.config.start_on_monday=true;
document.getElementById("startMonday").checked=true;
}
else
{
scheduler.config.start_on_monday=false;
document.getElementById("startMonday").checked=false;
}
}
else
{
scheduler.config.start_on_monday=false;
document.getElementById("startMonday").checked=false;
}
scheduler.config.multi_day = true;
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.locale.labels.section_location="Location";
scheduler.init('scheduler_here',null,"month");
scheduler.setLoadMode("month")
scheduler.load("php/events_rec.php");
var dp = new dataProcessor("php/events_rec.php");
dp.init(scheduler);
}
function toggleMonday()
{
scheduler.config.start_on_monday=document.getElementById("startMonday").checked;
setCookie("startMondayVariable",document.getElementById("startMonday").checked,365);
scheduler.setCurrentView(scheduler.getState().date, scheduler.getState().mode);
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
</script>
<body>
<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="test" name="startMonday_tab" style="left:500px;">
<form><input type="checkbox" id="startMonday" onClick="toggleMonday()"/>Start week on Monday
</form>
</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>
<script type="text/javascript">
init();
</script>
</body>
