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

Questions Tagged react

Shift + select when multirange is active doesn't clear

Dear Daypilot-Support, I work as a developer for RTM Systems. When performing shift + select when multirange is active, the previous selection doesn’t clear properly. Please review the attached GIF. ...

onBeforeRowHeaderDomAdd disables expandable tree styles?

Answered: In the onBeforeRowHeaderDomAdd event handler, you can specify the target that of the custom element using the args.target property. By default, it is set to "Cell". In this case, it will overwrite th...

How to change the time frame to span from 9 AM to 9 PM only (React Scheduler)

Answered: If you use scale: "Hour", which displays one hour per cell, you can hide the non-business hours using the built-in mechanism. React example: import React, { useState } from 'react'; import { DayPilo...

Task time selection may get wrong then How to reselect it ,by deleting before task time in UI. And how to save it in server and local storage as data.

Hey!! Thanks for kind help by providing this doc. I have to customize it for purpose of self learning. Hope forums gonna help me out for this. Recently ,I have doubt which I posted “Task time selecti...

Custom Event Styling in React Scheduler

Answered: You can use the onBeforeEventRender event handler to customize the events. A sample implementation could look like this: onBeforeEventRender: (args) => { if(args.data.status === "completed") { ...

Calendar component renders "12AM" in all rows in resources mode

Answered: I haven't seen this problem before. Unless you are doing something special on onBeforeHourRender, it will be a problem with the compilation/minification performed by your version of React. React 15 w...

Quotation

Answered: It is only available as a package. You can find the pricing details at the Buy page (https://javascript.daypilot.org/buy/). If you have any questions regarding licensing or if you need a PDF quote, p...

How to load resources from an API and display them as rows in the scheduler?

Answered: You can load resources from an API like this: async componentDidMount() { const {data} = await DayPilot.Http.get(`/api/resources`); this.setState({resources: data}); } The returned d...

How to clear the previous event from calendar if the updated event list is empty/null?

Answered: Great, thanks for the update. In the latest sandbox build (2023.1.444), the Calendar component now accepts null as well and treats it as []: https://release.daypilot.org/changes/jslite/

How not to trigger onEventClicked after canceling onEventDelete (Calendar)

Answered: This is a bug of the latest release. It should be fixed now in the latest sandbox build (2023.1.443): https://release.daypilot.org/changes/jslite/ The fix will be included in the next official releas...

Show event bubble in Queue?

Answered: Event bubbles are now supported in the Queue component in the latest sandbox build (2022.4.5467): https://release.daypilot.org/changes/js/ You can use the standard API: https://api.daypilot.org/daypi...

How we can Update events coming from api response

Answered: I recommend checking the data that comes from the API endpoint - there might be a problem with the format (most likely the "start" or "end" properties).

Performance issue

Answered: Thanks for the update. To detect that a row has been rendered, you can use onBeforeRowHeaderRender event: https://api.daypilot.org/daypilot-scheduler-onbeforerowheaderrender/ You can also increase th...

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 (https://www.daypilot.org/customers/) 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 https://developer.mozilla.org/en-US/docs/Web/J...

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

Answered: You can use DayPilot.Row.events.forRange() method to get a list of Scheduler events for a specified time range: https://api.daypilot.org/daypilot-row-events-forrange/ 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: https://code.daypilot.org/61152/javascr...

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: https://api.daypilot.org/daypilot-navigator-show/ https://api.daypilot.org/daypilot-navigator-hide/

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): https://javascript.daypilot.org/demo/calendar/datepicker.html

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: https://doc.daypilot.org/menu/images/ 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 (https://api.daypilot.org/daypilot-scheduler-eventheight/) 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: https://npm.daypilot.org/ 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: https://code.daypilot.org/95340/react-activity-planning-system-node-express-postgresql 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: https://code.daypilot.org/77607/react-scheduler-tutorial The React version of the hotel tutorial is not available ...
Questions 1-30 of 52 Next