Create an Event Calendar in React Using Schedule-X | Step-by-Step Tutorial

[@ironvocal]

this is what exactly i was looking for, also the todo follow up, thanks mate!

[@adam_frl]

thank you for the insightful tutorial! it really helped me get up and running with the calendar!👍👍👍

[@TomÖsterlund]

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

[@mahmoodtareq3520]

Thank you so much, Tom.
Very well Explained.

[@TomÖsterlund]

Glad you liked it!

[@feedback27]

worked! and its very informative

[@pathanfaizan4714]

On event click i want to open my custom model with my custom details what can i do? ?

[@TomÖsterlund]

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

[@shironeko1864]

How to in integration state by data call API bro?

[@TomÖsterlund]

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

[@ZainInam-h3q]

Can we send the mail to candidates like Google Calendar?

[@TomÖsterlund]

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

[@ZainInam-h3q]

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

[@PhuongNguyen-zf8wt]

what about when i get data from backend and set to events is it work ?

[@TomÖsterlund]

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

[@PhuongNguyen-zf8wt]

@@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

[@TomÖsterlund]

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

[@ngChinh04]

how can i change the detail of event when click on it? Tks

[@TomÖsterlund]

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.

[@PhuongNguyen-zf8wt]

and how to style event modal bro ?

[@TomÖsterlund]

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?

[@axellondas6297]

how to catch the case when i click on event ?

[@axellondas6297]

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 (

);
};
```

[@TomÖsterlund]

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

[@axellondas6297]

how to change event color ?

[@TomÖsterlund]

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

[@AaishaDev]

Can i have agenda view in this?

[@TomÖsterlund]

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

[@AaishaDev]

@@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

[@AaishaDev]

​@@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

[@TomÖsterlund]

@@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

[@AaishaDev]

@@TomÖsterlund Thankyou, it worked

[@yashkelhe376]

Bro use dark theme mode 🥲

[@TomÖsterlund]

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