I have a Scheduler set up with unit view tab. My Scheduler has 4 units: Global, Course, Group and User. I also have a linked select menu which returns group names when you create an event in the Group unit. For the other units it just returns a hyphen (-).
The problem is if I create an event in e.g. the Global, Course or User units and then drag the event into the Group unit column the Group id is not saved in the database.
How can I use the onbeforeeventchanged event handler to add the first group menu item as the default? E.g. on the group unit if I how two select options as follows:
group: [
{ key: "4", label: "Group 1" },{ key: "5", label: "Group 2" }]How do I make Group 1 the default on drag in the code snippet below?
// Handle drag of non Group event type (e.g. Global, Course or User event) into Group unit
scheduler.attachEvent("onBeforeEventChanged", function(event_object, native_event, is_new, unmodified_event){
var ev = event_object;
console.log(ev.eventtype);
if (ev.eventtype == 'group') {
if(ev.groupid > '0') {
console.log('Event already has a groupid and/or has been dragged within the group unit');
console.log('GROUP ID: ' + ev.groupid);
} else {
console.log('Event does not have a groupid and/or has been dragged into group unit');
console.log('GROUP ID: ' + ev.groupid);
// How to add the default groupid here
}
}
return true;
});Here is is my client side code:
<!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="dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_active_links.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_url.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_week_agenda.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_key_nav.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="dhtmlxScheduler/codebase/dhtmlxscheduler_glossy.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
.dhx_cal_event.user_site div, .dhx_cal_event_line.user_site{
background-color:#D6F8CD !important;
color:#000 !important;
}
.dhx_cal_event.user_course div , .dhx_cal_event_line.user_course{
background-color:#FFD3BD !important;
color:#000 !important;
}
.dhx_cal_event.user_group div , .dhx_cal_event_line.user_group{
background-color:#FEE7AE !important;
color:#000 !important;
}
.dhx_cal_event.user_user div , .dhx_cal_event_line.user_user{
background-color:#DCE7EC !important;
color:#000 !important;
}
.dhx_cal_light {
top:80px !important;
left:80px !important;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.mark_now = true;
var eventtypes=[
{key:"site", label:"Global"},
{key:"course", label:"Course"},
{key:"group", label:"Group"},
{key:"user", label:"Admin User"}
];
var group_select_options = {
site: [
{ key: "0", label: "-" }
],
course: [
{ key: "0", label: "-" }
],
group: [
{ key: "4", label: "Group 1" },{ key: "5", label: "Group 2" }],
user: [
{ key: "0", label: "-" }
]
};
var update_select_options = function(select, options) { // helper function
select.options.length = 0;
for (var i=0; i<options.length; i++) {
var option = options[i];
select[i] = new Option(option.label, option.key);
}
};
var eventtype_onchange = function(event) {
var new_group_options = group_select_options[this.value];
update_select_options(scheduler.formSection('group').control, new_group_options);
};
scheduler.locale.labels.unit_tab = "Unit"
scheduler.locale.labels.section_eventtype="Type of event";
scheduler.locale.labels.section_group = "Group";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.time_step = 15;
scheduler.config.multi_day = true;
scheduler.templates.week_agenda_event_text = function(start_date, end_date, event, date, position) {
switch(position){
case "middle":
return "-- " + event.text;
case "end":
return "End: "+scheduler.templates.event_date(start_date) + " " + event.text;
case "start":
return "Start: "+scheduler.templates.event_date(start_date) + " " + event.text;
default:
return scheduler.templates.event_date(start_date) + " " + event.text;
}
};
scheduler.attachEvent("onBeforeLightbox", function(id){
var ev = scheduler.getEvent(id);
if (!ev.groupid) {
var eventtype = ev.eventtype||eventtypes[0].key;
var new_group_options = group_select_options[eventtype];
update_select_options(scheduler.formSection('group').control, new_group_options);
}
return true;
});
scheduler.config.lightbox.sections=[
{name:"name", height:30, type:"textarea", map_to:"text", focus:true },
{name:"description", height:30, map_to:"description", type:"textarea"},
{name:"eventtype", height:23, type:"select", options:eventtypes, map_to:"eventtype", onchange:eventtype_onchange },
{name:"group", height:23, type:"select", options: group_select_options, map_to:"groupid" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.templates.event_class=function(start,end,event){
return "user_"+event.eventtype;
}
scheduler.createUnitsView({
name:"unit",
property:"eventtype",
list:eventtypes
});
scheduler.config.first_hour=8;
scheduler.config.last_hour=18;
scheduler.locale.labels.section_name="Name";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.init('scheduler_here',new Date(2012,11,1),"month");
scheduler.setLoadMode("month")
scheduler.load("dhtmlxScheduler/samples/01_initialization_loading/data/moodle_events.php?att_id=100&userid=2&courseid=2");
var dp = new dataProcessor("dhtmlxScheduler/samples/01_initialization_loading/data/moodle_events.php?att_id=100&userid=2&courseid=2");
dp.init(scheduler);
}
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 id="scheduler_here" class="dhx_cal_container" style='width:735px; height:100%;'>
<div class="dhx_cal_navline">
<input type="button" name="print" value="PDF" onclick="scheduler.toPDF('scheduler-pdf-php/generate.php')">
<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="unit_tab" style="right:250px;"></div>
<div class="dhx_cal_tab" name="week_agenda_tab" style="right:200px;"></div>
<div class="dhx_cal_tab" name="year_tab" style="right:150px;"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:100px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:50px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:0px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
Much appreciated.
Barry