miniCalendar in a custom lightbox

Discontinued products Scheduler for Java (JavaPlanner)
#1

Hi,

I need some help in how to integrate a miniCalendar inside a custom lightbox.

My code for the custom lightbox is as follows:

#form1 { font-family: Tahoma; font-size: 10pt; } #form1 label { width: 100px; display: inline-block; }
Text 
	<label for="event_start_date">From</label><input id="event_start_date" name="start_date"  type="text"/>

	<label for="event_end_date">To</label><input id="event_end_date" name="end_date" type="text"/>

	<label for="notes">Notas</label><input id="notes" name="notes" type="text"/>

	<input id="Hidden1" name="id" type="hidden"/>
</form>
<div>
	<input type="button" value="Save" onclick="lightbox.save()" />
	<input type="button" value="Cancel" onclick="lightbox.close()" />
	<input style="margin-left:86px" type="button" value="Delete" onclick="lightbox.remove()" />
</div>

Thx for your help.

#2

Hi,
you should do the follow:

  1. include scheduler files from codebase directory:
<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">
<script src="./codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>

you relative path to files may be different

  1. add html containers for scheduler and minicalendar. It’s important that scheduler container is on page too, even if it’s not rendered:
<div id="mini_here" style="width:200px"></div>
	<div id="scheduler_here" class="dhx_cal_container" style='width:300px; height:300px; display:none;'>
      <div class="dhx_cal_navline">
         <div class="dhx_cal_date"></div>
         <div class="dhx_cal_tab" name="day_tab" style="right:76px;"></div>
      </div>
      <div class="dhx_cal_header">
      </div>
      <div class="dhx_cal_data">
      </div>
</div>
  1. initialize calendar on page:
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2010,2,1),"day");
scheduler.renderCalendar({
	container:"mini_here",
	date:scheduler._date,
	navigation:true,
	handler:function(date,calendar){
		// date is selected
		alert(date);
	}
});