Calendar display week days only

[Paul160]

Hi,

I am hoping some one can help. I have a monthly calendar with style in header to show week days only. Unfortunately I can only get it to work with responsive disabled, soon as I check responsive it goes back to 7 days.

[Volomeister]

Hi Paul,

You can use try to add this CSS code snippet to hide Sunday and Saturday:

 

<style>
article section.cbCalendarReport {
grid-template-columns: repeat(5, 1fr);}
section.cbCalendarReport > div:nth-child(7n+1), section.cbCalendarReport > div:nth-child(7n+7) {
display: none!important;
}
</style>

Let me know if that works

[Paul160]

Hi Volomeister,

That worked perfectly, thank you so much.

[Paul160]

I don't suppose you would also know how to change the sort order of the grid so it would display Wednesday- Tuesday rather than Monday-Friday?

[Volomeister]

It is possible to change the order so it displays from Wednesday-Friday, Monday-Tuesday, but it will not look good because you will have, say Wed-4th, Thu-5th, Fri-6th and then Mon-2nd, Tue-3rd



If that works, I can share a solution

[Paul160]

Thanks again Volomeister,

I would like to see for myself if you could share a solution that would be great

[Volomeister]

<style>
article section.cbCalendarReport {
grid-template-columns: repeat(5, 1fr);}
section.cbCalendarReport > div:nth-child(7n+1), section.cbCalendarReport > div:nth-child(7n+7) {
display: none!important;
}

</style>
<style>
section.cbCalendarReport > div:nth-child(2) {
order: 7;
}
section.cbCalendarReport > div:nth-child(3) {
order: 6;
}
section.cbCalendarReport > div:nth-child(4) {
order: 3;
}
section.cbCalendarReport > div:nth-child(5) {
order: 4;
}
section.cbCalendarReport > div:nth-child(6) {
order: 5;
}


section.cbCalendarReport > div:nth-child(9) {
order: 14;
}
section.cbCalendarReport > div:nth-child(10) {
order: 13;
}
section.cbCalendarReport > div:nth-child(11) {
order: 10;
}
section.cbCalendarReport > div:nth-child(12) {
order: 11;
}
section.cbCalendarReport > div:nth-child(13) {
order: 12;
}


section.cbCalendarReport > div:nth-child(16) {
order: 21;
}
section.cbCalendarReport > div:nth-child(17) {
order: 20;
}
section.cbCalendarReport > div:nth-child(18) {
order: 17;
}
section.cbCalendarReport > div:nth-child(19) {
order: 18;
}
section.cbCalendarReport > div:nth-child(20) {
order: 19;
}


section.cbCalendarReport > div:nth-child(23) {
order: 28;
}
section.cbCalendarReport > div:nth-child(24) {
order: 27;
}
section.cbCalendarReport > div:nth-child(25) {
order: 24;
}
section.cbCalendarReport > div:nth-child(26) {
order: 25;
}
section.cbCalendarReport > div:nth-child(27) {
order: 26;
}

section.cbCalendarReport > div:nth-child(30) {
order: 35;
}
section.cbCalendarReport > div:nth-child(31) {
order: 34;
}
section.cbCalendarReport > div:nth-child(32) {
order: 31;
}
section.cbCalendarReport > div:nth-child(33) {
order: 32;
}
section.cbCalendarReport > div:nth-child(34) {
order: 33;
}

section.cbCalendarReport > div:nth-child(37) {
order: 42;
}
section.cbCalendarReport > div:nth-child(38) {
order: 41;
}
section.cbCalendarReport > div:nth-child(39) {
order: 38;
}
section.cbCalendarReport > div:nth-child(40) {
order: 39;
}
section.cbCalendarReport > div:nth-child(41) {
order: 40;
}



</style>

Hi Paul,

You can test this CSS code

[Paul160]

Thanks Volomeister,

I shall give it a go when I get the chance, really appreciate the help here.