Questions Tagged javascript

Answered: It's possible to create a time range selection using the API - use selectTimeRange() method: https://api.daypilot.org/daypilot-scheduler-selecttimerange/

Answered: You can use your own button and add a new record to config.tasks property (Angular will detect the change) or you can use the direct API tasks.add() method: https://api.daypilot.org/daypilot-gantt-ta...

Answered: Unfortunately, DayPilot is an JavaScript/HTML5 component and it only works in a browser.

Answered: Unfortunately it's not possible to use custom grouping of the time headers. Only the predefined values are available (see https://doc.daypilot.org/scheduler/time-header-groups/ ). If you want to show...

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

Answered: Hi Jorma, You'll need to add a new field to the database (if you don't have one that holds the information already). Then you need to add it to the JSON output in backend_events.php: // ... foreach($...

Answered: The time headers follow the "groupBy" specification. If you use groupBy: "Day" the time headers cells with start at 00:00 and end at 24:00 (00:00 the next day). In this case, it doesn't depend on the...

Answered: The Scheduler always uses the date part of the startDate to calculate the timeline. 1. If you use scale units smaller than 1 day you can hide selected time cells using onIncludeTimeCell event handler...

Answered: You can take a look at this example that uses DayPilot Pro: https://code.daypilot.org/41760/using-javascript-html5-event-calendar-in-spring-boot-java The Maven config used in this project is very bas...

Answered: You can simply use JavaScript/jQuery to modify the page content. If needed, you can call stretch() to update the modal dimensions to fit the content: https://api.daypilot.org/daypilot-modal-stretch/ ...

Answered: Solved! The statement I wrote in the original question is correct. The issue was the SQL syntax. I did not use the right syntax for postgres, which is a bit different from SQLite of MySQL.

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

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 headers): ...

Answered: This should be fixed now in the latest sandbox build (2019.4.4095).

Answered: To clear the events out of the viewport you'll need to enable cache sweeping using dynamicEventRenderingCacheSweepiing: https://api.daypilot.org/daypilot-scheduler-dynamiceventrenderingcachesweeping/...

Answered: There is a tutorial that shows how to use the Pro version in an ASP.NET Core application: https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core This project will work with the Lite ...

Answered: This is in the plan but unfortunately it's not available yet. At this moment, the Calendar can only show up to 24 hours on the vertical axis.

Answered: Hi Steve, Such events are marked with "scheduler_default_event_continueleft" (those starting before startDate) and "scheduler_default_event_continueright" (those ending after startDate + days). In th...

Answered: Unfortunately, the Persian calendar is not supported at the moment.

Answered: You can take a look at the following tutorial: https://code.daypilot.org/12302/angular-scheduler-zoom It's an Angular sample that uses the built-in Scheduler zoom support which retains the scrollbar ...

Answered: The args object of onEventClick event handler stores a number of parameters that are read from the click event handler (such as the ctrl/shift key status). Unfortunately, the onClick handler of the c...

Answered: Hi Sharon, This is a bit more complex scenario that can't be implemented using a simple snippet. Please take a look at the following tutorial: https://code.daypilot.org/76399/javascript-html5-schedul...

Answered: You can get the NPM installation command from http://npm.daypilot.org . Just select "Vue" and "NPM" in the toolbar: https://npm.daypilot.org/

Answered: In that case you need to extend the filter object to include both parameters. Let's have this filter form (HTML): <div class="space"> Filter: <input id="filter" /> <a href="#" id="clear">Clear</a> <i...