Mobile Scheduler "All Day" event

Webix JS
1

Hi Technical Support,

Is there any way to change the date to color red if there is all day event in that date?

2

You can configure custom styling through event_marker template

http://docs.webix.com/mobile_calendar__calendar_templates.html#event_marker

3

Sorry for my misleading,

Actually I want to set the number of date to color red(e.g. 7 November 2013 which is a public holiday), I would create “all day event” with some property to define holiday. So can I only change the color of “7” in Month view to red if there is a public holiday event on that day?

4

Check the calendar_event template example on the same page

http://docs.webix.com/mobile_calendar__calendar_templates.html#event_marker

scheduler.templates.calendar_event = function(day){
  var html = "<div class='webix_cal_day_event'>"+day.getDate()+"</div>";
  html += "<div class='webix_cal_event_marker'></div>";
  return html;
};

You can redefine the date formatting in this template but you will not have access to related events. If you need this only for highlighting holidays, you can use separate structure with datest of holidays and just check is day in this list or not.

5

So there is no way to add the holiday event into my current json in order to make the webix_cal_event_marker to red?

6

There is such a way.

For example if you want to mark a day that contains an event with property “holiday”, you can apply the following:

scheduler.templates.calendar_event = function(day){
    var start = day, end = webix.Date.add(day,1,"day",true);
    var events = $$("scheduler").getEvents(start ,end);
    var isHoliday = false;
    for(var i=0;i< events.length && !isHoliday ; i++){
        if(events[i].holiday)
            isHoliday = true;
    }
    var className = "webix_cal_day_event "+(isHoliday?" holiday":"");
    var html = "<div class='"+className +"'>"+day.getDate()+"</div>";
    html += "<div class='webix_cal_event_marker'></div>";
    return html;
};

Where holiday css rule can be as in:

<style>
    .holiday{
        color: red !important;
    }
</style>
7

thanks, it works