search envelope-o feed check
Home Unanswered Active Tags New Question

Questions Tagged react

How to install DayPilot Pro & use in React code

Answered: Hi Shruti, Thank you for choosing DayPilot Pro! You can get a NPM link for a trial version here: The following documentation page describes how to start using the Scheduler ...

Dragging events out of loaded date range leads to errors or losing duration

Hi everyone, I have trouble with my Scheduler when dragging events out of the loaded time range using infinite scrolling. So I'm starting with a range of multiple months around "today" loaded and dra...

Non-reproducible problems with converting some "YYYY-MM-DD" date strings to DayPilot.Date

Answered: The following object: { "Global": {...}, "isKhtml": true, "isIE": false, "isIEQuirks": false, "browser": {...}, "libs": {...}, "touch": {...}, "Stats": {...}, "Util": {...}, "Areas": {......

want to create 'html5-hotel-room-booking-react-node-mongo'

Answered: To learn how to use the Scheduler component with Node.js please see the following tutorial: Also, please note th...

Need html5-hotel-room-booking-javascript-php in react version

Answered: To learn how to use the React Scheduler component please see the following tutorial: The React version of the hotel tutorial is not available ...

daypilot-pro-react package is free for React Calender Component?

Answered: Yes, the "daypilot-pro-react" package is paid. If you are looking for the free package, take a look at "@daypilot/daypilot-lite-react": The...

Change Arrow Icon on Links

Answered: The link arrows are 6px * 6px elements marked with the following CSS classes: scheduler_default_link_arrow_right scheduler_default_link_arrow_left scheduler_default_link_arrow_down scheduler_default_...

this in undefined in the addEvent example

Answered: This hint is correct, you can't use "this" in a functional React component. You'll need to create a variable instead: const Scheduler = () => { let scheduler: DayPilot.Scheduler; return...

UndoService in reactjs

Answered: Please see the following tutorial:

Multirange selecting in react disapears when you set the state of the component

Answered: The time range selection is not part of the Scheduler state and it will get cleared on update.

Features available for react js schedular

Answered: All DayPilot Pro for JavaScript features are available in React as well. To learn more about event editing, please see the following documentation page:

Server Side Rendered React throws `navigator is not defined`

Answered: Unfortunately, server-side React rendering is not supported.

unexpected scroll on init | incorrect onScroll behavior |infinity scroll loop

Answered: You must not assign the events attribute in onScroll. This causes the change detection mechanism to refresh the Scheduler and fire another onScroll event. See also a related question (it's for Angula...

how to delete link

Answered: You can delete a link using the api: Users can delete a link using a context menu:

Export Scheduler Data

Answered: The best way to export the data is to use the events.list property: The Scheduler updates this array with all changes made using the UI (event...

How to add more fields when creating events

Answered: You can use DayPilot.Modal to display a custom page. This approach requires that this page interacts with the server directly. You can find an example in the following tutorial: https://code.daypilot...

adding columns

Answered: If you mean the row header columns you can change them using "rowHeaderColumns" property. In React, you can use rowHeaderColumns attribute of the <DayPilotScheduler> tag. See also: https://doc.daypil...

Synchronizing Scheduler data

Hello, I am trying the library for my company. There is one specific requirement that is being able to have a window with several schedulers, and at the latest position, one readonly scheduler with t...

JSX support for corner html in react

Answered: The same mechanism (onBefore*DomAdd event) is supported for event and time header cells as well. Please see the following tutorials: Rendering JSX in events:

React scheduler executes something despite props not being updated

Answered: Unless something significant has changed in React with the introduction of state hooks, it works like this: React uses a single immutable state object to store the state items. Whenever you change an...

Setting custom html for time header in react

Answered: You can insert a React component using onBeforeTimeHeaderDomAdd: onBeforeTimeHeaderDomAdd: args => { args.element = <jsx>; } See also a related tutorial (on rendering JSX components in row heade...

How to configure the API key

Answered: You need to activate the React package in the customer area ( You'll be able to get a npm installation link there as well.

Add possibility to group resources

Answered: Unfortunately, this is not possible at the moment. However, it may appear in one of the future versions.

onScroll callback doesn't work

Answered: The onScroll event is only fired if dynamic event loading is enabled ( You can hook the "scroll" event directly like this: dp.nav.scroll.a...

How do I can drag and prop some react component on the scheduler ?

Answered: There is now a new tutorial available that shows how to drag external items to the Scheduler in React:

Using cellDuration with business hours

Answered: The cells defined using cellDuration (or other scale types as well) will always start at 00:00 and the start won't be affected by the businessBeginsHour property. In fact, businessBeginsHour works be...

Regarding the "Demo" text

Answered: Yes, this is a trial version. The trial period is 60 days. If you want to use it after the trial period you need to purchase a license:
Previous Questions 31-57 of 57