mjcs

Yep – third vote here. Would be great to have an ‘include / exclude’ list with check boxes.

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

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 2 years, 3 months ago by mjcs.

There’s a problem with the html you’ve pasted. Check you table entries. In the ones that aren’t working you’ve left an ‘f’ off of ‘href’, and an ‘r’ instead of a ‘t’ at the end of target. See below:

<a hre="mailto:[email protected]" rel="noopener" targer="_blank">[email protected]</a>

Should be:

<a href="mailto:[email protected]" rel="noopener" target="_blank">[email protected]</a>

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

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

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.

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

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