Questions Tagged lite
How can i style modal pop-up
Answered: You can either override selected styles of the built-in theme or create a custom theme and apply it using the theme property: const modal = await DayPilot.Modal.form(form, data, { theme: "my_theme" }...
how to disable single eventmoving and resizeing
Answered: At this moment, you can disable event moving and resizing for individual events only in the Pro version (using moveDisabled and resizeDisabled properties of the data object or using the onBeforeEvent...
daypilot lite API
Answered: Both onEventClick and onEventClicked are available in the Lite version. You can verify the availability of feature in the Lite version in the feature matrix or using the TypeScript definitions that a...
Tags and cssClass properties
Answered: Both the tags and cssClass properties are available in the Lite version as well. You can find a full list of available event properties in the API docs for DayPilot.Event.data object. These propertie...
The ToolTip isn't working in DayPilot.Calendar
Answered: Yes, there turned out to be a problem with the tooltip for calendar events. It should be fixed now in the latest sandbox build (2023.3.485): https://javascript.daypilot.org/sandbox/lite/
Event Calendar, resource view: days on Y-axis
Answered: At this moment, the Calendar can only display hours on the vertical axis.
Event Item
Answered: By default, the calendar displays the value of the "text" property in the event boxes. If you want to display more data, you can customize the event content using onBeforeEventRender event handler: h...
Vue Calendar component is not exposing its properties and methods
Answered: There is now a Vue Composition API example available in the documentation: https://doc.daypilot.org/calendar/vue-js/ Here is a shortened version that shows how to access the DayPilot.Calendar object ...
Recurrent events
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...
Honoring grid layout
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...
How to not show non business Hours in DayPilotCalendar
Answered: You can hide non-business hours using the heightSpec property:
const calendar = new DayPilot.Calendar("dp", {
heightSpec: "BusinessHoursNoScroll",
//...
});
calendar.init();
See also: htt...
update is Undefined (Calendar)
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...
Change Hour Format
Answered: You can hide the minutes using CSS:
.calendar_default_rowheader_minutes {
display: none;
}
Calendar Customization
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 i...
error with computed function (Calendar)
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...
Use method on click (Calendar)
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...
Create event only by clicking (Calendar)
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 ...
How to display custom task array elements (React Calendar)
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...
ERROR TypeError: this.f is not a function at DayPilot.Navigator.select
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...
How to clear the previous event from calendar if the updated event list is empty/null?
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/
How not to trigger onEventClicked after canceling onEventDelete (Calendar)
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...
VueJS, DayPilotCalendar, resource view
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...
Angular DayPilot Lite Library - DayPilot.Calendar class missing property "headerDateFormat"
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!
View again current month
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()...
cannot find dayBeginsHour for reactjs
Answered: Unfortunately, these properties are only available in the Pro version of the React Calendar. See also: https://doc.daypilot.org/calendar/overnight-scheduling/
How do I embed a html link in the Event text?
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...
Using Vue Calendar component with the Composition API
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} ...
No event
Answered: Please see my suggestion here: https://forums.daypilot.org/question/5785/example-does-not-work
How to show allday Event in Schedular
Answered: Unfortunately, all-day events are only supported in the Pro version of the calendar: https://doc.daypilot.org/calendar/all-day-events/
daypilot all - functions not working
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...