Mini calendar multiplying

Scheduler Javascript
#1

I’m trying to modify the 04_layout.html script, to have only 1 mini-calendar with navigation. All I’m achieving is, when I change the month in mini-calendar, the destroyCalendar object no longer points to the mini-calendar, and so the mini-calendar fails to be destroyed and is instead duplicated.
Is there any way to counter it? Without “navigation:true” it works, but is kind of useless :slight_smile:

Thanks.

<!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">
</head>
	<script src='../../codebase/dhtmlxscheduler.js' type="text/javascript" charset="utf-8"></script>
	<link rel='STYLESHEET' type='text/css' href='../../codebase/dhtmlxscheduler.css'>
	
	<script src="../../codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
	<script src='extra/dhtmlxlayout.js' type="text/javascript" charset="utf-8"></script>
	<script src='extra/dhtmlxcontainer.js' type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="extra/dhtmlxlayout.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="extra/skins/dhtmlxlayout_dhx_skyblue.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_calendar_click {
		background-color: #C2D5FC !important;
	}
</style>

<script type="text/javascript" charset="utf-8">

    var c = null;

	function doOnLoad() {
		var layout = new dhtmlXLayoutObject(document.body, "2U");
		layout.cells("a").setWidth(200);
		layout.cells("a").attachObject("cal_here");
		
		scheduler.config.multi_day = true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		
		layout.cells("b").attachScheduler();
		layout.cells("a").hideHeader();
                layout.cells("b").hideHeader();

                scheduler.attachEvent("onViewChange", 'setCalDate');

                render_calendar(new Date());

        }

        function setCalDate(mode, date) {
            scheduler.destroyCalendar(c);
            render_calendar(date);

            return true;
        }

        function render_calendar(date){
            c = scheduler.renderCalendar({
                    container:"cal_here", 
                    date:date,
                    navigation:true,
                    handler:function(date){
		        scheduler.setCurrentView(date, scheduler._mode);
                    }
            });

            return true;

        }

</script>
<body onload="doOnLoad();">
	<div id="cal_here" style='width:100%; height:100%'></div>
</body>
#2

When navigation using - calendar repaints itself on each arrow-click, so the reference to the calendar object, will be lost. But you can restore it through parent html element.

	scheduler.attachEvent("onViewChange",function(){
		scheduler.destroyCalendar(document.getElementById("for_cal").firstChild);
		scheduler.renderCalendar({
				container:"for_cal",

Check the attached sample.
1274198739.zip (44 KB)

#3

I’d like to suggest, that the current way of doing things and the minicalendars interface abstraction is at the same time difficult to use right (i.e. as intended), difficult to understand, very difficult to debug and not very flexible.

See my fight with the minicalendar interface/abstraction here:

docs.dhtmlx.com/doku.php?id=dhtm … nicalendar

Thanks,
*t

#4

The mini-calendar was created not as dynamic component but as a method which produces static, small, month view. And this part works fine.

When navigation was added, things became a bit more ugly, because calendar repaints and drops all customization, also the initial reference to calendar became invalid.
We know about this problem and planing to provide some kind of constant mini-calendar object, which will preserver initial settings