asantibanez / livewire-calendar

Laravel Livewire component to show Events in a good looking monthly calendar
MIT License
907 stars 233 forks source link

Any way we can pass events or model to the component ? #33

Open skakrecha opened 2 years ago

skakrecha commented 2 years ago

I am using it in a list view of users to view calendar for each users , i am thinking if we can pass events or model to the component rather than loading in the component.

lrljoe commented 2 years ago

You can use the mount function to load the data in, and then return the collection in the events () function.

Robert95th commented 2 years ago

You can use the mount function to load the data in, and then return the collection in the events () function.

is it possible for you to elaborate more on how we can pass data to the events method

lrljoe commented 2 years ago

Sure, in your events() function you'd end up with something like this, where you utilise the map function to connect your fields. For example, for a TaskItem model with a start_date, end_date field for the dates, and a title, description, and user_id field, you'd be looking at something like the following:

return TaskItem::query()
->whereDate('start_date', '>=', $this->gridStartsAt)
->whereDate('end_date', '<=', $this->gridEndsAt)
->where('task_list_id', $this->tasklistid)
->orderBy('start_date')
->get()
->map(function (TaskItem $taskitem) {
    $start_date = Carbon::parse($taskitem->start_date)->format('H:i');
    return [
        'id' => $taskitem->id,
        'title' => $taskitem->name,
        'description' => $taskitem->description,
        'user_id' => $taskitem->user_id
    ];
});

You can then reference these mapped fields in your calendar.

Robert95th commented 2 years ago

Thanks found a way by passing it into the livewire component the same was you pass the year and month

sanderdewijs commented 2 years ago

You can pass the ID of the model to the $extras property. :extras="['modelName' => $model->id]"

In your AppointmentCalendar component you can get the $extras property in the afterMount($extras = []) method. Inside the afterMount method you can then retrieve your model and set it on a public property of the component.