CSS targeting of first and last day of events

  • Resolved bluedognz

    (@bluedognz)


    5 years ago

    I want to show the first and last day of a calendar booking as a diagonal background, showing that property is actually available to book from the same day as the previous checkout with a diagonal background on the first and last child of the list. Here’s the end result I want, hacked together in photoshop. https://share.getcloudapp.com/GGu0BnBB

    I can create the diagonal background effect with CSS, but I can’t work out how to target the first and last “days” of the booking. Perhaps this would be an option in the upcoming pro version of the plugin?

    Here’s the plugin in action.

    URL: https://antares.bluedogwebdesign.com/property/reef-madness/ (scroll to the bottom of the page)

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author room34

    (@room34)

    Good suggestion. It should not be too difficult for me to add another CSS class that only applies on the first and last days of a multi-day range. (Two CSS classes, really, one for the beginning and one for the end.)

    I’ll make note of this for the next update. Thanks!

    Thread Starter bluedognz

    (@bluedognz)

    Brilliant thanks!

    Plugin Author room34

    (@room34)

    This feature will be available later today in the version 4.6.2 release.

    Three new CSS classes have been added: .multiday_first, .multiday_middle and .multiday_last which you can use to style these ranged events.

    One thing to note: the plugin currently does not have a way of differentiating between different overlapping multi-day events, so, for instance, if you wanted to color-code them to tell them apart, this is not currently possible.

    However, given your described use case, I don’t think there would be any overlaps, so hopefully this solution is adequate for now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS targeting of first and last day of events’ is closed to new replies.