Is there an easy way to add a border to calendar events?

In the monthly calendar view, each individual event does not have a border - is there an easy way to add one?

I had a quick look at the css files, but I wasn’t sure which option would address this…


This is clearly the wrong thing to do, but in



EventRenderer.prototype.getBorderColor = function (eventDef) {^M                                                          
    var objs = this.getStylingObjs(eventDef);^M                                                                           
    var i;^M                                                                                                              
    var val;^M                                                                                                            
    for (i = 0; i < objs.length && !val; i++) {^M                                                                         
        val = objs[i].eventBorderColor || objs[i].eventColor ||^M                                                         
            objs[i].borderColor || objs[i].color;^M                                                                       
    if (!val) {^M                                                                                                         
        val = this.opt('eventBorderColor') || this.opt('eventColor');^M                                                   
    return val;^M

with a return value of your favorite color, for example

return '#828c95';^M

Of course, you have to change this in vendor.min.js for it to actually work…


Thanks to tcit on irc:

Install the Custom CSS app, then under Theming add the following to the Custom CSS box:

.fc-day-grid-event {
border-color: #828c95 !important;