Our pure JavaScript Scheduler component


Post by udo »

hi,

is it possible to display all involved resources in an eventTooltip template?

note: to display the one assigned, I do this(simplified):

features: {
    ...
    eventTooltip: {
      template: data => `<dl>
        <dt>Assigned to:</dt>
        <dd>
          ${StringHelper.encodeHtml(data.eventRecord.resource.name)}
        </dd>
      </dl>`,
    },

thanks, udo


Post by marcio »

Hey udo,

We have https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#field-resources

So you can do something like (just as an example):

features : {
        eventDragSelect : true,
        eventTooltip    : {
            template : data => `<dl>
                <dt>Assigned to:</dt>
                <dd>
                  ${StringHelper.encodeHtml(data.eventRecord.resources.map(resource => resource.name).join(','))}
                </dd>
              </dl>`
        }
    },

Best regards,
Márcio


Post by udo »

nice! thank you marcio! (I also appreciate the docs link!)
note: I did not find element data.eventRecord.resources on console.log(). probably some magic involved :)

I now tried to iterate over the resources to display them in <div>s but they won't show. guess I'm missing something :|:

    ...
    template: data => `<div>
        <div>Assigned to:</div>
        <div>
            ${StringHelper.encodeHtml(data.eventRecord.resources.map(r => r.id).join(', '))}
        </div>
        <br>
        <div>Assigned to:</div>
        <div>
            <strong>No show :|</strong>
            ${data.eventRecord.resources.map(r => {
                `<div>${StringHelper.encodeHtml(r.name)}</div>`
            }).join('')}
        </div>
    </div>`,
    ...

Image

do you have a suggestion how to get it to work?

thanks, udo


Post by marcio »

Hey udo,

In the second resources.map, you have {} but you don't have a return statement, that's why is not working, if you remove the {} or add a return statement, it works

<div>
	<strong>No show :|</strong>
	${data.eventRecord.resources.map(r =>
		`<div>${StringHelper.encodeHtml(r.name)}</div>`
	).join('')}
</div>

or

<div>
	<strong>No show :|</strong>
	${data.eventRecord.resources.map(r => {
		return `<div>${StringHelper.encodeHtml(r.name)}</div>`
	}).join('')}
</div>

Best regards,
Márcio


Post by udo »

thank you marcio. yes. apologies for this :|


Post by udo »

sorry marcio for bugging you with the following :| (in the same context)

is there a possibility to order the resources alphabetically (by key name)?

I tried the following without success:

${data.eventRecord.resources.sort((a, b) => (a.name > b.name)).map(r => `<div>${StringHelper.encodeHtml(r.name)}</div>`).join('')}

Image

note: guess that data.eventRecord.resources is immutable and is not changed.


Post by alex.l »

Why don't you try to sort after map ?

All the best,
Alex


Post by alex.l »

Btw, template is a method. So you can add more code before return template code and do whatever you need.

All the best,
Alex


Post by udo »

I first have to sort and then map (output the result). otherwise it is not working... (or I misunderstood what you mean)

I would like to implement similar to this -> viewtopic.php?p=117206#p117206

if there are alternatives how to do it, an example would help...

thanks, udo


Post by marcio »

Hey udo,

You're looking for this to sort it

${
data.eventRecord.resources.sort(
	(a, b) =>  a.name.localeCompare(b.name)
).map(r =>
	`<div>${StringHelper.encodeHtml(r.name)}</div>`
).join('')
}

Best regards,
Márcio


Post Reply