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));
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()"> </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() } }); }
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" } ];
//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");