Copy link to clipboard
Copied
I've been able to customise the Calendar but I'm trying to differentiate between an Event item and a News item. Both items provide a class="events" which isn't useful to show the difference between the two types of items on the calendar.
Is there a way around this just to show Event items with a yellow background and News items with a blue background. I can't find other properties within setup to separate the two.
Any help would be appreciated.
Cheers.
Copy link to clipboard
Copied
There's no way to do that currently with the out-of-the-box Event and News Calendar. Your best bet would probably to use some javascript/jQuery to add a class yourself depending on the URL of the item. Typically, events will start with a URL of /BookingRetrieve.aspx and news items will have a URL that starts with the base URL you setup for your news posts ("announcements" or "news" etc.). So, since you cannot currently change the URL prefix of the events like you can for News module, we'll just check all the links on in the calendar and if they start with "/BookingRetrieve.aspx" we'll give that table cell a class for events and if not, we'll give it a class for news so that you can use CSS to target it.
Here's the javascript that you should put in between some SCRIPT tags AFTER your module is rendered on the page:
(function($) {
var links = $(".module-calendar a.event");
links.each(function() {
var url = $(this).attr("href");
var parentTD = $(this).parents("td");
if (url.match("BookingRetrieve.aspx")) {
parentTD.addClass("event");
} else {
parentTD.addClass("news");
}
});
})(jQuery);
That jQuery script should add the classes to your TD element that holds your links to the news or event. Once those are in place you can add some CSS to your screen.css file that will target those new classes we just added:
table.module-calendar td.event {
background: lightyellow;
}
table.module-calendar td.event span {
background: yellow;
}
table.module-calendar td.news {
background: blue;
}
table.module-calendar td.news span {
background: lightblue;
}
You can, of course update the colors to something more specific as those are base CSS colors and not necessarily what you want but once the javascript adds the classes you can target CSS rules for the TD or spans within them or anything else in that TD.
Copy link to clipboard
Copied
Thanks, @thetrickster888! I was recently research the same issue and your jQuery script worked perfectly. However, I found it modifies the style tags of the rendered HTML a bit differently. The following CSS will work:
table.module-calendar td ul li a.event {
[your-desired-styling]
}
table.module-calendar td ul li a.event span {
[your-desired-styling]
}
table.module-calendar td.news ul li a.event {
[your-desired-styling]
}
table.module-calendar td.news ul li a.event span {
[your-desired-styling]
}