Change UL background when it is today

I have a simple course calendar and I want the day column to be different if it is that day of the week.

E.G. if it is Wednesday, then the Wednesday column is different

I have been playing around but to no avail and searching through the forums. And I have gotten to this point.

I am open to any new method. Thanks.

Script

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> 
<script>
$('.fc-today').prevAll('div ul').css('backgroundColor','yellow');
$('.fc-today').parent().prevAll().find('div ul').css('backgroundColor','yellow');
</script>

HTML

<div class="calendar-daycontent fc-mon">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-tue">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-wed">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-thu">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-fri">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sat">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sun">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

CSS

div.calendar-daycontent {
float : left ;
width : 138px ;
margin : 1px ;
display : block ;
}

    div.calendar-daycontent ul {
    float : left ;
    width : 100% ;
    display : block ;
    margin-bottom : 2px ;
    }

    .fc-mon ul {background-color:Red;}
    .fc-tue ul {background-color:green;}
    .fc-wed ul {background-color:blue;}
    .fc-thu ul {background-color:Red;}
    .fc-fri ul {background-color:Red;}
    .fc-sat ul {background-color:green;}
    .fc-sun ul {background-color:blue;}

    .fc-today ul {}

    div.calendar-daycontent ul a:link, div.calendar-daycontent ul a:visited {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    }

    div.calendar-daycontent ul a:hover {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    background-color : #6bb925 ;
    -o-transition : .3s ;
    -ms-transition : .3s ;
    -moz-transition : .3s ;
    -webkit-transition : .3s;
    transition : .3s ;
    }

        div.calendar-daycontent ul li {
        float : left ;
        width : 100% ;
        display : block ;
        padding : 2px 0px ;
        color : #151515 ;
        text-align : center ;
        }

        div.calendar-daycontent ul li.class-header  {
        font-size : 15px ;
        font-weight : 800 ;
        text-transform : uppercase ;
        font-style : italic;
        color : #6bb925 ;
        margin-top : 2px ;
        margin-bottom : 1px ;
        }

            div.calendar-daycontent ul:hover li.class-header {
            color : #fff ;
            }

        div.calendar-daycontent ul li.class-inst {
        font-size : 12px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-time {
        font-size : 11px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-room {
        font-size : 11px ;
        }


Source: html

Leave a Reply