Questions Tagged lite

Answered: You can display recurrent events (and add the necessary icons) but you need to handle the recurrence definition and storage on the server side. The calendar needs to receive the individual occurrence...

Answered: This seems to be caused by the wrapper divs that you use to display the columns for DayPilotNavigator and DayPilotCalendar. The tutorial uses "display: flex" to arrange these components but your code...

Answered: You can hide non-business hours using the heightSpec property: const calendar = new DayPilot.Calendar("dp", { heightSpec: "BusinessHoursNoScroll", //... }); calendar.init(); See also: https://doc.day...

Answered: The value of "this.$refs.calendar" will be null before the component is mounted. That means the computed "calendar()" method will return null as well. If you call "loadEvents()" too early it will thr...

Answered: You can hide the minutes using CSS: .calendar_default_rowheader_minutes { display: none; }

Answered: It is possible to modify the appearance using CSS. You can either override the built-in CSS theme for selected elements or you can create a custom CSS theme ( https://themes.daypilot.org ) and adjust...

Answered: The $refs values will only be accessible after the component is mounted. Before that, this.$refs.calendar (or any other $refs value) will be undefined and you will see this error. 1. If you move your...

Answered: Yes - you should take a look at the onTimeRangeSelected event handler in your application. By default, the calendar doesn't do anything when you select a time range (click a cell) so if you see a mod...

Answered: If you click a calendar cell, it will fire onTimeRangeSelect (and onTimeRangeSelected) event handler where you can create a new event. This works in both versions (Lite and Pro). To make sure only a ...

Answered: I have managed to solve this and the solution was: the method that build my events array was async and due to that fact, to update the events field in state I had to perform setState in .then functio...

Answered: This turned out to be a minification issue. It should be fixed now in the latest sandbox build (2023.1.449): https://release.daypilot.org/changes/jslite/ The next official release will be available n...

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/

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

Answered: In the Lite (open-source) version this is not possible at the moment but in the Pro version you can customize the calendar column headers using "onBeforeHeaderRender" event handler: https://doc.daypi...

Answered: This should be fixed now in the latest sandbox build (2022.4.434): https://release.daypilot.org/changes/jslite/ The next official release will be available next week. Thanks for reporting the issue!

Answered: For this, you need to create one more button 'Today Button' and create one function for the today button and write your logic on this. todayDate() { this.configMonth.startDate = DayPilot.Date.today()...

Answered: Unfortunately, these properties are only available in the Pro version of the React Calendar. See also: https://doc.daypilot.org/calendar/overnight-scheduling/

Answered: The "DataTextField" property specifies the name of the data source item field that will be used to set the event text. If you want to set custom event HTML (hyperlink, image, etc.) you can use the Be...

Answered: When using the Composition API in Vue, you can use the calendar component like this: <template> <DayPilotCalendar id="dp" :config="config" /> </template> <script> import {DayPilotCalendar} from '@day...

Answered: Please see my suggestion here: https://forums.daypilot.org/question/5785/example-does-not-work

Answered: Unfortunately, all-day events are only supported in the Pro version of the calendar: https://doc.daypilot.org/calendar/all-day-events/

Answered: I resolved this. I was sending the 'data' object via jQuery $.post and it was failing. Re-populating the object sent using $.post using: newStart: args.newStart.toString(), newEnd: args.newEnd.toStri...

Answered: Unfortunately, this is not supported. In the Pro version, it will be possible to resize columns in the near future.

Answered: The support for heightSpec: "BusinessHoursNoScroll" is now implemented in the latest sandbox build and it will be available in the next release.

Answered: Unfortunately, the Scheduler component is not included in DayPilot Lite for JavaScript. See also the feature matrix here: https://javascript.daypilot.org/feature-matrix/

Answered: It looks like you are using the open-source Lite version which includes only a subset of features. The scrollToHour() and message() methods are only available in the Pro version at the moment. See al...

Answered: At this moment, blocking selected dates is only supported in the Pro version. Please see the following tutorial: https://code.daypilot.org/88013/javascript-calendar-blocking-selected-dates

Answered: No, the Lite version only supports 30-minute slots. See also: https://doc.daypilot.org/calendar/time-cell-duration/

Answered: You can find a demo of the monthly calendar (Lite version) here: https://javascript.daypilot.org/demo/lite/month/index.html Click the "Show source" button to see the JavaScript source code. This demo...

Answered: The RTL text direction is only supported in the Pro version, you can find a demo here: https://javascript.daypilot.org/demo/calendar/rtl.html At this moment, it's not supported in the Lite (open-sour...