Jump to content

Calendar Customization / Color Coding

Recommended Posts

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.

Group 1.jpg

Link to comment

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>

793685110_ScreenShot2022-08-05at2_02_21PM.png.82b02e42e82514f83a9ed760d602758f.png

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

@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!!

Link to comment
  • 3 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.