Flex DateChooser - разница в цвете шрифта для дней недели и выходных - PullRequest
Новая
       26

Flex DateChooser - разница в цвете шрифта для дней недели и выходных

3 голосов
/ 05 мая 2011

Я хотел бы видеть разные цвета в моем DateChooser / CalendarLayout для рабочих и выходных дней. Я также хотел бы добиться этого с помощью пользовательского стилена (например: "weekColor" и "SundayColor".

Есть идеи, как этого достичь?

Cheer, Rick

Ответы [ 2 ]

3 голосов
/ 09 мая 2011

Это заняло у меня пару дней, но я это выяснил.Так что для дальнейшего использования: вот мое решение:

Я расширил DateChooser и добавил переопределение для функции updateDisplayList (w: Number, h: Number) (В этой функции были установлены имена дней SMTWTFS).

В updateDisplayList вы можете получить mx_internal :: dateGrid.dayBlockArrays [колонка] [строка], содержащая все значения для CalendarLayout.В этом массиве / массиве первая строка в каждом столбце - это одна из дней SMTWTFS.Другие строки - это dayNumbers.Как только я узнал об этом, нужно определить, какой был выходной день, и соответствующим образом настроить цвета.Как показано ниже: 

override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);



        // Now the dayBlocksArray has been filled. The Array looks as follows 
        // dayBlocksArray["rows"]["columns] .... therefor [i][0 (zero)] will always get the dayNames (SMTWTFS)
        // Compare the dayNames with the set this.dayNames (which always start with sunday) and find the weekend days
        var colIndex:uint = 0;
        var rowIndex:uint = 1; // The first row (SMTWTFS) is handled seperately
        var currentColumn:Array;
        var dayName:UITextField;
        var backgroundColor:uint = this.getStyle("dayNamesBackgroundColor");
        var isWeekendCol:Boolean = false;
        var currentTextFormat:TextFormat;

        // When the style is not found the default of white will be used.
        if (!backgroundColor)
        {
            backgroundColor = 0xFFFFFF;
        }

        for (colIndex; colIndex < 7; colIndex++)
        {
            // First determine if the first item in this row (SMTWTFS) is a week/weekend day
            currentColumn = mx_internal::dateGrid.dayBlocksArray[colIndex];
            dayName = currentColumn[0];

            // Determine if this is a weekend row
            // The dayNames array is fixed in the order of index 0 = sunday and index 6 = saturday. 
            // Therefor check of the text value of the current dayName is equal to either of 
            // those two. If it is we are dealing with a weekend column
            isWeekendCol = dayName.text == this.dayNames[0] || dayName.text == this.dayNames[6];

            if (isWeekendCol)
            {
                // Set the color
                currentTextFormat = dayName.getTextFormat();
                currentTextFormat.color = getStyle("weekendHeaderColor");
                dayName.setTextFormat(currentTextFormat);

                // Set the background color
                dayName.background = true;
                dayName.backgroundColor = backgroundColor;
            }
            else
            {
                currentTextFormat = dayName.getTextFormat();
                currentTextFormat.color = getStyle("weekHeaderColor");
                dayName.setTextFormat(currentTextFormat);

                // Set the background color
                dayName.background = true;
                dayName.backgroundColor = backgroundColor;
            }

            // Reset the rowIndex
            rowIndex = 1;

            // Now go through all the other rows of this column
            for (rowIndex; rowIndex < currentColumn.length; rowIndex++)
            {
                dayName = currentColumn[rowIndex];

                if (isWeekendCol)
                {
                    dayName.setColor(getStyle("weekendColor"));
                }
                else
                {
                    dayName.setColor(getStyle("weekColor"));
                }
            }
        } 
}

В файле CSS я добавил следующие стили: 

DateChooser {

cornerRadius: 0;headerColors: #FFFFFF, #FFFFFF;TodayColor: # 00448c;стиль границы: нет;dropShadowEnabled: false;fontFamily: myGeorgia;dayNamesBackgroundColor: #ECECEC;weekHeaderColor: # 444444;weekendHeaderColor: #DDDDDD;weekColor: # 00317F;ВыходныеЦвет: #DDDDDD;headerStyleName: "dateChooserHeaderStyle";
comboBoxStyleName: "comboBoxStyleName";}

Наиболее интересными стилями здесь являются пользовательский стиль "dayNamesBackgroundColor" (который используется для придания цвета фона для набора SMTWTFS) и пользовательские стили "Выходные дни", "Неделя для чтения", "Неделя для чтения", "неделя", "SundayColor "

Я прочитал эти цвета описанным выше способом, чтобы получить полный контроль над разницей в цветах недели / выходного дня, где набор SMTWTFS мог получить цвета, отличные от номера дня

Надеюсь, это поможетдругие люди в будущем.Мне потребовалось много времени, чтобы понять это:)

2 голосов
/ 05 мая 2011

Я сделал что-то подобное для клиента. Подход заключается в расширении класса CalendarLayout для принятия этих стилей и изменения стиля в соответствующие дни. Затем расширьте DateChooser для принятия тех же стилей и передайте их новому классу CalendarLayout.

Это утомительно; и вы, скорее всего, столкнетесь с проблемами с частными переменными; но это выполнимо.

...