Jump to content

95% Solved, Code included - Event Calendar - Various issues in Desktop mode. Flyout, images, cell resizing, bug, arrow

Recommended Posts

95% solved by the updated code

 

Having solved endless problems , I am at my end and need help.  The questions are strictly relevant to the event’s calendar on desktop view.   I have (unexpectedly) solved my problems in phone view and I am not interested in beautifying the “events” page at all, as it is only there to populate the calendar and will not be accessible by visitors as I will plant a custom redirection.  The points of interest are also marked in the picture

https://www.tsiricos.gr/calendar   pass: test

7.1, business plan, circle member

 

Screenshot(107).thumb.png.d0d0bfb6928a5f42423baea231547c41.png

 

6. Any ideas how to tweak the opacity of the flyover? Any attempt ended in disaster, displaying in opacity what was supposed to stay hidden. i.e. all the flyouts simultaneously without hovering. On the contrary, hovering made the selected one solid again.  SOLVED

This code seems to affect the entire flyout, letters included, and not just the background color opacity as intended.

 

  .has-event ul.flyoutitemlist {
   background-color: white;      }


 .has-event ul.flyoutitemlist {
.flyoutitem--ongoing {
   opacity: 1 !important;} 

4. I have used 

#block-yui_3_17_2_1_1695919443787_5989

div.flyoutitem-datetime

{

  display:none !important;

}

to hide the time depicted (seen on 17-18 in black before removal).  My intention was to hide ONLY THE TIME, not the date, treating it as one object. Any solutions? At the moment, as a less than elegant workaround, I have added the date only manually in both events/event settings/excerpt as depicted in 12-13. STILL WITH WORKAROUND, but working

 

5. Additionally, for those purposes, I was able to manipulate the text in the flyout BUT, no matter what I tried paddings seem unresponsive. Any ideas?  SOLVED

 

 

7. Any ideas how to force all calendar cells to retain one size? Look 1-8-15 for example. I have the impression that the cells bloat because of the extra words in the calendar info. I have tweak the font size but even at 1px the problem remains, partially due to the large padding between title, manually added date, separator and next title which I haven’t managed to tweak.  SOLVED

 

1. If more than one events coincide on the same day, the thumb image is gone and substituted with text from those events. Is there a way to force an image there, as is the case with forcing coloring ? e.g. a collage  .png of the 2 events, hosted in squarespace gallery, somewhere In the site, pinterest or whatever you suggest. Flyout info should remain intact. This is by far the most crucial one.   SOLVED

2. In Oct 10, 1st day the events coincide, how can I get rid of that "7p" bug? SOLVED

3. In 17-18, can I get rid of the trailing arrow thingamajingie from flyout title (depicted in 17-18)?  SOLVED

 

Some of those questions have been raised before but usually website information where not provided to allow response.   Any and all help is more than welcome.

 

https://www.tsiricos.gr/calendar   pass: test

7.1, business plan, circle member

Posting my entire code here for posterity, to help who ever needs it and in hope of getting some feedback

// <--------!!!!!!!!!!!! EVENT CALENDAR CODE !!-------------> //

#block-yui_3_17_2_1_1695919443787_5989 .yui3-squarespacecalendar
{
/* ---! MOBILE ONLY ---- */

/* mobile view - no picture highlight date calendar */
@media screen and (max-width:900px ) {
    /* Properly aligns calendar grid */
     .compact-layout .marker {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
 
    /* Set shape and color round marker for single day events */
     .compact-layout .background {
        display: block !important;
        background: lightblue !important;
        opacity: 1 !important;
        border-radius: 50%!important;
    }

    /* Set shape and color marker for days with multiple events */
     .compact-layout .yui3-calendar-day.has-event {
        background: linear-gradient(-45deg, #22e, #aef, #d28,) !important;
        border-radius: 50%!important;
    }

    /* Set size to calendar title (month/year) */
     .yui3-calendar-header-label {
        font-size: 35px !important;
    }

    /* Calendar DATE size */
     .marker-daynum {
        font-size: 18px !important;
        /* font-weight: bold; */
    }

    /* Flyout title controls (itenirary title) */
     .flyoutitem a {
        text-transform: none !important;
        color: #C58567 !important;
        font-size: 11px !important;
        font-family: Helvetica !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Flyout itinerary event excerpt (manually added date) */
     p.sqsrte-large {
        text-transform: none !important;
        color: #C58567 !important;
        font-size: 10px !important;
        font-family: Helvetica !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important; }
}
  
/* ---! DESKTOP ONLY --- */

/* Set background image for days with multiple events */
@media only screen and (min-width: 881px) {
     .has-event .itemlist--iseventscollection {
        background-image: url(https://as2.ftcdn.net/v2/jpg/06/20/57/41/1000_F_620574115_lSw0Ro5pSrHAPDvqInaeEK7XIXnnNNf7.jpg);
        background-size: 100% 100% !important;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute !important;
        color: #fffff;
        text-align: center;
        z-index: -2; /* Place background at back */
    }
/* Insert div.marker (box for date) for single event dates */
     .has-event:not(.has-event--multiday) .marker div {
        background-color: #ffffff; 
        position: absolute;
        top: 1%; 
        right: 1%;
        width: auto;
        height: auto;
        min-width: 1px;
        min-height: 1px;
        border-radius: 0%; /* Make it square */
        padding: 22%;
        opacity: 1;
    }
 /* --! calendar info and flyout controls -- */
/* Set size to calendar title (month/year) */
 .yui3-calendar-header-label {
    font-size: 35px !important; }

/* Calendar DATE size */
 .marker-daynum {
   font-size: auto !important;
 }
    /* font-weight: bold; NOT ACTIVE */ 

/* Flyout title controls (itenirary title) */
 .flyoutitem a {
    text-transform: none;
    color: #C58567 !important;
    font-size: 11px !important;
    font-family: Helvetica !important;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 1px !important;
    margin-bottom: 1px !important;}
  .flyoutitemlist--hasmorecontent {
   padding-top: 5px !important;
   }
/* Flyout itinerary event excerpt (manually added date) */
 p.sqsrte-large {
    text-transform: none;
    color: #C58567 !important;
    font-size: 8px !important;
    font-family: Helvetica !important;
    padding-top: 0px;
    padding-bottom: 0px; 
    margin-top: 0px !important;
   margin-bottom: 0px !important;}
    
  /* Adjust flyout title position*/
   .flyoutitem 
  {max-height: 8%;
    max-width: 100%; 
 overflow-x: 80px !important;  }
   
 /* Adjust overflow size of flyout date */
.flyoutitem p
  {
   line-height: 1px !important; }
      /* Adjust overflow size of flyout */
  .flyoutitemlist--hasmorecontent
  {max-height: 100%;
 overflow-x: 80px;   }

  /* Adjust background flyout color */
  .has-event ul.flyoutitemlist {
   background-color: white;      }
  /* Adjust background flyout color opacity - NOT WORKING, affects whole flyout inc leters*/
/*   .has-event ul.flyoutitemlist {
.flyoutitem--ongoing {
   opacity: 1 !important;} */
    
  }
  /* COMMON PARAMETERS */
/* Calendar background color and padding */
 .yui3-calendar-pane {
    padding-top: 0px;
    padding-bottom: 0px !important;
    filter: opacity(100%);
    border: 0px solid #fffff;}

/* hide today border marker */
 .yui3-calendar-day.today {
    border: none!important;     
    /* font-weight: bold; */
  }
/* Today calendar date color bullet - NOT ACTIVE */
  /*  .today{ color: #ff3333 !important; } */
      /* Change text color in all event day numbers  */
td.has-event .marker div {
        color: black !important; }   

/* Hide  in the  date calendar the title (event), end time of multievents and time bug remnant, and in flyout time & arrow */
.item.item--ongoing,
.item-time.item-time--12hr,
.item-time.item-time--24hr,
.item-title,
.item-enddate,
.flyoutitem-link-arrow,
div.flyoutitem-datetime
  {display: none !important;} 
  
/* Set a fixed height for the cell to maintain its default size */
  .itemlist--iseventscollection, 
{ height: 100% !important;
  width: 100% !important; } 
}

// <--------!!!!!!END EVENT CALENDAR CODE !!-------------> //

I count on you   @tuanphan  😛 . Your answers in the forum already addressed 7/10 of my problems along the way.

Edited by takis-7124
Progress, partial solutions
Link to comment
  • takis-7124 changed the title to Partially Solved, Code inc. - Event Calendar - Various issues in Desktop mode. Flyout, images, cell resizing, bug, arrow
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Added question, though I dont see this post getting any traction.  At the moment, any day with more than one events has a specific photo (the green one). any ideas how to hake it different days with more than one events having different photos? Or, even better how to force each of the various events displaying their assigned image from events, each image being contained in their respective field? This would allow each "multievent" days having their own unique multievent image, rather than all having the same as is the case now with my code.

 

Edited by takis-7124
Link to comment
  • takis-7124 changed the title to 95% Solved, Code included - Event Calendar - Various issues in Desktop mode. Flyout, images, cell resizing, bug, arrow
  • 2 weeks later...
On 10/6/2023 at 11:14 AM, tuanphan said:

Use this code to change opacity

#block-yui_3_17_2_1_1695919443787_5989 .yui3-squarespacecalendar .has-event ul.flyoutitemlist {
    background-color: rgba(255,255,255,0.5) !important;
}

 

Thanks @tuanphan , worked like a charm. Any ideas how to address the additional question, by chance, on how to have different photo for different days with multiple events, rather than a constant one?

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.