Highlighting the date that currently browsing

[Iurii Smuglov]

#wp-calendar .event is highlighting all dates with events, but i need to highlight only date that currently browsing.

• This topic was modified 10 years, 7 months ago by  Stephen Harris.

[Iurii Smuglov]

And could you give me advice how ho highlight weekend names and dates?

[Stephen Harris]

Hi Lurii,

I’d recommend against using #wp-calendar as this maybe removed in a later version (As it potentially conflicts with the standard WordPress calendar). To target the event widget a calendar, use .eo_widget_calendar instead.

Targeting weekends is not supported by all browsers. I’ll looking into adding classes to make cross-browser support possible. However on modern browsers (everything except IE8 and earlier) the following should work:

 //The following assumes Saturday & Sunday are the last two columns on the calendar
 //(e.g. columns 6 & 7). Change as appropriate

 //Target weekend dates
 .eo_widget_calendar table tr td:nth-child(6),
 .eo_widget_calendar table tr td:nth-child(7){
      background:#fff79a
 }
 //Target weekend header
 .eo_widget_calendar table tr th:nth-child(6),
 .eo_widget_calendar table tr th:nth-child(7){
      background:#ffe79a;
 }

[Iurii Smuglov]

Thanks Stephen.
Need to add -a- to weekend dates in that code.

//The following assumes Saturday & Sunday are the last two columns on the calendar
//(e.g. columns 6 & 7). Change as appropriate

/* Target weekend dates /
.eo_widget_calendar table tr td:nth-child(6) a,
.eo_widget_calendar table tr td:nth-child(7) a{
background:#fff79a }<br />
/ Target weekend header */
.eo_widget_calendar table tr th:nth-child(6),
.eo_widget_calendar table tr th:nth-child(7){
background:#ffe79a; }

[Iurii Smuglov]

Thanks Stephen. Works graet, but need to add -a- to weekend dates in that code.

/* Target weekend dates / .eo_widget_calendar table tr td:nth-child(6) a,
.eo_widget_calendar table tr td:nth-child(7) a
{ background:#fff79a }
/ Target weekend header */
.eo_widget_calendar table tr th:nth-child(6),
.eo_widget_calendar table tr th:nth-child(7)
{ background:#ffe79a; }

• This reply was modified 10 years, 8 months ago by  Iurii Smuglov.
• This reply was modified 10 years, 8 months ago by  Iurii Smuglov.

[Iurii Smuglov]

And what about highlighting date that currently browsing? 🙂

[Stephen Harris]

Unfortunately I do not think that will be possible. The calendar is cached for performance so it wouldn’t be possible to add a class e.g. vewing-this-date to the appropriate cell when the HTML is being generated (because it won’t always be being generated – most of the time it’ll be fetched from cache).

However, if I were to add date data attributes to the cells (e.g. data-eo-wc-date="2013-09-06") then it would be possible to dynamically generate a line of CSS:

 [data-eo-wc-date="YYYY-MM-DD"] {
    /* Styles */ 
  }

where YYYY-MM-DD is replaced by the date being viewed. You can get the date being viewed in that format via this function: http://codex.wp-event-organiser.com/function-eo_get_event_archive_date.html.

I’ll aim to get those data-attribute tags in the 2.3 release and then write up a post on how to do this.

[Stephen Harris]

Since (EO) 2.3 you can do this with

There are two problems here: the current day is typically highlighted (with the class .today – assuming the theme uses that class). So the calendar may end up having two dates highlighted. That’s not really much of any issue if different stylings are used.

The bigger issue is that the calendar is cached. And although its likely to be regularly cleared, it may mean when navigating between days, the incorrect date is highlighted.

However, with 2.3 there’s a way around this. Data attributes are added to each cell of the form: data-eo-wc-date="yyyy-mm-dd"

The following code can therefore dynamically style the appropriate cell:

add_action( 'wp_head', 'my_style_currenty_viewed_day' );
function my_style_currenty_viewed_day(){

    if( eo_is_event_archive( 'day' ) ){

        $date = eo_get_event_archive_date( 'Y-m-d' );

        if( $date ){
            ?>
            <style type="text/css">
                .eo_widget_calendar [data-eo-wc-date="<?php echo $date;?>"] {
                    background: red;
                }
            </style>
            <?php       
        }
    }
}

[Iurii Smuglov]

This code doesnt work, unfortunately 🙁

link on October 19th, for example (background: green;)

EO – 2.3.2

• This reply was modified 10 years, 6 months ago by  Iurii Smuglov.

[Stephen Harris]

It’s a caching issue. Try: http://top9oslo.com/events/archive/on/2013/11/24/ (works for me). It should fix itself ~24 hours. Otherwise updating an event should also clear the calendar cache…

[Iurii Smuglov]

Oh, really! It works, except archives of this month, but after updating random event – works everywhere. Thanks a lot!

[Author]

Posts