Our powerful JS Calendar component


[ANGULAR] How to change layout of all day event and keep the layout of eventRenderer?

Post Reply

Post by freePlusxx01 »

Hi.

My events which is not to the whole day are with this layout:
Image

But the layout of events which are to whole day are with the same layout:
Image

I used this code in property modes of Calendar:

modes: {
        year: false,
        month: false,
        week: false,
        agenda: false,
        day: {
            dayStartTime: 7,
            dayEndTime: 20,

        eventRenderer({ eventRecord }) {
            if (moment.duration(moment(eventRecord.endDate).diff(eventRecord.startDate)).asMinutes() >= 30) {
                return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 3px 10px 7px">
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between;">
        <div style="font-weight: bold">${eventRecord.name}</div>
        <div style="color: #818181; font-size: 12px; font-weight: 400">${eventRecord.category}</div>
        </div>
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
        <span style="padding: 2px 10px; background-color: #a8a7a7; color: white; border-radius: 11px; font-weight: 400; font-size: 13px;">${eventRecord.organizationName}</span>
        </div>
        </div>`;
            } else {
                return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 0px 10px">
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
        <div style="font-weight: bold; font-size: 10px">${eventRecord.name}</div>
        </div>
        </div>`;
            }
        }
    }
}

Do exists some property to control only layout of all day events in Angular?

Post by freePlusxx01 »

I did it, is only add this code to edit only layout of all day events:

modes: {
	day: {
            dayStartTime: 7,
            dayEndTime: 20,

        allDayEvents: {
           eventRenderer({ eventRecord }) {
               return `<div style="color: black; background-color: red;"> ${eventRecord.name} </div>`;
           }
        }
    }
   }
Post Reply