How to select days with multiple colors in JQuery Datepick

问题

I use jQuery plugin (Datepick - version 5.0.0) that formed the basis for the jQuery UI Datepicker. It is made available as a separate plugin because the jQuery UI version desired simplified functionality (http://keith-wood.name/datepick.html). I use this plugin for multiple date selection feature that jquery datepicker does not have.

The page I am designing has an inline datepick (div). This datepick shows 12 months on the same div. For ex; if "blue" item is selected from a combobox, when I select days from the datepick, "blue" print is appeared on these days. Then, if I unselect these days, their colors will be returned into the color that unselected days have.

I have the question and the solution on the link - How to highlight some specific days with multiple colors in JQuery Datepick . However, I try to reach the solution of dynamically selecting days with multiple colors, instead of rendering days that are already known.

All feedbacks appreciated!

EDIT:

-> array1, array2 and array3 are used to prepare the datepick for selected days that are already taken from an user. The datepick is rendered based on these arrays and colors (each color is assigned to the related array). This part is made via onDate feature of datepick.

-> I am interested in dynamically selecting and unselecting days and changing their color on the datepick. I think this part may be made via onSelect feature of datepick, but how?

js;

var array1 = new Array();
array1.push("2014-06-24");
array1.push("2014-07-26");
array1.push("2014-07-24");

var array2 = new Array();
array2.push("2014-08-15");
array2.push("2014-08-22");

var array3 = new Array();
array3.push("2014-08-09");
array3.push("2014-08-13");

$.datepick.setDefaults({
        dateFormat: 'yyyy-mm-dd'
    });
    $('.clndr').datepick({
        multiSelect: 999, 
        monthsToShow: [4,3],
        onDate: prepareCalendar,
        onSelect: selectDate});

function prepareCalendar(date){

    if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array1) > -1)
    {
        return {dateClass: 'blue-highlight'};
    }
    else if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array2) > -1)
    {
        return {dateClass: 'red-highlight'};
    }
    else if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array3) > -1)
    {
        return {selectable: false};
    }
   else{
        return {};
    }
}

function selectDate(date) {

    //alert('The date chosen is ' + date);  
}

css;

.blue-highlight {
    background-color: blue !important;
    color: white !important;
}

.blue-highlight:hover {
    background-color: #0A70FF !important;
}

.red-highlight {
    background-color: red !important;
    color: white !important;    
}

.red-highlight:hover {
    background-color: #FF0800 !important;  
}

html;

<div class="clndr"></div> -> my datepick
<select id="colors" jsfc="h:selectOneMenu" class="colors">
    <f:selectItems value="#{facadeBean.colors}" var="clr" itemLabel="#{clr.NAME}" itemValue="#{clr.ID}"/>
</select> -> such a color combobox

来源：https://stackoverflow.com/questions/24178707/how-to-select-days-with-multiple-colors-in-jquery-datepick

标签

javascript

jquery

jquery-ui

datepicker