Colorizing day squares depending on event

Discontinued products Scheduler for Mobile and Touch devices
#1

Is there a way to define a specific class for a specific type of event, for example in my application I have available which I want to show up green, and unavailable which I want to show up red.

In the normal scheduler, this is possible, but I was analyzing the html generated in the mobile version and it doesn’t seem possible to determine colors.

I noticed each day with events has another

with class=“day_with_events”
Now I could easily do something like .day_with_events{ width: 90%; } to make it look nicer, but depending on the type of event, the color should be different.
How do I do this?

Thanks

#2

From what I’ve gathered through my research, is that different colorized days are not really possible. To me, this is ridiculous since it is supported in the non-mobile version quite well.

Are you really going to charge me to implement different days having different colors?

From what I have heard, A work around would be using setHolidays(), if I go this method, how would I access the inner dhtmlxcalendar so I could use it?

#3

Hello,

the markers in calendar of the Month view highlight days that have at least one event, but there could be 2 or more events on a certain day. These events may have different types, and it is possible to set only one color for a day in calendar. Therefore, I don’t think that the current styling in month view is “ridiculous”. It is possible to set color for the event marker:

dhtmlxScheduler_mobile_v35_120626/samples/01_basic/03_colors.html

Also you can define event_class template:

scheduler.templates.event_class = function(obj){
return obj.type==“a”?“event_a”:“event_b”
}

Here “event_a” and “event_b” are classnames:

docs.dhtmlx.com/doku.php?id=dhtm … vent_class

#4

Alexandra, scheduler.templates.event_class = function(obj){
return obj.type==“a”?“event_a”:“event_b”
}
is what I have, but it does not apply to the color of the calendar squares.

I need to have some red squares, some green squares and some red fading green squares

Green means available, red means unavailable, fading red-green means certain times are available while others unavailable.

How much would it cost to get this behavior/feature?
In other words, add classes for each event.

Jim

#5

Here is the possible workaround:

  1. use _debug version
  2. replace line

return this.$$(“calendar”).config.dayWithEvents(html);

with

return this.$$(“calendar”).config.dayWithEvents(html,date);

  1. redefine the template calendar_event:

[code]scheduler.templates.calendar_event = function(str,date){
var avaible, unavailable, events, i;
events = $$(“scheduler”).getEvents(date,dhx.Date.add(date,1,“day”));

 for(var i = 0;i < events.length; i++){
      if(events[i].disable){
           unavailable= true
      }
      else{
           avaible = true
      }
      return str+"<div class='day_with_events "+(unavailable?(!unavailable?"unavailable":""):"available")+"'></div>";

};[/code]

  1. define css rules:

.dhx_cal_day_num .day_with_events{
border-color: transparent green red transparent;
}
.dhx_cal_day_num .day_with_events.available{
border-color: transparent green green transparent;
}
.dhx_cal_day_num .day_with_events.unavailable{
border-color: transparent red red transparent;
}

This approach is rather slow as each getEvents iterate over all events in scheduler. Check of it match. if it doesn’t you may contact us at sales at dhtmlx.com regarding the cost of the customization.

#6

Where do I get the _debug version?

#7

Ok, I found it ,dhxscheduler_mobile_debug.js

#8

Thank you alexandra for your help, that helps a user know availability without clicking each specific day.

Can this be easily modifiable so that the entire day is made green/red? instead of the square in the corner?

#9

You can use the similar approach, but returned string will be different:

[code] scheduler.templates.calendar_event = function(str,date){
var avaible, unavailable, events, i;
events = $$(“scheduler”).getEvents(date,dhx.Date.add(date,1,“day”));

       for(var i = 0;i < events.length; i++){
                if(events[i].disable){
                    unavailable= true
                }
                else{
                    avaible = true
                }
        }
        if(!unavailable&&!avaible)
             return str;
         return "<div class='my_calendar "+(unavailable?(!unavailable?"unavailable":""):"available")+"'>"+str+"</div>";

}[/code]

The example of the my_calendar:

.my_calendar{
width:100%;
height:100%;
background: green;
}