Override list layout

It’s not possible at this point to alter the HTML but I’ve found there’s usually a CSS solution to most of the customizations people want to make. If you can explain in a bit more detail what you’re trying to do, I may be able to offer some CSS code for you to try.

The default output of the list layout is the following

<List>
  <Month>
    <MonthTitle />
    <Date />
    <Events />
    <Date />
    <Events />
    ...
  </Month>
</List>

What I want to do is this: Wrap each day into a div to so that I can line them all up.

<List>
  <Month>
    <MonthTitle />
    <div>
      <Date />
      <Events />
    </div>
    <div>
      <Date />
      <Events />
    </div>
    ...
  </Month>
</List>

I don’t see there a good way to do this in CSS. What would you suggest, @room34 ?

How are you trying to line them up, exactly? A visual description is what I need.

I want to create a horizontal timeline with four items. Each point represents one day (and has a with of 25%).

In the first line of the item should be the date. Underneath that should be the title of the event(s).

[Deleted — I realized after posting that I misunderstood what you were trying to do.]

• This reply was modified 3 years, 8 months ago by room34.
• This reply was modified 3 years, 8 months ago by room34.

Each day would be a column, with the events for that day listed out below, correct? Are you interested in having the times for those events lined up in an hourly grid? If so, you may want to check out the Pro version, which has a grid view.

https://icscalendar.com/pro

If you’re not interested in the hourly grid, you might want to try week view instead, and you could use CSS to hide the days of the week that you don’t want to display.

I do see some value in modifying the list view to group each day and its events into a div together, as you’re suggesting. I need to make sure adding that HTML would not break any existing implementations, but I think it’s probably feasible. I can look into adding it in the next update. In the meantime, I suggest trying out the other views as noted above.

Correct!

It would be great if you could add this div. I tested a bit around, but currently there is no solid CSS solution to build the layout I want.

Do you already know when you plan to release the update?

I was testing this change yesterday and it looks like it will not cause any issues. It’s part of a broader set of changes I’m working on though (this will be version 7.0.0), so it needs some more testing before release. Most likely it will be this week though.

Perfect! Thank very munch for your help and support!

Thanks for the quick update of the plugin! Now my timeline layout works

Thanks for letting me know this resolved the issue for you. Feel free to open a new ticket if you run into anything else.