Questions Tagged how-to
How to change css and html of Daypilot
Answered: You can use custom CSS easily - the best way is to generate a calendar CSS theme online. You can modify it manually as needed. In the open-source version, you can customize the inner HTML of events, ...
How to add "day of week" to the time header day
Answered: You can customize the calendar column headers using the onBeforeHeaderRender event handler: const calendar = new DayPilot.Calendar("calendar", {
// ...
headerHeight: 50,
onBeforeHeaderRender...
Calendar events are not aligned when on the same line
Answered: It looks like this is caused by the custom CSS theme that you are using. I recommend checking the margins, padding, etc. If the purpose of the CSS modification was to create a free space next to the ...
Adding Holidays on for ASP.NET tutorial
Answered: In ASP.NET WebForms, you can indeed use the BeforeCellRender event. You just need to check whether the current cell falls on one of the defined holidays. Example: // Define an array of holidays
priv...
UpdateWithMessage change color MessageBox from behind
Answered: It is not possible with UpdateWithMessage() but you can use Update() to send custom data to the client and display the message bar using JavaScript using a custom CSS class. Hashtable ht = new Hashta...
How to show read only calendar
Answered: Yes, you can disable event moving using the eventMoveHandling property: {
eventMoveHandling: "Disabled",
// ...
}
Same day same time events are overlapping
Answered: Please take a look at this page: Exact Event Duration Let me know if this is not what you are looking for.
Background Color Time Wise
Answered: You can take a look at this tutorial: JavaScript Scheduler: Disabling Custom Date/Time Ranges It explains how to set color for custom time segments in the Scheduler.
Business DAYS
Answered: You can use someting like this (using the options syntax): const calendar = new DayPilot.Calendar("dp", {
onBeforeCellRender: args => {
const nonBusinessDays = [4, 5, 6, 0];
if (no...
Calendar code in Composition api
Answered: You can take a look at the following tutorial which uses the Composition API in Vue: Vue Resource Calendar (Open-Source)
Missing daypilot-react.min.d.ts declaration file in NPM package?
Answered: Seems like they added it several hours after I posted this. This is resolved and everything works perfectly!
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;
}...
Can event area support multiple actions?
Answered: Since version 2024.2.5956, the active area will display a bubble if you specify the bubble property, regardlesss of the action value. Another option is to use the following event handlers, which are ...
How to Maintain Values in the Header During Horizontal Scroll?
Answered: When the time header cell is partially hidden, the Scheduler adds a special overlay with the default cell content (it’s called a floating time header). You can turn it off using the floatingTimeHeade...
Is it possible to Spread the left area of the gantt chart to maximum width?
Answered: Unfortunately, this is not possible.
Add Icon to modal confirm buttons
Answered: You can use custom CSS theme that will display your images in the buttons (using background-image style). The buttons are marked with the following CSS classes: modal_default_ok modal_default_cancel ...
area bubble
Answered: This is fine. I assume that you have defined the area position and dimensions (left, right, etc.). I have tested your code in the Scheduler and the only problem is that if you also have an event bubb...
Remove or Highlight the holidays on the Event
Answered: The eventMovingSkipNonBusiness property affects the drag and drop behavior over the non-business time segments. The mechanism is explained in the JavaScript Scheduler: Skip Non-Business Cells during ...
Remove or Highlight the holidays on the Event
Answered: I am trying to highlight or cut the holidays on the event itself
Change Time Header Vertical Grid lines style
Answered: You can use the following CSS: .scheduler_default_timeheadercol_inner {
border-right-width: 4px;
}
Using Row Spans for Resource Names in Tabular Mode
Answered: To implement this, you can use the split resources feature:
How to resize row header column on touch devices
Hello, Can the width of the Scheduler's Row Header Column be configured to allow resizing on touch devices? Additionally, when rowHeaderScrolling is set to true and the splitter is displayed, is it p...
onBeforeEventMoving
Answered: That’s a typo. The event is called onEventMoving. There should be no problem using it to clear the selection.
Is there any way we can hide the right side of the gantt chart
Answered: The Gantt chart component is not designed for this mode, but you can hide the the time grid using the following properties: scale: "Manual",
startDate: "2020-01-01", // use a day in the past
can we change the expander or collapse icon
Answered: You can change the icons using CSS. This is how the icons are defined in the default CSS theme: .gantt_default_tree_image_expand {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz...
Changing the date in the resource calendar
Answered: To change the current date, it is necessary to update the startDate property, which is used as the default date for the columns (if they don’t specify a custom date). You can find an example here: Ne...
How to export the Scheduler as image/pdf in React
Answered: You need to access the DayPilot.Scheduler object using the control property of the DayPilotScheduler component: const scheduler = schedulerRef.current.control; Another option is to use the controlRef...
customizing context menu with click/touch
Answered: Sorry for the delay! Which component do you use (Calendar, Scheduler..)? > I am also wondering if it would be possible to pass information from the onEventClick event to the context menu’s onShow eve...
Questions 1-30 of 2943
Next