DHTMLX Little-Known Features: Mini Calendar in dhtmlxScheduler

Mini calendar in our JavaScript Scheduler can’t be named “little-known” feature and it’s some kind of “must have” in each appointment calendar. But in this article we’ll tell you about all the ways how and where you can place this small but very useful thing.

So, let’s start. First of all, we need to add the ext/dhtmlxscheduler_minical.js extension file on the page.

<script src='/ext/dhtmlxscheduler_minical.js' type="text/javascript"></script>

Then we need to decide where we would like to place our mini calendar. Pick up the variant that suits you and let’s add it to the scheduler (you can add the mini calendar at each of them).

1. A mini calendar can be used for a quick navigation between dates of scheduler and be placed in the header

calendar-in-the-header

For this:

  • Include the needed extension file as it was mentioned above;
  • Specify the container for the mini calendar and add it to the scheduler markup:
  • <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>
    </div>
  • Provide the logic that should initialize (the renderCalendar method) and destroy (the destroyCalendar method) the mini calendar:

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

Check what you should achieve in the demo.

2. A mini calendar can be used as a user-friendly date picker for the lightbox

calendar-in-the-lightbox

For this:

  • Include the needed extension file as it was mentioned above;
  • Set the type of the time section to calendar_time (instead of time):

//default lightbox definition
scheduler.config.lightbox.sections=[
  {name:"description", height:200, map_to:"text", type:"textarea", focus:true},
  {name:"time", height:72, type:"time", map_to:"auto"}
];
//change type:"time" -> type:"calendar_time"
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" }
];

Check the demo to see the results.

Generally, the mini calendar can be considered as a separate component and used apart from the scheduler; you may bind a date picker to any input on the page.

This means that you can add the mini calendar to any place outside the scheduler.

calendar-outside-the-scheduler

Get learn how you can customize the mini calendar and also find out all the related methods.

Hope this article was useful for you. Next week we’ll continue to share the most interesting features providing by DHTMLX components.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components