0

私はJquery datepickerを使用していますが、すべてが正常に機能しており、データベースにあるイベントとは別に、すべてが希望どおりにスタイル設定されています。

イベントがある日はいつでも .my_class を使用してスタイルを設定したいので、デフォルトのスタイリングではなく、別の色を使用します。これを他の月にも当てはめたいので、翌月1日にイベントがあればそのスタイルにします。

これを使用して、他の月の日を希望どおりにスタイル設定しましたが、イベントのある日に同様のものを使用しても機能しません。

これは、他の月の背景色を変更することで機能します

.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
    background: #fff;
    color: #b4b3b3;    
}

これは機能しません

.ui-datepicker-other-month.ui-state-disabled .my_class span {
    background: #f00;
    color: #b4b3b3;    
}

これは、日付ピッカーの jquery であり、.my_class をイベントのあるテーブル セルに追加します。

var selected_dates = new Array();
    // gets all the events from the database using AJAX
    selected_dates = getSelectedDates();

    $('#datepicker').datepicker({
        inline: true,
        dateFormat: 'yy-m-d',
        showOtherMonths: true,
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: function (date)
        {
            // gets the current month, day and year
            // Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
            var mm = date.getMonth() + 1,
                dd = date.getDate(),
                yy = date.getFullYear();
            var dt = yy + "-" + mm + "-" + dd;

            if(typeof selected_dates[dt] != 'undefined')
            {
                // puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
                // the "true" parameter is used to know which are the clickable dates
                return [true, " my_class"];
            }

            return [false, ""];
        },
        onSelect: function(date)
        {
            // puts the event's title in the dialog box
            $("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
            $("#dialog").dialog("option","title",selected_dates[date]['event_title']);
            // puts the event's description text in the dialog box
            $("#dialog").text(selected_dates[date]['event_description']);
            // show the dialog box
            $("#dialog" ).dialog();
        }
    });
4

1 に答える 1

0

たぶん、スペースを削除しましたか？あなたが何を意味するのかわからない..

.ui-datepicker-other-month.ui-state-disabled.my_class span {
    background: #f00;
    color: #b4b3b3;    
}
于 2013-09-10T14:45:15.010 に答える