Rendering data from hidden scheduler then show it.


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">&nbsp;</div>
	   		<div class="dhx_cal_next_button">&nbsp;</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 class="dhx_cal_header"></div>
	  <div class="dhx_cal_data"></div>    

<!-- table of persons will set this as a units --->
			<input type="checkbox" name="techid[]" id="tech_1" value="1~John Doe" class="checkboxes"/>
		<td>John Doe</td>
			<input type="checkbox" name="techid[]" id="tech_2" value="2~Juan Doe" class="checkboxes"/>
		<td>Juan Doe</td>
			<input type="checkbox" name="techid[]" id="tech_3" value="3~Alex Gibs" class="checkboxes"/>
		<td>Alex Gibs</td>
<button href="" class="btn btn-primary" onclick="submitToCalendar()"><i class="icon-check" ></i> Done with the selection</button>

And the 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];

		//put all selected in an array then set it as a unit in calendar

	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+'; }');
      return true;
  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]; 
               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

Basically I want to reload the hidden calendar, show it and render those datas.
Thanks for you help.

in general it looks OK. You need to init the scheduler before you can add events:

  1. Show DIV container for scheduler (be sure its height and width are defined);
  2. Set up scheduler configuration, templates, attach events;
  3. Init the scheduler by “scheduler.init()”;
  4. Add event by “scheduler.addEvent()” method.