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

Questions Tagged react

Performance issue

Hello, we have problem with performance. We figure it out, if we add custom config it's more slower than we expect. The main problem we have with this config: // progressiveRowRenderingPreload:...

onBeforeCellRender loading after trigger click

Answered: At this moment, the React Scheduler will always update on state changes. This is a design decision and the alternative would be to perform a deep comparison of the current/previous props. The props c...

How to use the daypilot pro javascript license after purchase?

Answered: After purchase, you will receive login details for the customer area ( where you can get a special NPM link which you replace in your package.json.

OnEventMove waiting on modal response -- cancel response breaks scheduler

Answered: By calling setTimeout() in onEventMove you create a new JavaScript message that will be processed later as the JavaScript event loop continues (see also

how to find how many events we have in single cell (Scheduler)?

Answered: You can use method to get a list of Scheduler events for a specified time range: You can also assign custom utili...

how to connect function keys with functionalities?

Answered: You handle shortcuts by adding a simple "keydown" event handler to your application: document.addEventListener("keydown", e => { if (e.key === "F2") { // do something } });

how to wrap the text in the cell while printing the scheduler?

Answered: The text doesn't wrap automatically during export but you can use '\n' in the "text" property or "<br>" in the "html" property to insert line breaks. See also:

How to handle object data inside html property in the Scheduler?

Answered: In React, the "html" property supports a string with HTML, but not JSX. You can use JavaScript template literal (with backtick quotes) to insert variables into the HTML string. However, remember that...

How to show and hide the daypilot navigator ?

Answered: You can use the show() and hide() methods of the DayPilot.Navigator instance:

How to convert <DaypilotNavigator/> into icon ?

Answered: Here you can find a JavaScript demo that binds a DatePicker popup to a specified target (a <span> element in this case):

image is not coming properly in Context menu.

Answered: When using the default theme, there is a space for a 16x16 pixel icon on the left side: In your screenshot, this space is not available. It looks like you might ...

How can i add multiple events in single cell?

Answered: Each event is displayed at a location determined by its start, end and resource id. If you want to display multiple events in the same cell, use the same "start", "end", and "resource" values.

how to increase the size of cell if we have long text?

Answered: The event height is always fixed. You can increase it globally using the "eventHeight" property ( or per event using the "height" property of ...

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...
Questions 1-30 of 40 Next