Customizing schedule event card

Scheduler
#1

image

My requirement is to add this colored dot as per the color from backend.How can I add this dot as per the image.How can I customize the card?

#2

Hello @Sreejith_Ajithkumar ,

My requirement is to add this colored dot as per the color from backend.

You can save required color as a custom property of the event, like: dotColor: red, or create your own logic of receiving colors from the backend.

Here is example of event’s data:

	{ "dotColor": "red", "id":1, "start_date": "2020-06-29 09:00", "end_date": "2020-06-29 12:00", "text":"Front-end meeting"},

How can I add this dot as per the image.How can I customize the card?

There are the two ways to achieve the requirement. The first one(and the easiest) to add it as an HTML structure to the event_text template:
https://docs.dhtmlx.com/scheduler/api__scheduler_event_text_template.html

The code may look like follows:

// CSS part
  .evCont{
      display: flex;
      flex-direction: row;
  }
  .evImg {
      width: 30px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
  }

//JS part
scheduler.templates.event_text=function(start, end, event){
    return `
    <div class="evCont">
        <div>
            ${event.text}
        </div>
        <div class="evImg" style="background-color:${event.dotColor}"> 
        </div>
    </div>`
    ;
}

Here is a demo(HTML and JS parts):
https://snippet.dhtmlx.com/brgpjaz0

In case if you want to add img instead of colored div, the logic will be the same - you can just save img source in the event's data, and insert the image as HTML element to the event_text template.

The second option, is to create a completely custom event card with the required structure, as described by the following link:
https://docs.dhtmlx.com/scheduler/custom_events_display.html

1 Like