Mini calendar

Basics

Mini calendar provides ability to render a small month view in any html container on a page. It has an optional “on-date-selected” handler and can be used to simplify date selection or for some other tasks.

For all next use-cases you need to include on the page the following files:

   <script src='./codebase/ext/dhtmlxscheduler_minical.js' type="text/javascript" charset="utf-8"></script>

The scheduler will provide two basic methods

//show mini calendar
var calendar = scheduler.renderCalendar({
	container:"some_id",
	date:new Date(),
	handler:function(date,calenda){
		do_something();
	}
});
...
//remove mini calendar
scheduler.destroyCalendar(calendar);

Starting from version 2.3, minicalendar provides two more useful methods

//after next command, mini calendar will always show and mark currently visible date range in scheduler
scheduler.linkCalendar(calendar); 
 
//next command will change date of mini-calendar without destroying existing html objects 
//so it will preserve all handlers and styles
scheduler.updateCalendar(calendar, new Date(2010,5,1));

Navigation line

To show the mini calendar in the scheduler header you can add the following lines in the HTML template

<div class="dhx_cal_navline">
	...
	<div class="dhx_cal_date"></div>
	<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>

and in JS code

   function show_minical(){
      if (scheduler.isCalendarVisible())
         scheduler.destroyCalendar();
      else
         scheduler.renderCalendar({
            position:"dhx_minical_icon",
            date:scheduler._date,
            navigation:true,
            handler:function(date,calendar){
               scheduler.setCurrentView(date);
               scheduler.destroyCalendar()
            }
         });
   }

Alternative time section

It possible use mini calendar in the details form for date_start and date_end selection. To achieve such an effect you can apply “calendar_time” section type:

      scheduler.config.lightbox.sections = [   
         { name:"description", height:200, map_to:"text", type:"textarea" , focus:true },
         { name:"time", height:72, type:"calendar_time", map_to:"auto" }   
      ];

Templating

//top label of calendar
scheduler.templates.calendar_month =  scheduler.date.date_to_str("%F %Y");
//week label of calendar
scheduler.templates.calendar_scale_date =  scheduler.date.date_to_str("%D");
//date value on the event's details form
scheduler.templates.calendar_time = scheduler.date.date_to_str("%d-%m-%Y");