Видео

You can create a custom component where you override the HTML of the event. I made another tutorial for how such custom events work here: ruclips.net/video/kz3i5btkOKM/видео.html

thanks a lot :)

There is a plugin called the events service, with which you can add data after having rendered the calendar: schedule-x.dev/docs/calendar/plugins/events-service

This is a frontend component, so it does not deal with mailing or any other backend tasks

@@TomÖsterlund Got it. Thanks for the reply

In Schedule-X there is a feature called custom components, with which you can inject your own custom React components. It's documented here: schedule-x.dev/docs/frameworks/react#custom-components Using that feature you can create your own custom modal

Which callbacks do you mean? Did you try adding events directly in the configuration object?

Yes! there is an agenda view. The function you need to import is called `createViewMonthAgenda`

@@TomÖsterlund I've already added this function, but in the I only see three views which is day, week and month I'm using Reactjs, I really need to implement agenda view, will you please help

​@@TomÖsterlund I've already added this function, but in the UI I only see three views which is day, week and month I'm using Reactjs, I really need to implement agenda view, will you please help

@@AaishaDev I see! The month agenda view was initially thought to be the mobile version of the month view, so it is only visible by default when the calendar is not so wide. You can override this behavior by doing this: const agenda = createViewMonthAgenda() agenda.hasWideScreenCompat = true

@@TomÖsterlund Thankyou, it worked

You can either just write your custom style overrides for this, or you can even replace its content by using custom components. Custom components is a feature of the framework adapters (like for Vue, React, Angular etc.). Are you using any of those?

Sure thing! You can achieve this with the events service plugin. It's documented under "plugins" in the docs

@@TomÖsterlund i wish you will make this kind of tutorial in the future (generate data schedule from an api). It will contribute your commiunity so much

@@PhuongNguyen-zf8wt any specific type of API you have in mind?

There is a callback option that you can add in the config called `callbacks.onEventClick`, which takes the the clicked event as it's only parameter.

never 😃 I switched 3 years ago and just love working in light mode

Thank you so much! Means a lot coming from someone with your XP 🎉

Glad you liked it!

Thanks a lot! Glad you liked it 😊

For this you can use the "calendars" feature: schedule-x.dev/docs/calendar/calendars

2 and half after reading the doc i found the way you have to use callbacks this is the code ```jsx export const Calendar = () => { const onEventClick = useCallback((event) => { console.log('Event clicked:', event); // Add your custom logic here }, []); const calendar = useNextCalendarApp({ views: [createViewMonthGrid(), createViewMonthAgenda(), createViewDay(), createViewWeek()], events: [ { id: '1', title: 'Event 1', start: '2023-12-16 10:00', end: '2023-12-16 12:00', }, ], selectedDate: '2023-12-16', callbacks: { onEventClick, }, }) return ( <div className=""> <ScheduleXCalendar className="" calendarApp={calendar} /> </div> ); }; ```

You can add a `callbacks` section to the config object, and then add a callback `onEventClick`: schedule-x.dev/docs/calendar/configuration

Glad to hear it was helpful! Hope the calendar can be of good use to you 🙂