Nanometer Process Machine

    @daypilot/daypilot-lite-vue
    TypeScript icon, indicating that this package has built-in type declarations

    3.11.0 • Public • Published

    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

    Release History

    Online Demo

    JavaScript Event Calendar Demo

    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 Weekly Calendar

    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

    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

    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

    Install

    npm i @daypilot/daypilot-lite-vue

    DownloadsWeekly Downloads

    59

    Version

    3.11.0

    License

    Apache-2.0

    Unpacked Size

    279 kB

    Total Files

    5

    Last publish

    Collaborators

    • daypilot