Month w/ Sidebar Highlighted Events

[Shane Phillips]

Is there a way to have events highlighted using the Month w/ Sidebar view? Like the default Google calendar or the “Full” view option in ICS Calendar. Without events highlighted, a 3-day event looks like it could be the same event 3 days in a row rather than a single event spanning 3 days.

Also is there a way to remove the auto-scrolling behavior when clicking a day? Clicking on a day scrolls the viewport down to the top of the calendar. Maybe related to class: monthnav-select stickymonths? I’m just not seeing any styles in there I can adjust to disable. I’m also a CSS noob so I might not have any idea what I’m talking about.

Thanks in advance!

[room34]

Unfortunately, the table structure in the Month, Week, and Month with Sidebar views does not allow for multi-day events’ blocks to actually span multiple days, so those events have to repeat.

As for the auto-scrolling behavior, that can be overridden with a bit of additional code, but I would recommend considering the different use cases where it’s important. Are you mainly looking at a desktop or mobile view here? The auto-scroll is primarily for situations where the user has scrolled the sidebar list out of view (either on a very ‘tall’ month, or on mobile). If it didn’t scroll into view, users might not know that anything on the page has changed when they click on a date.

[Shane Phillips]

I see what you mean on mobile view with the auto-scroll. Bummer about the multi-day span, that’s really the only view that will work for this project. We might have to create separate entries in Google for each day labeled “Class Name – Day 1″ Class Name – Day 2” “etc.” as a workaround.

I’d like to drop the .ics-calendar-filter to be on the same line as the .ics-calendar-select with the month header hidden via the advanced settings. Was trying to mess with negative margins but haven’t had any luck. Also having some issues with the same two boxes in mobile view. Would like for the ics-calendar-select to go full width and for the box size to be the same as the .ics-calendar-filter search box.

Training

(site is still under construction – pardon my dust)

• This reply was modified 7 months ago by Shane Phillips.

[Shane Phillips]

Nevermind. I just went with arrow navigation instead of the drop-down. That looks cleaner than having the two boxes not aligned and will work just as well.

[Lutz Natschke]

Hello Shane,
as a new owner of the PlugIn “ICS Calendar” and a beginner in website design I would be grateful for if you could tell me how you created the arrows and the button “today”. Could not find anything in the settings regarding this.

Best regards
Lutz

[Author]

Posts