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

Event calendars & schedulers
1

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…

2

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;
    }
3

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.

4

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

5

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;
}
6

Hello gabi,

I have tried using the above code. It’s not working as expected.When I follow the exact code. then it was looking like below Image.Here the color of divider is changing but, it should not vary.Instead of that a color block should be appeared at starting of the Event

image
image730×107 1.43 KB
.

But I need as

image

7

Hi Dinesh,

Didn’t you forget to add the custom class to your eventcalendar: cssClass: 'my-event-cal'?