@daypilot/daypilot-lite-vue
Version:
DayPilot Lite for Vue
198 lines (136 loc) • 7.91 kB
Markdown
# DayPilot Lite for Vue
[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of scheduling components that can display calendar/scheduler UI:
* day, week, month
* resource calendar (resources as columns)
* horizontal timeline (resources as rows)
This is the DayPilot Lite for Vue package.
## What's New
[Release History](https://javascript.daypilot.org/daypilot-lite-history/)
## UI Builder
Customize the scheduling components using an online [UI Builder](https://builder.daypilot.org/) application and **download** a ready-to-run Vue project.
## Online Demo
[](https://javascript.daypilot.org/demo/lite/scheduler/)
[](https://javascript.daypilot.org/demo/lite/calendar/)
[Online Demo](https://javascript.daypilot.org/demo/lite/)
## Features
* Calendar/scheduler views: day, week, work week, month, resource calendar
* Horizontal timeline view
* Event creation using drag and drop
* Drag and drop event moving and resizing
* Integrated delete icon
* Event duration bar with customizable color
* Date picker with free/busy days highlighting, free-hand range selection, day cell customization
* CSS themes (use theme builder to create your own theme)
* Event customization (text, HTML, icons, colors, Vue components...)
* Grid cell customization
* Built-in XSS protection
* Localization support
* TypeScript definitions
* Vue template support
## Tutorials
### Vue Calendar with Day/Week/Month Views
[](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)
[Vue Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)
Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
***
### Vue Resource Calendar Tutorial
[](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
[Vue Resource Calendar (Open-Source)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
***
### Vue Calendar: Using Event Templates
[](https://code.daypilot.org/34309/vue-calendar-templates-open-source)
[Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)](https://code.daypilot.org/34309/vue-calendar-templates-open-source)
Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
***
### Cell Templates in Vue Calendar: Display Slot Start Times, Sunrise & Sunset
[](https://code.daypilot.org/50152/vue-calendar-cell-templates-open-source)
[Cell Templates in Vue Calendar: Display Slot Start Times, Sunrise & Sunset (Open-Source)](https://code.daypilot.org/50152/vue-calendar-cell-templates-open-source)
Use Vue templates to add custom content to calendar cells: text, icons, or even Vue components. Use v-if to display content only in the cells you choose.
***
### Vue Monthly Calendar/Scheduler Tutorial
[](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)
[Vue Monthly Calendar/Scheduler (Open-Source)](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)
How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.
***
### Vue Weekly Calendar Tutorial
[](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
[Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
***
### Vue Date Picker Tutorial
[](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
[Vue Date Picker with Free/Busy Highlighting (Open-Source)](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
## Example
```vue
<template>
<DayPilotCalendar
viewType="Week"
:events="events"
:durationBarVisible="false"
:startDate="startDate"
:eventBorderRadius="5"
@timeRangeSelected="onTimeRangeSelected"
@eventMoved="onEventMoved"
@eventResized="onEventResized"
ref="calendarRef"
/>
</template>
<script setup>
import { DayPilot, DayPilotCalendar } from '@daypilot/daypilot-lite-vue';
import { ref, onMounted } from 'vue';
const startDate = ref("2025-02-28");
const events = ref([]);
const calendarRef = ref(null);
const onTimeRangeSelected = async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1")
const calendar = args.control
calendar.clearSelection()
if (modal.canceled) { return }
calendar.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
})
}
const onEventMoved = () => {
console.log("Event moved")
}
const onEventResized = () => {
console.log("Event resized")
}
const loadEvents = () => {
events.value = [
{
id: 1,
start: "2025-02-28T10:00:00",
end: "2025-02-28T11:00:00",
text: "Event 1",
backColor: "#6aa84faa",
borderColor: "#38761d",
},
{
id: 2,
start: "2025-02-28T13:00:00",
end: "2025-02-28T16:00:00",
text: "Event 2",
backColor: "#f1c232aa",
borderColor: "#bf9000",
},
]
};
onMounted(() => {
loadEvents()
})
</script>
```
## Documentation
* [Vue weekly calendar](https://doc.daypilot.org/calendar/vue-js/)
* [Vue monthly calendar](https://doc.daypilot.org/month/vue-js/)
* [Vue date picker](https://doc.daypilot.org/navigator/vue-js/)
## CSS Themes
The [Theme Designer](https://themes.daypilot.org/) lets you create and download your own CSS theme using an online visual tool.
## License
Apache License 2.0