วีดีโอ

Glad to hear Bilal!

Read about API, API integration and http

I don't yet, but I might very well do so soon, since I got a few requests for this :) When you dynamically add events from a backend, you definitely want to use the events service plugin though. It's documented at schedule-x.dev

Thanks :) you can use it in Nextjs! you will need to use useNextCalendarApp instead of useCalendarApp, and use the 'use client' directive, but other than that it should be the same

If you use yarn, you need to install peer dependencies manually. That goes for any software you install using yarn, not just Schedule-X. So you need to have a look at the peer dependencies of @schedule-x and install those

@@TomÖsterlund yaa i tried that. But the problem here it was saying to download @preact/signals which will cause entire disturbance in my codebase

Hey there! You can either create a form, or use the interactive event modal plugin. This can be found under the "plugins" section in the docs.

Glad to hear it helped you out:)

​@TomÖsterlund If you don't mind me asking: My events come from an API fetched with Tanstack Query. Do I have to use the existing useEffect hook for the calendar to render the events on the grid? Whilst the data is being fetched, the useEffect causes the calendar to be empty on first render. I had to work around it using Suspense.

@@Proateen That's a great question. I haven't yet used Schedule-X with Tanstack query myself yet. Would be happy to see your solution if you're open to share it somehow :)

@@TomÖsterlund ​ My comment with a link gets deleted. What I did was use useSuspenseQuery instead of useQuery. I also wrapped the calendar component in a Suspense. It's not a complete solution. There's still a bug on first render which can probably be fixed by wrapping the router element in Suspense instead of a component nested within the router element.

@@TomÖsterlund It's fixed now. I wrapped my Outlet component in a Suspense and combined that with the useSuspenseQuery within the actual component file that gets rendered in the 'main' area. I removed the useEffect block completely. The events array is now fully managed using React Query so no need for it, and the calendar should re-render when the data changes, but I haven't tested that yet lol

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: th-cam.com/video/kz3i5btkOKM/w-d-xo.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 🙂