DHTMLX Little-Known Features: Tooltips with Popup in dhtmlxCalendar

| Comments (1)

A week has passed since our previous tip and again we’re ready to share a cool and useful feature.

We want to show you how fast and simple you can put tooltips with a popup window into our JavaScript Date Picker, dhtmlxCalendar.

Just two steps!

Step 1.

First of all, we need to initialize dhtmlxCalendar on the page:

var myCalendar = new dhtmlXCalendarObject("objId");
myCalendar.hideTime();
myCalendar.show();

Step 2.

Then we set tooltips on the dates which we’d like to mark, and specify the needed text:

myCalendar.setTooltip("2014-11-11,2014-11-12,2014-11-13,2014-11-14", "Going skiing to Vancouver", true, true);
myCalendar.setTooltip("2014-11-27", "Thanksgiving Day", true, true);
myCalendar.setTooltip("2014-11-30", "The end of Movember :)", true, true);

As a result:

Tooltips-with-popups

That’s all. Just several lines of code and this nice-looking feature is ready.

Comments

  1. Brian December 12, 2014 at 2:46 am

    This is cool. I never knew this is possible. One thing my users ask if if today’s date could be marked in way that they can know what the date is without looking else where.

    If it could be an attribute when defining the form it would be most helpful.

Leave a Reply