Jump to content

Calendar Month & Day custom text with CSS

Go to solution Solved by tuanphan,

Recommended Posts

Posted
23 minutes ago, jjohansson said:

Hi @tuanphan

Any idea about how to update the text of the Month and Days with CSS in a specific page using Calendar? Please see attached image as it comes from a Deustch website wich I need to duplicate to English.

https://www.zeitgarten.ch/aktuell

https://www.zeitgarten.ch/news

Wait for your news, thanks!

 

 

Screenshot 2024-06-25 at 16.08.34.png

Do you mean keeping the text in /aktuell page and changing these texts into English words in /news page?

image.thumb.png.5df264ba4d6e8bba96944cff29e7cf4a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted (edited)
21 hours ago, Beyondspace said:

Do you mean keeping the text in /aktuell page and changing these texts into English words in /news page?

Yes I need to do exactly that. Update the text in a duplicated Blog page where im translating all the content but that's the part I can´t. 

https://www.zeitgarten.ch/news this is the Page (duplicated of Aktuell) wich I want to apply that English texts.

Any help will be much appreciated @Beyondspace

Edited by jjohansson
Posted
4 hours ago, jjohansson said:

Yes I need to do exactly that. Update the text in a duplicated Blog page where im translating all the content but that's the part I can´t. 

https://www.zeitgarten.ch/news this is the Page (duplicated of Aktuell) wich I want to apply that English texts.

Any help will be much appreciated @Beyondspace

You can try the following code in code injection footer

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script>
  $(document).ready(function(){
    let deusMonth = ['Januar','Februar', 'März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']
    let enMonth = ['January','February', 'March','April','May','June','July','August','September','October','November','December']

    let enWeekDay = ['Sun','Mon', 'Tue','Wed','Thu','Fri','Sat']
    const $target = $("#block-79214c905daaf1ff0e18 .calendar-block h1 > div");
    const month = $target.text().split(" ")[0];
    const mIndex = deusMonth.findIndex(m=> {
      return month.trim() == m.trim()
    });

    if(mIndex != -1) {
      $target.text($target.text().replace(month, enMonth[mIndex]));
    }

    const $weekDay = $('#block-79214c905daaf1ff0e18 .yui3-calendar-weekday');
    $weekDay.each((i,day) => {
      $(day).text(enWeekDay[i])
    })
  })
</script>

It works when we load the page, but when you move to the next or previous month, it still shows the month with Deustch.

It requires more complicate code to cover these actions. If you are interested, PM me so we can discuss more detail

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
On 6/26/2024 at 6:32 PM, Beyondspace said:

It works when we load the page, but when you move to the next or previous month, it still shows the month with Deustch.

It requires more complicate code to cover these actions. If you are interested, PM me so we can discuss more detail

Thank you very much @Beyondspace do you think that customization would take lot of time to find out how it works? Maybe adding this code to all the posts in the Blog Deustch somehow could help?

  • Solution
Posted

Add this code to News Page Header Injection

<style>
  th.yui3-calendar-weekday {}

th.yui3-calendar-weekday {
    font-size: 0 !important;
}
th.yui3-calendar-weekday:before {
    font-size: 14px !important;
}
th.yui3-calendar-weekday:nth-child(1):before {
    content: "SUNDAY";
}
th.yui3-calendar-weekday:nth-child(2):before {
    content: "MONDAY";
}
th.yui3-calendar-weekday:nth-child(3):before {
    content: "TUESDAY";
}
th.yui3-calendar-weekday:nth-child(4):before {
    content: "WEDNESDAY";
}
th.yui3-calendar-weekday:nth-child(5):before {
    content: "THURSDAY";
}
th.yui3-calendar-weekday:nth-child(6):before {
    content: "FRIDAY";
}
th.yui3-calendar-weekday:nth-child(7):before {
    content: "SATURDAY";
}
</style>

image.thumb.png.f3f0c719afb200db38121863c3d16160.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/8/2024 at 2:15 AM, jjohansson said:

That worked perfectly Tuan, thanks a lot!

I only need now the fix for the Months... any idea?

With month, you can use code in this thread

https://forum.squarespace.com/topic/162756-changing-languagetext-on-store-calendar-blog-search-box-etc/

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/15/2024 at 2:24 AM, jjohansson said:

I have applied but didn't work... any idea?

Can you provide exact code you added?

On 7/14/2024 at 1:42 AM, jjohansson said:

@TuanI have two Blog pages do you think I could leave one with the default DEUSTCH languague and just apply this code to the ENGLISH page?

 

You can add code to Page Header Injection instead of Sitewide Code Injection

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.