Conditional CSS based on Date

  • Resolved mjcs

    (@mjcs)


    3 years, 6 months ago

    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

    (@tobiasbg)

    3 years, 6 months ago

    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

    (@mjcs)

    3 years, 6 months ago

    The page is a password protected page. Can I send you the URL and a password privately somehow?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 6 months ago

    Hi,

    sure, you can send me an email. The address is in https://tablepress.org/impressum/

    Regards,
    Tobias

    Thread Starter mjcs

    (@mjcs)

    3 years, 6 months ago

    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

    (@mjcs)

    3 years, 6 months ago

    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

    (@tobiasbg)

    3 years, 6 months ago

    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

    (@mjcs)

    3 years, 6 months ago

    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

    (@tobiasbg)

    3 years, 6 months ago

    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

    (@mjcs)

    3 years, 6 months ago

    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/

    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.
    • This reply was modified 3 years, 6 months ago by mjcs.
    • This reply was modified 3 years, 6 months ago by mjcs.
    Thread Starter mjcs

    (@mjcs)

    3 years, 6 months ago

    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.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 6 months ago

    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

    (@mjcs)

    3 years, 6 months ago

    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

    (@tobiasbg)

    3 years, 6 months ago

    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.