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!

[@TomÖsterlund]

glad to hear!

[@IroshanaRavishan]

Wonderful video. thanks for sharing!

[@MindPuzzleDev]

That is great ser

[@TomÖsterlund]

thanks :)

[@kzcciynk]

Thank you great video and beautifully explained ❤❤

[@mahmoodtareq3520]

Thank you so much, Tom. Very well Explained.

[@TomÖsterlund]

Glad you liked it!

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

[@michalhazan839]

Great video short and easy ti understand. can you do another one with the option of user to add events (save in local storage)?

[@The-sound-of-silence]

Thank you so much you've got a new subscriber! I just started working with Next-js, my question is: can I implement it in my Next-js app or do I have to use react only?

[@TomÖsterlund]

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

[@kzcciynk]

If event is updated by drag and drop how will the the event be permanently updated on backend ? Is there a react hook to send a post request to update the event start and end time ?

[@TomÖsterlund]

You can use the `onEventUpdate` callback for this: schedule-x.dev/docs/calendar/configuration

[@kzcciynk]

@@TomÖsterlund thank you

[@feedback27]

worked! and its very informative

[@hamdanzubair2278]

how to include include horizontal scrolling for movig to previous and upcoming dates?

[@TomÖsterlund]

Not possible yet. I'd be open to PRs for it though!

[@hamdanzubair2278]

@@TomÖsterlund is there any other library for it?

[@alperenbaytimur]

sir 1 question, do you by any chance also have a video about how we can combine our backend program with the frontend which was created ?

[@faizanurrahman6921]

Read about API, API integration and http

[@TomÖsterlund]

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

[@RusseanMoñeva]

how do you get the event from drag and drop plugin?

[@TomÖsterlund]

You need to use the `onEventUpdate` callback. You can find out how to use it here: schedule-x.dev/docs/calendar/configuration

[@sementerehov]

Is there a way to put a link into Calendar Event so that user can click and be directed to meeting quickly

[@TomÖsterlund]

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: kzbin.info/www/bejne/oauWmmiYqdCCga8

[@AngelDobaron]

Strange enough using this code i and the one on t the doc it shows dates for 2023 only. if i create an event for today i dont see anything on the calendar.

[@manojb1606]

Hi, After Watch these vide i tried to use the same library in current existing project. I used Yarn instead of npm, but during the rendering i was getting errors which was related to preact. I found out the these was used by schedule-x as replacement of react. How should i over come these

[@TomÖsterlund]

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

[@manojb1606]

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

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

[@jonathanpuente2255]

thank you!

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

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

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

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

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

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

[@MubashraFatima-e2w]

you are pro

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

[@yashkelhe376]

Bro use dark theme mode 🥲

[@TomÖsterlund]

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