Modify event list template in event calendar?

Event calendars & schedulers
1

I want to use completely different design for eventList that uses cards… Right now I am solving it by turning off eventList and use onDayChange to get events for that day

    onDayChange: (event: any) => {
      this.selectedEvents = event.events;
      console.log(this.selectedEvents);
    },

and use selectedEvents to create my list. The problem is that on load I can’t get events for that day and when I scroll to the next month I don’t know how to get events for selected date. It returns only date.

The problems I have work perfectly fine in default eventList. Is there a way to change a template of the eventList?

Look at the attachment to see what I want to achieve.

00%20AM
00%20AM760×1374 89.2 KB

Thanks.

2

Hi Nikola,

You can use the onSetDate event, which will fire on initial run, month change, and day click as well.
However you don’t get the event list is not provided here, like inside onDayChange, but you can retreive the events using the getEvents method:

    onSetDate: (ev, inst) => {
        this.selectedEvents = inst.getEvents(ev.date);
        console.log(this.selectedEvents);
    }

About the eventList customization: currently the template cannot be changed, but you can pass html markup inside the event’s text property:

{
  start: '2018-11-23',
  end: '2018-11-25',
  text: '<div class="my-event-title">Event title</div><div class="my-event-desc">Event description</div>',
  color: 'red'
}

This is a static html string only, so you cannot use Angular syntax (binding, components, directives…) inside.
The default event time and event color will still appear, you can either override the styling, or set it to hidden from css.

Let me know if this helps!

3

Thank. I made it to work