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

How to display event's text while moving the event?

Asked by Naomi
1 year ago.

Hi,

I'd like to display even't text (or some text) on the indicator (the gray indicator, I'd like to use white text color on the gray background) to display some text (not necessary event's text).

How can I do that? I looked at the moving indicators example but this is for displaying dates right and left (in my case I may want to display time).

Thanks in advance.

Answer posted by Dan Letecky [DayPilot]
1 year ago.

You can set the inner HTML of the target position indicator using onEventMoving event handler - just set args.html as needed:

https://api.daypilot.org/daypilot-scheduler-oneventmoving/

Comment posted by Naomi
1 year ago.

Thanks, I'll try that.

Comment posted by Naomi
1 year ago.

Doesn't seem to work for me. I tried

onEventMoving(args) {
            args.left.enabled = true;
            args.left.html = args.start.toString("h:mm tt");
            args.right.enabled = false;
            const movingInfo = this.getBookingTitle(args.e.data);
           
            args.html = movingInfo ; 
        }

But nothing is displayed inside the grey moving indicator when I move the event.

Comment posted by Naomi
1 year ago.

How can I find out the version of DayPilot we're using and how exactly upgrade happens? In our project I found the min version of dayPilot.js and at the top I see
DayPilot Pro for JavaScript 2019.2.3871

Does it mean we're on the lower version?

Thanks in advance.

Comment posted by Naomi
1 year ago.

I tried with the latest version and it works, but the color inside doesn't seem to respect the white color I tried. E.g. this is my code:

dp.onEventMoving = function(args) {
         args.left.enabled = true;
            args.left.html = args.start.toString("h:mm tt");
            args.right.enabled = false;
            args.fontColor = "#ffffff";
            args.html = args.e.data.text ; 
            /* Does not work
            const movingInfo = this.getBookingTitle(args.e.data);
            
            */
    };

Do I need to actually add some sort of the real html to get the white color inside the grey?

Thanks.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

You can use real HTML or you can override the styles for ".scheduler_default_shadow_inner" class:

.scheduler_default_shadow_inner {
  color: #ffffff;
}

See also:
https://doc.daypilot.org/scheduler/css-classes/

Comment posted by Naomi
1 year ago.

Thanks, I'll try that. The demo version args.html works for me, but using the same code inside our application doesn't work and I can not figure out why.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

I'm not sure if this is the problem but inside onEventMoving "this" points to "dp". And that might not be what you want:

const movingInfo = this.getBookingTitle(args.e.data);
Comment posted by Naomi
1 year ago.

I actually verified that I did get correct info (I had event binding). But it didn't work with simple args.html = args.e.data.text ;
either.

I just added the style and I'm re-testing it again.

Comment posted by Naomi
1 year ago.

Success! With this new style added it shows up correctly (the text). I'll try my original movingInfo now.

Comment posted by Naomi
1 year ago.

Most likely with the default color it was just not visible. With white on grey it looks nice, IMHO. I also left it as e.args.text (no need in this case to make it too complex).

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Great, thanks for the update!

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