Questions Tagged react
List view for calendar
Answered: You can use the Queue component to display a list of events. As a bonus, they will be draggable to the Scheduler. You can see a demo here.
utiliser le local storage
Answered: Yes, this example focused on the configuration of the React calendar on the client side (installation, changing the date, customizing appearance, …). In a standard application, you will need to conne...
Wrong className for DayPilotMonth component
Answered: You may be overlooking something. The DayPilotMonth React component indeed uses the ”month_default” CSS theme. You can check it by inspecting the DOM elements in the JavaScript demo, You can apply a ...
dropdown in progress bar
Answered: You can add custom objects (icons, etc.) to the row header columns using active areas. To add an active area, use the onBeforeRowHeaderRender event handler: onBeforeRowHeaderRender = (args) => {
...
DayPilot Month - RTL
Answered: It was almost ready - the RTL support is now available in the latest sandbox build (2024.3.5979). You can get the sandbox React package at npm.daypilot.org. See also a live demo in the sandbox: Month...
Modifying RTL according to locale
Answered: Unfortunately, RTL is not supported in the Lite version at the moment.
Jalali Calendar
Answered: The calendar works with a Gregorian calendar internally, and the Jalali/Shamsi calendars are not directly supported. However, in the resources view, the calendar shows just a single day and the date ...
weekStarts property non-functional in DayPilotCalendar
Answered: At this moment, the weekStarts property is not available in the Lite version. However, you can set a custom week start using the locale property. If there is no built-in locale that meets your needs,...
Resources Calendar does not schedule events at all
Answered: Hi Samir, With the following setup, the resource calendar will display one day on the vertical axis. As the startDate is not specified, it will use the current day for all columns/resources. <DayPilo...
Inconsistent type definition of events in CalendarConfig and MonthConfig (Daily/Weekly Calendar view vs Monthly Calendar view)
Answered: > in MonthConfig it is defined as “events?: EventData;” This was incorrect, and it has been fixed now in the latest release. > CalendarConfig contains a definition for the function overload “remove(i...
Modal Button Order
Answered: The button order is fixed but you can change it using custom CSS: .modal_default_buttons {
display: flex;
}
.modal_default_ok {
order: 2;
}
.modal_default_cancel {
order: 1;
}...
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...
Questions 1-30 of 63
Next