search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to change opacity of the backcolor of the event?

Asked by Naomi
2 years ago.


I have the following problem. I want to move my events to a "clipboard". I added a right click menu 'Add to clipboard' and have this implemented. However, when I move to the clipboard and update some of my data properties of the event, I want to change the appearance of that event on the schedule. I want to reduce the opacity of the backcolor to 40%.

I tried to search through documentation but didn't find anything. Do you know how can I achieve the desired functionality?

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You can add a custom CSS class to the event using cssClass property of the data object:

// e is the DayPilot.Event object
// dp is the DayPilot.Scheduler object = "semi-transparent";;

See also:

Comment posted by Naomi
2 years ago.

I tried that with no effect, then my colleague used e.client.cssClass and which worked. Also, he created new class - do I understand correctly that it was not a name of the actual class, but just a suggestion?

Comment posted by Dan Letecky [DayPilot]
2 years ago.

It's not necessary to call notify() but it is necessary to define the CSS class. That was just an example that shows how to assign a custom class to the event. The scheduler only defines classes that are part of the default theme (starting with "scheduler_default").

An example definition would look like this:

.semi-transparent {
  opacity: 0.4;
Comment posted by Naomi
2 years ago.

Thanks, Dan. It all works nicely now. I misunderstood your original suggestion and thought the Pilot already had its own css file. I then searched our project and found this not to be the case (but my colleague already created new css with several custom classes).

The other difference is that he used e.client instead of

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.