Hello,
Please help me on this. I have a calendar that hidden on the first load of the page, then will show it and render all data adter clicking a button. Kindly check my code.
Here’s my html
<!--- html hide it first -->
<div id="calHandler" style="display:none;">
<div class="dhx_cal_container widget-content" dhtmlx-scheduler id="calendar" style="height:500px;" >
<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" id="day_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" id="week_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" id="unit_tab" name="unit_tab" style="right:280px;width:150px;" ng-show="showUnitTab"></div>
<div class="dhx_cal_tab" id="month_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
</div>
<!-- table of persons will set this as a units --->
<tbody>
<tr>
<td>
<input type="checkbox" name="techid[]" id="tech_1" value="1~John Doe" class="checkboxes"/>
</td>
<td>1</td>
<td>John Doe</td>
</tr>
<tr>
<td>
<input type="checkbox" name="techid[]" id="tech_2" value="2~Juan Doe" class="checkboxes"/>
</td>
<td>2</td>
<td>Juan Doe</td>
</tr>
<tr>
<td>
<input type="checkbox" name="techid[]" id="tech_3" value="3~Alex Gibs" class="checkboxes"/>
</td>
<td>3</td>
<td>Alex Gibs</td>
</tr>
</tbody>
<button href="" class="btn btn-primary" onclick="submitToCalendar()"><i class="icon-check" ></i> Done with the selection</button>
And the js
//js
function submitToCalendar(){
$('.checkboxes:checked').each(function() {
//format of value is id~name, eg: 1~John Doe
//split each value of checkboxes
var s = $(this).val().split("~");
selected["key"]= s[0];
selected["label"]=s[1];
//put all selected in an array then set it as a unit in calendar
techs.push(selected);
});
scheduler.config.multi_day = true;
scheduler.locale.labels.unit_tab = "Technicians";
//rendering color on each unit
scheduler.attachEvent("onTemplatesReady", function(){
var html = [];
for(var i = 0; i < techs.length; i++) {
var color = getRandomColor();
html.push('.dhx_cal_event.section_'+techs[i].key+' div{background-color:#'+color+'; }');
html.push('.dhx_cal_event_line.section_'+techs[i].key+'{background-color:#'+color+'; }');
html.push('span.section_'+techs[i].key+' {color:#'+color+'; }');
}
updateStyleNode(html.join("\n"));
return true;
});
scheduler.createUnitsView({
name:"unit",
property:"section_id",
list:techs
});
scheduler.templates.unit_scale_text=function(key, label, option){
var temp = "<span class='section_" + key + "'>" + label + "</span>";
return temp;
};
scheduler.templates.event_class = function(start,end,ev){
return 'section_' + ev.section_id;
};
//add sample event in calendar
for (var key in sample_data_json) {
if (recur_data.hasOwnProperty(key)) {
var val = sample_data_json[key];
scheduler.addEvent({
event_id:val.event_id,
start_date: val.start_date,
end_date: val.end_date,
text: val.text,
rec_type: val.rec_type,
event_length: val.event_length,
event_pid: val.event_pid
});
}
}
//show the calendar
$('#calHandler').show();
}
Basically I want to reload the hidden calendar, show it and render those datas.
Thanks for you help.