Month view with

Two questions about a Month view:

  • I need a Month view where the multi-day events are showed not along the day but on a time-equivalent portion. Default: . In the default view the two events seems overlayed, but the first ends at the same our that the second event starts.

  • Is it possible to show single day events like multi-day event? With background color, etc…



  1. Currently this is not supported. You can try to redefine the function that calculates the position of the month event, … r.js#L4496

However, it may take a decent amount of coding in order to make it work correctly in call cases, especially with drag and drop.

  1. Yes, try following css:

.dhx_cal_event_clear{ padding:2px 6px; border-radius:0; border: 1px solid transparent; background-color: #5B9BE0; color:white; }

Thx for the answer!

  1. Thx for the tip! In my case I want it in a readonly calendar, so there isn’t drag and drop. I accomplished that adding this lines of code before the return of scheduler._get_event_bar_pos:

var t2s ="%H"); var t2s2 ="%H:%i"); start_hour = parseInt(t2s(ev.start_date)); end_hour = parseInt(t2s(ev.end_date)); if (end_hour == 0 || t2s2(ev.end_date) == "23:59") end_hour = 24; totalx = x2 - x; x = x + parseInt(totalx * start_hour/24); x2 = x2 - parseInt(totalx * (24-end_hour)/24);

  1. Thx! It worked, but I tunned it a little bit to preserve the same aspect of the multi-day events:

.dhx_cal_event_clear { padding:0px 6px; border-radius:0; border: 1px solid transparent; background-color: #5B9BE0; color:white; font-size: 12px; height: 17px; line-height: 17px; }

I’ve one more related question. Is it possible to hide the start time from the single-day event’s text?


scheduler.attachEvent("onTemplatesReady", function(){ scheduler.templates.event_bar_date = function(start,end,event){ return ""; }; });

Our solution for 1) wasn’t working ok, we’ve modified it:

var t2s2 ="%H:%i"); horaInici = parseInt(t2s(ev.start_date)); if (horaFi == 0 || t2s2(ev.end_date) == "23:59") horaFi = 24; else horaFi = parseInt(t2s(ev.end_date)); diaInici = new Date(ev.start_date.getFullYear(), ev.start_date.getMonth(), ev.start_date.getDate()); diaFi = new Date(ev.end_date.getFullYear(), ev.end_date.getMonth(), ev.end_date.getDate()); dies = 1 + Math.floor(((diaFi).getTime()-(diaInici).getTime())/(1000*60*60*24)); if (ev.start_date.getWeek() != ev.end_date.getWeek()) dies--; hores = dies*24; // Si és d'un dia, 24h. 2 dies, 48h, etc... totalx = x2 - x; if (ev.start_date.getWeek() == ev.end_date.getWeek() || xOriginal != 0) x = x + parseInt(totalx * horaInici/hores); if (ev.start_date.getWeek() == ev.end_date.getWeek() || xOriginal == 0) x2 = x2 - parseInt(totalx * (24-horaFi)/hores); totalx = x2 - x; if (totalx < 15) x2 = x2 + 15 - totalx; // No pot ser més petit de 15

But it is’nt a clean/good solution.

Are there plans to integrate this functionality into the DHTMLX Scheduler?


Unfortunately, we do not have such plans.
Such customization does not seem to be requested often, so currently we do not plan to include it into the package.