Wie kann der Stil der Zelle von heute im asp.net AJAX CalendarExtender kontrolliert werden?

Question

Basierend auf der AjaxControlToolkit-API für den CalendarExtender kann ich den Stil des ausgewählten Datums steuern mit:

.ajax__calendar_active { background-color:red }

Und gemäß der API hoffte ich, dass .ajax__calendar_today es mir ermöglichen würde, den Stil der Zelle für den heutigen Tag zu kontrollieren, wenn sie angezeigt wird. Leider steuert diese .ajax__calendar_today den Stil des größeren "Heute: XYZ" Buttons am unteren Rand des Kalenders.

Weiß jemand, wie man die Zelle für den heutigen Tag stilisieren kann, wenn sie angezeigt wird?

Update:

Ich habe das HTML mit Firebug inspiziert und festgestellt, dass es keine spezielle CSS-Klasse oder Indikator für die Zelle des heutigen Tages gibt. Das ergibt aus serverseitiger Sicht Sinn... wie soll man wissen, welcher Tag es auf dem Rechner des Benutzers ist, ohne Code hinzuzufügen, um den GMT-Offset und ähnliches zu erfassen.

Also denke ich jetzt, dass ich darauf festgelegt bin, etwas JavaScript zu erstellen, um das heutige Datum clientseitig zu erhalten und mit dem Titelattribut jeder Zelle zu vergleichen, der auf etwas wie "Freitag, 11. Februar 2011" gesetzt ist.

Update: September 2011 Die neueste Veröffentlichung des AjaxControlToolkit hat die .ajax__calendar_today CSS-Klasse hinzugefügt, um dies zu steuern.

Answer 1

Ich glaube, du könntest die folgende CSS-Klasse verwenden:

.ajax__calendar_today .ajax__calendar_day { background-color:red;}

Answer 2

Konnte keine spezielle Klasse dafür finden, also habe ich einen Style in meinem site.master eingefügt. FYI, das padding 0 ist, weil der Rahmen 2px beträgt, was für das Standard-Padding eingestellt ist.

    div.ajax__calendar_day[title='<%=DateTime.Now.ToString("dddd, MMMM dd, yyyy")%>']
    {
    border: 1px solid #F00;
    padding-right: 0px;
    }

Answer 3

Die beste Lösung, die ich gefunden habe, ist dieser Beitrag.

Ich habe einfach die ersten 2 Zeilen der Funktion entfernt (aktuellen Tag festlegen) und einen Tippfehler in dayDIVs[i].style.borderColor behoben, indem ich dayDIVs[i].style.borderColor (Großbuchstabe C für Farbe) verwendet habe. Du kannst auch dayDIVs[i].style.borderStyle = "dotted"; hinzufügen.

Hier ist also das Transkript davon (mit meinen Änderungen):

/* Im HEAD-Bereich */

    function clientShown(sender, args) {
        var today = new Date();
        var currentTitle = today.localeFormat("D");
        //Alle Day DIVs im Kalender daysBody suchen
        var dayDIVs = sender._daysBody.getElementsByTagName("DIV");
        for (i = 0; i < dayDIVs.length; i++) {
            if (dayDIVs[i].title == currentTitle) {
                //Ändere den Style des aktuellen Tages
                dayDIVs[i].style.borderColor = "#0066cc";
                dayDIVs[i].style.borderStyle = "dotted";
            }
        }
    }

/* und dann im BODY: */

Answer 4

Sie benötigen die folgende CSS-Klasse: .ajax_Kalender .ajax_kalender_aktiv .ajax__kalender_tag {Hintergrundfarbe:rot;}