Calendar Customization / Color Coding

Site URL: http://bysilke.com/program

Hi,

site: bysilke.com/program

I know there is a way to change the background square color of all events, but is there a way to have the background square of a calendar event be a different color just on the start day of the event? 

Also, is there a way for an event with a certain "tag" to be its own color? For instance, I have "deadline" as the tag for "deadline to sign up for fall cleanse #x"

Thanks in advance! I've attached a photo as well of what I'm trying to do.

Calendar blocks do not provide the category and tag metadata so there is no built-in way to use them to create CSS rulesets from.

The calendar blocks also do not distinguish the first day of a multi day event. In CSS they are just marked as multi day. With JavaScript it is possible to examine multi day events and add a class to the first day of a multi day event.

Please see Calendar Block Multi Day Event First Day Class Add.

Then you'd add something like the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event.twc-cbmdefdca-multiday-first {
  
    background-color : CornflowerBlue;
    
	}
	
  </style>

Let us know how it goes.

@creedon Thank you so much for your help! Unfortunately, I'm not able to get it to work quite yet. Want to make sure I'm doing everything correctly.

- I put the script src in the Header code injection for the overall website. 

- I added calendar block event change.html to the "program" page code injection. 

- I added the style code to the "program" page code injection after the .html 

(I also tried adding it to the "calendar" event page, with no luck.)

I also tried changing from background-color to background, adding !important, and fixing the closing tag to </style>.

Anything I'm missing? I really appreciate your assistance here.

Quote

(I also tried adding it to the "calendar" event page, with no luck.)

The code only works on calendar blocks.

Quote

and fixing the closing tag to </style>.

Thanks for the catch. I updated my code in my previous post.

Quote

Anything I'm missing?

It appears you've not done the second and third steps in the Quick Install instructions.

@creedon My bad on missing those last two steps. It works perfectly, thank you so much! Would there be a way to do the same for a single day event? 

Quote

Would there be a way to do the same for a single day event?

There wasn't but now there is! 🙂

The Calendar Block Event Change code had to be updated to allow multiple callbacks to be called. You'll need to install the updated version.

You'll need to set the itemCallbacks and itemFlyOutCallbacks constants to the following in the Calendar Block Event Change code.

    const itemCallbacks = [
    
      cbsdeca,
      
      ];
      
    const itemFlyOutCallbacks = [
      
      cbmdefdca,
      
      ];
    
      

Please see Calendar Block Single Day Event Class Add.

Then add the following CSS to the CSS you've already installed. You can put it in the same style tag as the previous code.

  .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event.twc-cbsdeca-single-day {
  
    background-color : PaleVioletRed;
    
    }
    

I realized the Calendar Block Multi Day Event First Day Class Add code has a deficiency. You'll notice that in my Friday post the test image I posted shows the 15th and 16th as the first day of the multi day event. Which is correct because the calendar has been adjusted for my time zone when I view it. But you'll notice my code doesn't handle that properly. I'm not going to fix it right away as I think the code would be just a bit harder to deal with that. Hopefully the code is good enough for now! 🙂

Let us know how it goes.

Quote

I'm not going to fix it right away

I lied. 🙂 Inspiration struck and it didn't seem as hard as I thought initially.

I have updated my cited code in my Friday post.

If you prefer the previous behavior continue to use the version you have.

@creedon Amazing, you're the best! I am a bit stumped though. The single day is working perfectly, but now the multi-day is not working. I reinstalled all code, and the CSS for both single and multi-day are in the same style tag below all the script tags. Not sure where to even begin looking for what I did wrong, lol. I also tried putting the CSS in the Custom CSS instead of the page code injection and it only worked for the single day. Appreciate your help!!

Quote

but now the multi-day is not working.

That was totally my bad. I gave you the wrong code. Here is the right code, hopefully! 🙂

    const itemCallbacks = [
    
      cbsdeca,
      
      ];
      
    const itemFlyOutCallbacks = [
      
      cbmdefdca,
      
      ];
    
      

Let us know how it goes.

@creedon Perfect!!! Thank you so much, I really appreciate all your help!

@creedon Hi again 🙂 I know you have already gone above and beyond to help me and I really appreciate it!! My client is now asking for the entire duration of a multi-day event to be colored instead of just the first day...would be so grateful if you have some time to help with this!  

On 9/12/2022 at 11:04 PM, savgreen said:

Hi again 🙂 I know you have already gone above and beyond to help me and I really appreciate it!! My client is now asking for the entire duration of a multi-day event to be colored instead of just the first day...would be so grateful if you have some time to help with this!  

Have you solved it yet?

@tuanphan No, not yet!

Quote

My client is now asking for the entire duration of a multi-day event to be colored

  .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event.twc-cbemca-multiday {
  
    background-color : PaleVioletRed;
    
    }
    

Let us know how it goes.

@creedon Hi! Not working for me. Do I need to add anything else? I replaced it with the CSS that was there for multiday-first.

Quote

Not working for me

I'd need to see the code in action to see if I can see anything. The original link you provided appears to no longer have a calendar on it.

@creedon You're right, my bad! It is now here: https://bysilke.com/pricing

Please see the following.

Ignore the CSS in the cited post as it doesn't apply to the effect you want.

Let us know how it goes.

@creedon Yes! Works perfectly. Thank you so much!!!