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

Questions Tagged react

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

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": https://www.npmjs.com/package/@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: https://code.daypilot.org/30113/react-scheduler-how-to-enable-undo-redo

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: https://doc.daypilot.org/scheduler/event-editi...

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: https://api.daypilot.org/daypilot-gantt-links-remove/ Users can delete a link using a context menu: https://doc.daypilot.org/gantt/link-deleting/

Export Scheduler Data

Answered: The best way to export the data is to use the events.list property: https://api.daypilot.org/daypilot-scheduler-events-list/ 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: https://code.daypilot.org/50584/react-sch...

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 (https://www.daypilot.org/customers/). 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 (https://doc.daypilot.org/scheduler/dynamic-event-loading/). You can hook the "scroll" event directly like this: dp.nav.scroll.a...
Previous Questions 31-60 of 63 Next