How to add Customized Css properties to the Events list (present below of event calendar) of day to day events

I want to add a new column to display an additional info to events listed below if a day selected in Event calendar.

By default gradient will have the Timestamp,a divider(Line-color variable on event type), Description of event. ( Default gradient looks like–“All-day | Description…”)
I want to change gradient like this “adding a column(small block of 2 letters or a thick colored line varies on event type. ), Time stamp,divider(line), Description of event” .( I want to make it look like this – " ‘AB’ All-day | Description")…

Thanks in advance…

Hi Dinesh,

I created an example for something like you described:
Custom event:

{
  d: new Date(),
  text: '<div class="my-block">\'AB\'</div><div class="my-desc">Description</div>',
  color: 'orange'
}

Based on this example, you can create your own styling using the following classes:
.my-block - your small block of 2 letters
.my-desc - your description
.mbsc-event-time - time stamp
.mbsc-event-color - divider

Example for the styling:

    /* position the block */
    .my-event-cal .my-block {
        position: absolute;
        left: 14px;
    }
    /* leave space for the block */
    .my-event-cal .mbsc-event-time {
        margin-left: 15px;
    }

Thanks gabi,

First of all thanks a lot for help, I have not implemented it but will try and update it soon.
I have raised an other query topic name-- “Events label not properly Working on month calendar” Could you please help me out of that… Thanks in advance.

Hi gabi,

I have tried it , Sorry I may have not expressed properly … My requirement is like below screenshot. Is there any way to achieve it… I want to add that color stripes for every events where the colors are variable depending on type of events

image

Hi Dinesh,

Thank you for the specifications!
Please see the example below:

cssClass: 'my-event-cal',
data: [{
	d: new Date(),
	text: '<span class="my-divider"></span><span class="my-desc">Description for all day event</span>',
	color: 'orange'
}, {
	d: new Date(),
	allDay: true,
	text: '<span class="my-divider"></span><span class="my-desc">Simple description</span>',
	color: 'purple'
}]

.my-event-cal .mbsc-event-time {
    margin-left: 10px;
    font-size: 16px;
    min-height: auto;
    width: 80px;
}

.my-event-cal .mbsc-event-color {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    margin: 6px 10px;
}

.my-event-cal .my-divider:before {
    content: '|';
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}

.my-event-cal .my-desc {
    font-size: 16px;
}