Questions Tagged how-to
DayPilot.Row.events.all()
Answered: You can access the original data object like this:
var data = events[0].data;
Alert() Replacement in TypeScript, Angular.
I'm searching for a fancy Alert() Replacement in TypeScript, Angular.
onBeforeCellRender
Answered: The onBeforeCellRender implementation must be very fast because it's called for every cell in the grid during scrolling. I recommend reading all cell data in advance and storing it on the client side...
How to change start time?
Answered: In the Pro version, this can be set using dayBeginsHour and dayEndsHour properties. See also: https://doc.daypilot.org/calendar/overnight-scheduling/
How to change bar color?
Answered: The right property name is "barColor". Here is a full list of event object properties: https://api.daypilot.org/daypilot-event-data/ There is also an example that shows how to change the duration bar...
full display for Calendar
Answered: In the JavaScript version, all member names follow the camel case convention. You need to use "heightSpec": https://api.daypilot.org/daypilot-calendar-heightspec/
In tutorial app is referenced
Answered: It's the Vue app:
var app = new Vue({
el: '#scheduler-app',
data: { }
});
It was missing in the previous code samples - the tutorial is updated now.
Change the amount of days on screen, scroll through entire year
Answered: Yes, you'd have to calculate the cellWidth based on the viewport size. Something like this:
cellWidth: function(args) { var days = args.date.daysInMonth(); return Math.floor(dp.nav.scroll.clientWid...
New Event with dropdown values as name
On the creation of a new event, instead of typing name, get possible values from a query to a mysql. Getting a dropdown menu to select the name of the event.
can we assign value to parent control in DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
Answered: Yes, you can use BeforeCellRender to set the content of every grid cell. See also: https://doc.daypilot.org/scheduler/cell-customization/
New Event from a list of pre define events
Answered: I'm not sure if this is what you are looking for but if you have existing unscheduled events/tasks that need to be scheduled you can use external drag and drop to move them to a specific time slot in...
Custom multiple parent control value
Answered: You can set the content of the grid cells using BeforeCellRender (see also https://forums.daypilot.org/question/5098/can-we-assign-value-to-parent-control-in-daypilotscheduler1). You can also add spe...
Displaying Group Availability of child element in parent control in asp.net webforms
Answered: This is possible but you'll need to calculate the values yourself because there is no API to get a list of events for the specified time range in the ASP.NET WebForms version.
Show Duration of External Drag and Drop Event
Answered: This example uses the generic HTML5 drag and drop API and that doesn't allow reading the source object properties until drop. So unfortunately, this is not possible. If you use the built-in external ...
Sticky Time Header on Javascript Scheduler
Answered: You need to use heightSpec value other than "Auto": https://doc.daypilot.org/scheduler/height/ That will enable a vertical scrollbar and the time header will remain fixed. It's a good idea to design ...
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/
Calendar (WeekView) seprator is hiding behind Event
Answered: In the Calendar component, the current time indicator position is fixed at this moment and it is always displayed below events. The indicator element is marked with ".calendar_default_now" CSS class ...
Drag and drop not working in mobile devices
Dear colleagues, Im testing the scheduler. I've implemented drag and drop from one schedule grid to another. Everything works well, but not in IPad and other mobile devices, . I cannot move any event...
Open PopUp when selecting a timerange
Answered: There are three possible strategies that you can use for modal dialog in ASP.NET WebForms: 1. Use UpdatePanel and ModalPopupExtender: https://code.daypilot.org/75958/scheduler-and-modalpopupextender-...
For Database
Answered: There is no specific PostgreSQL tutorial available but you can check the Angular + MySQL tutorials: https://code.daypilot.org/tutorials/mysql+angular In order to switch the tutorials to MySQL you'd n...
Better represent events that start or end outside of the scheduler period
Answered: Such events are marked with ".scheduler_default_event_continueleft" and ".scheduler_default_event_continueright" CSS classes (for the default theme). At this moment, there is no style associated with...
Displaying Group Availability without disable row
Answered: This is the code that calculates the group availability (https://code.daypilot.org/97538/javascript-scheduler-displaying-group-availability):
onBeforeCellRender: function(args) {
if (args.cell.i...
Read only
Answered: The "allowDefaultContextMenu" property lets you enable the default browser context menu. By default, this is disabled for the Scheduler so that you don't see the browser context menu over the Schedul...
Color ressource according status
Answered: The row header background color needs to be set using onBeforeRowHeaderRender event. The onBeforeCellRender only sets properties of the grid cells. It could look like this:
dp.onBeforeRowHeaderRend...
Resource Bubble Not Working
Answered: In the recent versions, there seems to be a problem with displaying the resource bubble when hovering the first resource (Angular only). When you move the mouse to another resource, it works fine. Th...
No of Days Calculation is getting reduced by One Day
Answered: If you only work with full days, you can switch to eventEndSpec="Date" mode which will translate the end date to "end of day": https://doc.daypilot.org/scheduler/event-end-date-time/ But that will no...
Daypilot Navigator in french
Answered: Yes, just specify the locale when creating the DayPilot.Navigator instance:
var nav = new DayPilot.Navigator("nav");
nav.locale = "fr-fr";
nav.init();
See also: https://api.daypilot.org/daypilo...
Get day select in DayPilot Navigator
Answered: Yes, you can use selectionDay: https://api.daypilot.org/daypilot-navigator-selectionday/ If you have a Navigator instance called "nav":
var nav = new DayPilot.Navigator("...");
// ...
you can re...
Hotel Related - Book Multiple rooms for a single client
Answered: Yes, this is possible and there are several options: 1. You can select multiple time ranges using Ctrl+drag: https://doc.daypilot.org/scheduler/time-range-multi-selecting/ 2. You can create the reser...
COPY PASTE
Answered: You can access the original data object as "e.data". Example:
var newEvent = new DayPilot.Event({
start: args.newStart,
end: args.newEnd,
text: "text " + args.e.text(),
lieu: "lieu " + ...
Questions 1-30 of 2322
Next