Questions Tagged open-source

Answered: Please take a look at the following docs page: Hiding Time Columns Just note that this feature is only available in the Pro version.

Answered: This is an example project. The library itself (Angular package) is available as @daypilot/daypilot-lite-angular at NPM.

Answered: The recurrence needs to be handled on the server side. You need to supply the expanded occurrences to the calendar as part of the dataset. Most likely, you will want to show an icon indicating that t...

Answered: Unfortunately, the doctor appointment reservation tutorial is not available for Angular + ASP.NET Core at the moment.

Answered: You can use the locale property to apply culture-specific settings (such as date format, first day of week….). const calendar = new DayPilot.Calendar("calendar", { locale: "en-au", // ... }); calenda...

Answered: Do you see any error in the JavaScript console?

Answered: Could you please post a screenshot that would show your requirement?

Answered: The showEventStartEnd property isn’t supported in the open-source version of the Calendar component at the moment. However, you can customize the event content as needed using the onBeforeEventRender...

Answered: The cell duration (and number of cells per hour) can be configured in the Calendar , but this option is only available in the Pro version.

Answered: If you just want to change the content of the time header , you can use the onBeforeTimeHeaderRender event handler to customize it in the Pro version of the Calendar . To define custom time slots , i...

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

Answered: You can create the modal dialog using DayPilot.Modal.form() - you can find an example here: JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog DayPilot.Modal is included in the op...

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

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

Answered: Yes, you can disable event moving using the eventMoveHandling property: { eventMoveHandling: "Disabled", // ... }

Answered: You can take a look at the following tutorial which uses the Composition API in Vue: Vue Resource Calendar (Open-Source)

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

Answered: > Any possibility to show the current timeline or highlight the current cell duration with different background in lite version? This is not supported in the Lite version at the moment. In the Pro ve...

Answered: Drag and drop In the Lite (open-source) version, you can only enable/disable drag and drop for all calendar events using eventMoveHandling and eventResizeHandling . In the Pro version, you can disabl...

Answered: There is no args.newResource available in onEventResize as the resource doesn’t change during resizing. You can access the event resource ID using args.e.resource() .

Answered: Thanks for the update! The problem is the type of events.resource_id database field. It is incorrectly set to varchar instead of integer . Older versions of PHP/PDO converted integer values to string...

Answered: I’m not sure if that’s what you mean but in the Calendar component in the Pro version, it is possible to select multiple events and then delete them using the API (use multiselect.events() to get a l...

Answered: Yes, no problem. DayPilot is a purely client-side solution so you can use it with any backend. This example includes a .NET 7 project but you can use the same source code with .NET 6 as well. You jus...

Answered: Thanks for reporting the issue! The current date is changed using the onTimeRangeSelected event of the date picker (Navigator): const navigatorConfig = { // ... onTimeRangeSelected: args => { calenda...

Answered: When displaying a resource calendar ( viewType: "Resources" ), it is necessary to specify the resource id for events using the resource property. This value needs to match the column id exactly (incl...

Answered: You can use a custom modal dialog and add as many field as needed. Here is an example: async function modalText() { const form = [ {name: "Name", id: "name", type: "text"}, {name: "Description", id: ...

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

Answered: This is not supported in the Calendar component at the moment but you can take a look at the Scheduler component which can group concurrent events automatically: https://doc.daypilot.org/scheduler/co...

Answered: > If we have multiple event can we show +2 or +3 etc Please see my answer here: https://forums.daypilot.org/question/5848/multiple-event > in weekly can we change date format You can change the calen...