Title: Conditional CSS based on Date
Last modified: November 4, 2022

---

# Conditional CSS based on Date

 *  Resolved [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/)
 * Hi Tobias,
 * Thank you for producing and maintaining such a wonderful plugin. It’s so good.
 * I am using the plugin to produce timetables for music students. I would like 
   to be able to change the CSS of columns based on the week of the year. I’m assuming
   it will need to be done via Javascript but I’m quite a novice at JS – I’m fine
   with HTML an CSS. My research has me testing something like this below where 
   I’m just trying to get the script to have an impact on the table, but I haven’t
   had any luck getting changes to appear on the website.
 *     ```
       var curtime = new Date(),
           curday = curtime.getDate(),
           curmonth = curtime.getMonth()+1;
   
       if(curmonth == 11 && curday > 16)
       document.getElementById("td.column-4").style.fontWeight = "900";
   
       else 
       document.getElementById("td.column-3").style.fontWeight = "900";
       ```
   
 * Is this something you might be able to help me with?
 * Regards,
    Mark

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16164275)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Can you maybe post a link to your table, so that I get an idea of what you are
   trying to achieve. Maybe I can recommend a good approach then.
 * Your JS approach would be feasible, but using `document.getElementById` will 
   not work here, as `td.column-4` is not a HTML ID. Thus, you would have to use
   a different way of selecting the target element.
 * Regards,
    Tobias
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16165126)
 * The page is a password protected page. Can I send you the URL and a password 
   privately somehow?
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16165383)
 * Hi,
 * sure, you can send me an email. The address is in [https://tablepress.org/impressum/](https://tablepress.org/impressum/)
 * Regards,
    Tobias
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16166836)
 * Thank you.
 * I have sent you an email with the details.
 * I’ve currently set one of the (week) columns to 900 font weight manually with
   CSS, however would love this to be automatic after an initial setup of date ranges
   once a year or once a quarter.
 * Regards, Mark
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16167258)
 * I’ll try and explain myself a little more clearly. I have a table with headers
   labelled Week 1, week 2 etc… What I am looking to achieve is…
 * 1. set a list of dates (7 days apart) and label each one as week 1, week 2, etc.
   
   2. test what the current day is and then apply a number a styles to the appropriate
   column when the current day falls between the two dates.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16168258)
 * Hi,
 * thanks for the link and the explanation. I see what you mean now. Your general
   approach should work here. Instead of `document.getElementById()`, you’ll need
   to use `querySelectorAll()` here, and then loop through them, e.g. like
 *     ```
       let column = "4";
       document.querySelectorAll( ".tablepress tbody .column-" + column ).forEach( function( cell ) {
         cell.style.fontWeight = "900";
       } );
       ```
   
 * This would make the fourth column of all tables on the page bold.
 * Regards,
    Tobias
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16169200)
 * Hi Tobias,
 * Thank you so much for taking the time to look at my situation and offer a solution.
   It’s exactly the guidance I needed – where to start!
 * I’ve already rated your plugin 5-stars, but I’ll buy you a pot of coffee as recognition
   of your amazing support. Yours is my favourite plugin on WP. ;D
 * Regards,
    Mark
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16169545)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * And thanks for rating TablePress and for the donation, I really appreciate it!
 * Best wishes,
    Tobias
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16175589)
 * Hi Tobias,
 * I thought I would follow up this thread with a solution that worked for me in
   case other people want to achieve something similar. I ended up creating a new
   CSS class (I called it .current-week) which I added in the plugin’s CSS field
   in the options tab, and then used Javascript to add that to the appropriate column.
 * I then created an array of the specific dates. In my case I wanted the column
   to change font-weight each Saturday and move one column to the right each week(
   hence the offset).
 * Thanks again for your help – I hope this helps others too.
 * Regards,
    Mark
 * Have a look here: [https://jsfiddle.net/MrSiesta/8pofrgbs/47/](https://jsfiddle.net/MrSiesta/8pofrgbs/47/)
 * CSS
 *     ```
       .current-week {
         font-weight: 700 !important;
       }
       ```
   
 * Javascript
 *     ```
       const weeks = [
       { from: new Date("2022-11-05"), to: new Date("2022-11-11"), offset: 8 },
       { from: new Date("2022-11-12"), to: new Date("2022-11-18"), offset: 9 },
       { from: new Date("2022-11-19"), to: new Date("2022-11-25"), offset: 10 },
       { from: new Date("2022-11-26"), to: new Date("2022-12-02"), offset: 11 },
       { from: new Date("2022-12-03"), to: new Date("2022-12-09"), offset: 12 },
       { from: new Date("2022-12-10"), to: new Date("2022-12-16"), offset: 13 },
       { from: new Date("2023-01-28"), to: new Date("2023-02-03"), offset: 5 },
       { from: new Date("2023-02-04"), to: new Date("2023-02-10"), offset: 6 },
       { from: new Date("2023-02-11"), to: new Date("2023-02-17"), offset: 7 },
       { from: new Date("2023-02-18"), to: new Date("2023-02-24"), offset: 8 },
       { from: new Date("2023-02-25"), to: new Date("2023-03-03"), offset: 9 },
       { from: new Date("2023-03-04"), to: new Date("2023-03-10"), offset: 10 },
       { from: new Date("2023-03-11"), to: new Date("2023-03-17"), offset: 11 },
       { from: new Date("2023-03-18"), to: new Date("2023-03-24"), offset: 12 },
       { from: new Date("2023-03-25"), to: new Date("2023-03-31"), offset: 13 },
       { from: new Date("2023-04-01"), to: new Date("2023-04-07"), offset: 14 },
       { from: new Date("2023-04-08"), to: new Date("2023-04-14"), offset: 5 },
       { from: new Date("2023-04-29"), to: new Date("2023-05-05"), offset: 5 },
       { from: new Date("2023-05-06"), to: new Date("2023-05-12"), offset: 6 },
       { from: new Date("2023-05-13"), to: new Date("2023-05-19"), offset: 7 },
       { from: new Date("2023-05-20"), to: new Date("2023-05-26"), offset: 8 },
       { from: new Date("2023-05-27"), to: new Date("2023-06-02"), offset: 9 },
       { from: new Date("2023-06-03"), to: new Date("2023-06-09"), offset: 10 },
       { from: new Date("2023-06-10"), to: new Date("2023-06-16"), offset: 11 },
       { from: new Date("2023-06-17"), to: new Date("2023-06-23"), offset: 12 },
       { from: new Date("2023-06-24"), to: new Date("2023-06-30"), offset: 13 },
       { from: new Date("2023-07-01"), to: new Date("2023-07-07"), offset: 14 },
       { from: new Date("2023-07-22"), to: new Date("2023-07-28"), offset: 5 },
       { from: new Date("2023-07-29"), to: new Date("2023-08-04"), offset: 6 },
       { from: new Date("2023-08-05"), to: new Date("2023-08-11"), offset: 7 },
       { from: new Date("2023-08-12"), to: new Date("2023-08-18"), offset: 8 },
       { from: new Date("2023-08-19"), to: new Date("2023-08-25"), offset: 9 },
       { from: new Date("2023-08-26"), to: new Date("2023-09-01"), offset: 10 },
       { from: new Date("2023-09-02"), to: new Date("2023-09-08"), offset: 11 },
       { from: new Date("2023-09-09"), to: new Date("2023-09-15"), offset: 12 },
       { from: new Date("2023-09-16"), to: new Date("2023-09-22"), offset: 13 },
       { from: new Date("2023-09-23"), to: new Date("2023-09-29"), offset: 14 },
       { from: new Date("2023-10-14"), to: new Date("2023-10-20"), offset: 5 },
       { from: new Date("2023-10-21"), to: new Date("2023-10-27"), offset: 6 },
       { from: new Date("2023-10-28"), to: new Date("2023-11-03"), offset: 7 },
       { from: new Date("2023-11-04"), to: new Date("2023-11-10"), offset: 8 },
       { from: new Date("2023-11-11"), to: new Date("2023-11-17"), offset: 9 },
       { from: new Date("2023-11-18"), to: new Date("2023-11-24"), offset: 10 },
       { from: new Date("2023-11-25"), to: new Date("2023-12-01"), offset: 11 },
       { from: new Date("2023-12-02"), to: new Date("2023-12-08"), offset: 12 },
       { from: new Date("2023-12-09"), to: new Date("2023-12-15"), offset: 13 }
       ]
   
       let today = new Date();
       let week = 0;
   
       for(let range of weeks){
       	if(range.from <= today && range.to >= today){
         	week = range.offset;
         }
       }
   
       let cellsToBold = document.getElementsByClassName("column-" + week);
   
       for(let cellToBold of cellsToBold){
       	cellToBold.classList.add('current-week');
       }
       ```
   
    -  This reply was modified 3 years, 6 months ago by [mjcs](https://wordpress.org/support/users/mjcs/).
    -  This reply was modified 3 years, 6 months ago by [mjcs](https://wordpress.org/support/users/mjcs/).
    -  This reply was modified 3 years, 6 months ago by [mjcs](https://wordpress.org/support/users/mjcs/).
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16191024)
 * Revised code below…
 * A few days later I found that the array needed to have the dates converted to
   numbers (YYYYMMDD) and then it seemed to be able to calculate things reliably.
 *     ```
       const weeks = [
       { from: new Date(20221105), to: new Date(20221111), offset: 8 },
       { from: new Date(20221112), to: new Date(20221118), offset: 9 },
       { from: new Date(20221119), to: new Date(20221125), offset: 10 },
       { from: new Date(20221126), to: new Date(20221202), offset: 11 },
       { from: new Date(20221203), to: new Date(20221209), offset: 12 },
       { from: new Date(20221210), to: new Date(20221216), offset: 13 },
       { from: new Date(20230128), to: new Date(20230203), offset: 5 },
       { from: new Date(20230204), to: new Date(20230210), offset: 6 },
       { from: new Date(20230211), to: new Date(20230217), offset: 7 },
       { from: new Date(20230218), to: new Date(20230224), offset: 8 },
       { from: new Date(20230225), to: new Date(20230303), offset: 9 },
       { from: new Date(20230304), to: new Date(20230310), offset: 10 },
       { from: new Date(20230311), to: new Date(20230317), offset: 11 },
       { from: new Date(20230318), to: new Date(20230324), offset: 12 },
       { from: new Date(20230325), to: new Date(20230331), offset: 13 },
       { from: new Date(20230401), to: new Date(20230407), offset: 14 },
       { from: new Date(20230408), to: new Date(20230414), offset: 5 },
       { from: new Date(20230429), to: new Date(20230505), offset: 5 },
       { from: new Date(20230506), to: new Date(20230512), offset: 6 },
       { from: new Date(20230513), to: new Date(20230519), offset: 7 },
       { from: new Date(20230520), to: new Date(20230526), offset: 8 },
       { from: new Date(20230527), to: new Date(20230602), offset: 9 },
       { from: new Date(20230603), to: new Date(20230609), offset: 10 },
       { from: new Date(20230610), to: new Date(20230616), offset: 11 },
       { from: new Date(20230617), to: new Date(20230623), offset: 12 },
       { from: new Date(20230624), to: new Date(20230630), offset: 13 },
       { from: new Date(20230701), to: new Date(20230707), offset: 14 },
       { from: new Date(20230722), to: new Date(20230728), offset: 5 },
       { from: new Date(20230729), to: new Date(20230804), offset: 6 },
       { from: new Date(20230805), to: new Date(20230811), offset: 7 },
       { from: new Date(20230812), to: new Date(20230818), offset: 8 },
       { from: new Date(20230819), to: new Date(20230825), offset: 9 },
       { from: new Date(20230826), to: new Date(20230901), offset: 10 },
       { from: new Date(20230902), to: new Date(20230908), offset: 11 },
       { from: new Date(20230909), to: new Date(20230915), offset: 12 },
       { from: new Date(20230916), to: new Date(20230922), offset: 13 },
       { from: new Date(20230923), to: new Date(20230929), offset: 14 },
       { from: new Date(20231014), to: new Date(20231020), offset: 5 },
       { from: new Date(20231021), to: new Date(20231027), offset: 6 },
       { from: new Date(20231028), to: new Date(20231103), offset: 7 },
       { from: new Date(20231104), to: new Date(20231110), offset: 8 },
       { from: new Date(20231111), to: new Date(20231117), offset: 9 },
       { from: new Date(20231118), to: new Date(20231124), offset: 10 },
       { from: new Date(20231125), to: new Date(20231201), offset: 11 },
       { from: new Date(20231202), to: new Date(20231208), offset: 12 },
       { from: new Date(20231209), to: new Date(20231215), offset: 13 }
       ];
   
       //what week we are in
   
       let week = -1;
   
       		var date = new Date(); // M-D-YYYY
   
       		var d = date.getDate();
       		var m = date.getMonth() + 1;
       		var y = date.getFullYear();
   
       let today = y + '' + (m <= 9 ? '0' + m : m) + '' + (d <= 9 ? '0' + d : d);
   
       for(let range of weeks){
       	if(range.from <= today && range.to >= today){
         	week = range.offset;
         }
       }
   
       let cellsToBold = document.getElementsByClassName("column-" + week);
   
       for(let cellToBold of cellsToBold){
       	cellToBold.classList.add('current-week');
       }
       ```
   
    -  This reply was modified 3 years, 6 months ago by [mjcs](https://wordpress.org/support/users/mjcs/).
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16191952)
 * Hi,
 * nice approach!
 * I believe that you don’t need the many `new Date()` calls in your array though,
   as you are constructing today’s date as a string now.
    So, writing
 *     ```
       { from: '20221105', to: '20221111', offset: 8 },
       ```
   
 * etc. should be sufficient.
 * Regards,
    Tobias
 *  Thread Starter [mjcs](https://wordpress.org/support/users/mjcs/)
 * (@mjcs)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16192590)
 * Hi Tobias,
 * You’re right. Of course!
 * Now that I’ve converted the date to a number it’s not necessary in the array.
   I’ll make that adjustment. That should reduce the code size by about one third.
 * Thank you for that suggestion.
 * Kind regards,
    Mark
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16193212)
 * Hi,
 * sure, no problem! 🙂
 * Best wishes,
    Tobias

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Conditional CSS based on Date’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 13 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [3 years, 6 months ago](https://wordpress.org/support/topic/conditional-css-based-on-date/#post-16193212)
 * Status: resolved