Customise entry on calendar

  • Resolved Adrian

    (@locka)


    1 week, 4 days ago

    I’ve been looking through the settings, but I’m not really sure where to start with customising the calendar entries. What I’m trying to achieve is the following:

    1. Display the event start and end time in a format such as:

    10:00am – 11:00am

    I can already achieve this through the configuration settings, including adding a carriage return afterwards using <br>. I’ve also worked out that I can wrap the time in a <span> class and style it separately in CSS so it appears lighter than the event title. I’m not sure whether this is the best approach or simply the only way of doing it.

    The issue I’m running into is with our race calendar events. For some of those, I only want to display the start time. While I can suppress the end time itself, the separator dash (-) still remains because it is treated as plain text.

    1. I’d also like to style the event entries a little differently. Ideally, I’d like either:
    • a | character at the start of the event title, or preferably
    • a coloured border on the left-hand side of the entry

    The idea would be for this colour to inherit the event category colour automatically. I feel this would give a cleaner and more subtle appearance than colouring the full background or text.

    Is there a way to customise how these entries are rendered within the calendar? Any pointers on where to start or which templates/hooks I should be looking at would be greatly appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    1 week, 3 days ago

    Which view are you trying to style? The grid? An upcoming events list? The single event view? Having some context might help me know how to guide you.

    Thread Starter Adrian

    (@locka)

    1 week, 3 days ago

    Hi Jo,

    Thanks for quick response I’m trying to style grid calendar look though on mobile I will be use a list and want to style that similar in list potentially.

    Plugin Author Joe Dolson

    (@joedolson)

    1 week, 1 day ago

    What are you using as a template for the time? There are template options that handle that for you; if you’re doing something like {time} – {endtime}, that’s going to be trickier, though. I’d recommend using something like timerange

    Adding a pipe character before the title can be done in the title template at My Calendar > Settings > Display “Event title (grid)”, if that’s something you want.

    The colored border will be a bit trickier. The default styles don’t apply category colors to borders, although all the classes and style variables are available so you could author custom CSS for that, e.g.

    .mc-main .calendar .mc_general .event-title. { border-left: 4px solid var(--category-mc_general); }

    I may in the future add additional options for how to use category colors, but for the time being doing something with them other than the available options requires you to write your own CSS.

    Thread Starter Adrian

    (@locka)

    1 week, 1 day ago

    Hi Joe,

    Thanks for the reply. I’ll take a look at the time range option and see if that does what I’m after. I assume it is used in the same place as where I’m currently using {time} – {endtime}.

    Regarding the pipe symbol, I only mentioned that as a possible way of achieving the effect I was looking for. If it’s possible to do it with CSS using the variable you’ve provided, that would be even better. CSS gives far more flexibility for styling than simply displaying a character.

    I have looked through the documentation, but I haven’t been able to find a complete list of the available variables and where they can be used. Is there such a list available anywhere?

    y the way, I’m really impressed with the plugin. It’s extremely flexible and customisable. My only suggestion would be that some areas of the documentation could perhaps be expanded a little further. For example, in the Custom PHP section there are a number of PHP files listed see below but I’ve no idea which ones do what as I might well be able to make some changes there if need.

    Available Templates

    • /mc-templates/event
      • Copy to Theme/mc-templates/event/calendar-title.php
      • Copy to Theme/mc-templates/event/calendar.php
      • Copy to Theme/mc-templates/event/card-title.php
      • Copy to Theme/mc-templates/event/card.php
      • Copy to Theme/mc-templates/event/list-title.php
      • Copy to Theme/mc-templates/event/list.php
      • Copy to Theme/mc-templates/event/mini-title.php
      • Copy to Theme/mc-templates/event/mini.php
      • Copy to Theme/mc-templates/event/single-title.php
      • Copy to Theme/mc-templates/event/single.php
      • Copy to Theme/mc-templates/event/next.php
      • Copy to Theme/mc-templates/event/now.php
      • Copy to Theme/mc-templates/event/today.php
      • Copy to Theme/mc-templates/event/upcoming.php
      • /mc-templates/location
        • Copy to Theme/mc-templates/location/single.php
    Plugin Author Joe Dolson

    (@joedolson)

    5 days, 15 hours ago

    No question, the documentation can always stand to be expanded…I do what I can, but I always feel like I’m leaving that behind.

    I’ll get the documentation for those updated and post here when I have.

    There isn’t a list of variables available for category colors, because the names of those variables are generated based on the names of your categories. However, they follow a fairly predictable pattern (at least, in western languages) – e.g., var(--category-mc_general) is the class for the category with the name “General”. If you had a category like “Sports Days”, it would be --category-mc_sports-days

    They all follow the pattern “–category-mc_” followed by the slug-ified category name.

    Plugin Author Joe Dolson

    (@joedolson)

    5 days, 15 hours ago

    Does this document help you with knowing more about the templates?

    https://docs.joedolson.com/my-calendar/php-templates-body/

    Thread Starter Adrian

    (@locka)

    1 day, 19 hours ago

    Hi Joe,

    Thanks for all your help.

    I’ve managed to resolve those issues now. The time range functionality does exactly what I need, so that was an easy fix.

    I’ve also added some CSS styling to the calendar entries so that each one has a coloured line beside it, along with improved spacing between entries. The colours are displaying correctly as well.

    Thanks again for your assistance.

    /*Put time on separate line and change text color*/
    .timerange:not(:empty) {
        display: block;
        font-size: 0.9em;
        color: #666;
    }

    /*Give each entry a border on left*/
    .mc-main .calendar-event[class*="mc_"] .event-title, .mc-main .list-event[class*="mc_"] .event-title{
        border-left-width: 4px;
        border-left-style: solid;
    }

    /*Make sure entry is away from cell border*/
    .mc-main .mc-content article{
    margin-left:4px;
    }

    /*Add Space between Entries*/
    .mc-main .mc-content article + article {
     margin-top: 6px;
    }

    /*Adding space after last entry only*/
    .mc-main .mc-content article:last-of-type:not(:only-of-type) {
      margin-bottom: 10px;
    }

    /*Remove any background colors on entries*/
    .mc-main .event-title.event-title{
    background:transparent !important;
    }

    /*Remove any category colors applied to text of entries*/
    .mc-main .event-title.event-title button, .mc-main {
        color: #313233 !important;
    }
Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.