Changing the color of date wheel in Mobiscroll's date & time scroller based on a condition

Question

In my organization, each day has one of four shifts (A - D) working, and shifts are associated with colors (red, blue, green, yellow).

I use jQuery UI's datepicker in the desktop view of my ASP.NET MVC app, and I can use the beforeShowDay option to change the background color of days on the calendar so that users can see at a glance what shift is working each day.

$(".datePicker").datepicker('option', 'beforeShowDay', colorDays);

function colorDays(date) {
    var today = new Date();
    // set object to midnight, for comparing against passed in date
    today.setHours(0,0,0,0);
    var shift = getShift(date);
    var cssClass = "";
    // don't style unpickable dates in the past
    if (date >= today) {
        cssClass = "datepicker-shift-" + shift.toLowerCase();                
    }
    return new Array(true, cssClass, shift + " Shift");
}

Is it possible to do the same with Mobiscroll, such that the Day wheel background would change color based on the shift that was working that day?

Alternatively, if that's not possible, changing the Day Label to include the name of the shift (A - D) would be OK.

I tried adding onChange to my mobiscroll instance:

$(".datePicker").mobiscroll().date({
    theme: 'jqm',
    onChange: function (valueText, inst) {
        var date = new Date(valueText);
        var shift = getShift(date);
        inst.init({ dayText: "Day - " + shift });
    }
});

The onChange event fires, but the mobiscroll widget closes immediately. If you re-open, the dayText label has correctly changed. I can't figure out how to change the label while keeping the widget open.

Answer 1

While I didn't end up changing wheel color, I found a way to change the label some time ago, and wanted to share for anyone that may want to do something similar. When instantiating mobiscroll, I use the following code:

$(".datePicker").mobiscroll().date({
    theme: 'jqm',
    display: 'bottom',
    onChange: function(valueText, inst) {
        var selectedDate = new Date(valueText);
        $('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
    },
    onShow: function (html, valueText, inst) {
        var selectedDate = new Date(valueText);
        $('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
    }
});

That gives me a label for the date/datetime picker that looks like "04/09/2014 - B shift", that updates as the selected date changes.