Using Icons in Content blade

[realknotworking]

I'm using the Guava Icon-Picker (awesome & super-easy plugin), but I can't figure out how to make the icons show up on the calendar. I'm sure it's my naive understanding of blades, but all my tweaks fail. How would do something like this?

<div class="flex flex-col items-start">
    <x-icon name="event.extendedProps.icon" />
    <span x-text="event.extendedProps.time"></span>
   <strong><span x-text="event.title"></span></strong>
</div>

[lukas-frey]

Yeah you cannot do that this way.

Blade is rendered on the server, whereas the data from the calendar is client side, thus is processed AFTER blade was already compiled.

What you can do though is render the icon directly on the server in your toEvent method of your model and store the complete SVG in an extendedProp instead.

This will increase the payload of each event though, so keep that in mind so it doesn't slow your app too much.

I'm on the phone now, I can send an example later

EDIT:

In your model's toEvent method you could do something like this:

public function toEvent(): Event|array {
    return Event::make($this)
        // All your other settings
        ->extendedProp('icon', svg('your-icon-name-here')->toHtml())
        ;
}

Then in your blade file, you should be able to do something like this to render the icon:

<span x-html="event.extendedProps.icon"></span>

[realknotworking]

Thank you Lukas, that makes it clear.
I am building out the app/models as I go, so I'm just quickly adding calendar events via a getEvents array (rather than using the toEvent funtion in the model) until I get all the functionality added. This works for me (though the blade/span needed some tweaking):

public function getEvents(array $fetchInfo = []): Collection | array
    {
        if (isset($this->record->id)) {

            if ($this->record->form->staffable) {
                $days = $this->record->daysJobrequests;
            } else {
                $days = $this->record->days;
            }

            $daysarray = [];

            foreach ($days as $d) {
                $daysarray[] = [
                    'id' => $d->id,
                    'start' => $d->date . ' ' . $d->starttime,
                    'end' => $d->date->addDay(1) . ' ' . $d->endtime,
                    'title' => $d->quantity . ' ' . $d->label,
                    'extendedProps' => [
                        'model' => Jobrequest::class,
                        'key' => $d->id,
                        'icon' => svg($this->record->form->icon)->toHtml(),
                        'time' => $d->start . ' - ' . $d->end
                    ],

                ];
            }

            return $daysarray;
        } else {
            return [];
        }

    }

[lukas-frey]

Yeah I didn't test it. Glad it worked it out!

You should be able to create and use the Event Object even in this getEvents method if you prefer it though instead of a plain array (for auto complete hints etc.)