Mini calendar generating wrong date


I am using the mini calendar along with the scheduler. Once my page loads, if I switch around with the week, day, month views, things are fine. But when I try to click on a date on the mini cal, it generates wrong dates.

For eg: I am looking at the month view for this month i.e. Oct 2012

Then, I click on 18th Oct in the mini calendar. This is when I can see that the date in “onviewchange” is

So now when the calendar is rendered, it now obviously goes to Jan 2013.

Forgot to mention, I have upgraded to ver 3.5 recently. This used to work before.

Looks like it is adding 3 months to the actual date. For example, if I click on a date in Oct, it picks up the date in Jan 2012.


Please provide your code related to minicalendar.
Does our sample works correctly for you?

Kind regards,

Yes, the sample works correctly. So I realize something’s messing it up but cannot figure out why. I even put an alert in the handler function within the renderCalendar function and the date’s messed up at that point itself.

I am including my whole code below.

<%@ taglib uri="" prefix="c" %>
<%@ taglib uri="" prefix="fmt" %>
<%@ taglib prefix="form" uri="" %>


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<script src="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>
<script src='${pageContext.request.contextPath}/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_serialize.js'></script>
<script src='${pageContext.request.contextPath}/javascript/json2.js'></script>
<script src='${pageContext.request.contextPath}/javascript/jquery-1.8.0.min.js'></script>

<script src="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/dhtmlxScheduler/codebase/dhtmlxscheduler_glossy.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/dhtmlxScheduler/extra/skins/dhtmlxlayout_dhx_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">


<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<META http-equiv="pragma" content="no-cache">
<META name="GENERATOR" content="IBM WebSphere Studio">

<style type="text/css" media="screen">
	html, body{
		overflow: auto;
	.dhx_calendar_click {
		background-color: #C2D5FC !important;


	$(document).ready(function() {
		//var pth = "${pageContext.request.contextPath}";
		//pth = pth+"/pages/events2010.xml";
		scheduler.config.multi_day = true;
		scheduler.init('scheduler_here',new Date(),"month");
		var calendar = scheduler.renderCalendar({
			date: scheduler._date,
				scheduler.setCurrentView(scheduler._date, scheduler._mode);
		scheduler.setCurrentView(scheduler._date, scheduler._mode);
  		scheduler.attachEvent("onEventAdded", function(event_id,event_object){
     scheduler.attachEvent("onEventChanged", function(event_id,event_object){
                 var str = JSON.stringify(scheduler.getEvent(event_id));
	scheduler.attachEvent("onViewChange", function (mode, date) {
	alert("inside view change");
   $.getJSON(url, function(data) {


		var categories = [
				{ key: 1, label: 'A' },
				{ key: 2, label: 'B' },
				{ key: 3, label: 'Migration' }
			var priority = [
				{ key: 1, label: 'Critical' },
				{ key: 2, label: 'Minor' }

		scheduler.locale.labels.section_title = "Title";
		scheduler.locale.labels.section_category = "Event Category";
		scheduler.locale.labels.section_sub = "Sub Category";
		scheduler.config.lightbox.sections =[
			{ name:"title", height:50, map_to:"text", type:"textarea", focus:true },
			{ name:"description", height:50, map_to:"text", type:"textarea" },
			{ name:"category", height:21, map_to:"type", type:"select",  options:categories },
			{ name:"sub", height:21, map_to:"type", type:"select",  options:priority },
            { name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring"},
			{ name:"time", height:72, type:"calendar_time", map_to:"auto" },
			{ name:"time", height:72, type:"time", map_to:"auto"}

		$.getJSON(url, function(data) {

function save(){
    alert("Inside save function");


	<div style="width: 100%;" class="dhx_cal_container">
		<h1 align="center" style="background-color: olive">Calendar</h1>
	<div id="cal_here" style='width:250px; height:200px; float: left; background-color: olive; border-color: teal;' ></div>
	<div id="scheduler_here" class="dhx_cal_container" style='width:auto; height:100%; border-left: medium; border-left-color: teal;'>
		<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" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="year_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		<div class="dhx_cal_header">
		<div class="dhx_cal_data">


FYI, the code I attached shows the mini cal being rendered with the scheduler._date but that is just what I put there while trying out stuff. I have tried it with a new date as well.