DayPilot Lite for Vue
DayPilot Lite for JavaScript is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views. It includes a Vue version.
What's New
Online Demo
Features
- Calendar/scheduler views: day, week, work week, month, resource calendar
- 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, colors...)
- Built-in XSS protection
- Localization support
- TypeScript definitions
Tutorials
Vue Weekly Calendar Tutorial
Vue.js Weekly Calendar Tutorial (Open-Source)
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 Resource Calendar
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Vue Date Picker Tutorial
Vue Date Picker with Free/Busy Highlighting (Open-Source)
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
<template>
<DayPilotCalendar id="dp" :config="config" ref="calendar" />
</template>
<script>
import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
export default {
name: 'Calendar',
data: function() {
return {
config: {
viewType: "Week",
startDate: "2022-02-28",
durationBarVisible: false,
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
const dp = args.control;
dp.clearSelection();
if (modal.canceled) {
return;
}
dp.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
});
},
onEventMoved: () => {
console.log("Event moved");
},
onEventResized: () => {
console.log("Event resized");
},
},
}
},
props: {
},
components: {
DayPilotCalendar,
},
computed: {
calendar() {
return this.$refs.calendar.control;
}
},
methods: {
loadEvents() {
// placeholder for an HTTP call
const events = [
{
id: 1,
start: "2022-02-28T10:00:00",
end: "2022-02-28T11:00:00",
text: "Event 1",
backColor: "#6aa84f",
borderColor: "#38761d",
},
{
id: 2,
start: "2022-02-28T13:00:00",
end: "2022-02-28T16:00:00",
text: "Event 2",
backColor: "#f1c232",
borderColor: "#bf9000",
},
];
this.calendar.update({events});
},
},
mounted() {
this.loadEvents();
}
}
</script>Documentation
CSS Themes
The Theme Designer lets you create and download your own CSS theme using an online visual tool.
License
Apache License 2.0