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

3.21.0 • Public • Published

DayPilot Lite for JavaScript

DayPilot Lite for JavaScript is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views.

What's New

Release History

UI Builder

Customize the scheduling components using an online UI Builder application and download a ready-to-run JavaScript or TypeScript project.

Online Demo

JavaScript Event Calendar Demo

Online Demo

Features

  • Calendar/scheduler views: day, week, work week, month
  • Display a custom number of days (e.g. 4 days)
  • Resource calendar for scheduling multiple resources side by side (rooms, employees, tools, etc.)
  • Integrated helper for day/week/month switching (with date picker synchronization)
  • Event creation using drag and drop
  • Drag and drop event moving and resizing
  • Integrated delete icon
  • Event duration bar with customizable color
  • Context menu
  • Built-in modal dialog for editing event details
  • Custom icons inside events with extended functionality (context menu, custom event handler)
  • 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
  • Angular, React, and Vue packages available

Tutorials

JavaScript Event Calendar Tutorial

JavaScript/HTML5 Event Calendar

HTML5/JavaScript Event Calendar (Open-Source)
Event calendar introduction - week view, loading data, drag and drop, CSS themes, sample PHP REST backend.

JavaScript Resource Calendar Tutorial

JavaScript Resource Calendar

JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
The resource calendar displays custom resources (people, rooms, tools) as columns. This tutorial shows how to load resource data from a PHP/MySQL backend and show custom calendar columns.

HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)

Calendar with Day/Week/Month Views

Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.

ASP.NET Core Weekly Calendar

ASP.NET Core Weekly Calendar

ASP.NET Core Weekly Calendar (Open-Source)
Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.

ASP.NET Core Monthly Calendar

ASP.NET Core Monthly Calendar

ASP.NET Core Monthly Calendar (Open-Source)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.

ASP.NET Core Maintenance Scheduling App

ASP.NET Core Maintenance Scheduling App

ASP.NET Core Maintenance Scheduling (Open-Source)
How to create a visual, color-coded, and easily adjustable maintenance plan in ASP.NET Core using DayPilot.

ASP.NET Core Resource-Scheduling Calendar

ASP.NET Core Resource-Scheduling Calendar

ASP.NET Core Resource-Scheduling Calendar (Open-Source)
How to create a resource-scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.

Spring Boot Weekly Calendar

Spring Boot Weekly Calendar

Weekly Event Calendar in Spring Boot/Java (Open-Source)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.

Spring Boot Monthly Calendar

Spring Boot Monthly Calendar

Monthly Calendar in Spring Boot/Java (Open-Source)
Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.

Spring Boot Resource-Scheduling Calendar

Spring Boot Resource-Scheduling Calendar

Spring Boot Resource-Scheduling Calendar (Open-Source)
Spring Boot application that uses a visual resource-scheduling calendar to display plans for multiple resources side by side.

Example

HTML:

<div id="calendar"></div>
<script src="app.js"></script>

JavaScript:

import {DayPilot} from "@daypilot/daypilot-lite-javascript";

// initialize the calendar component
const calendar = new DayPilot.Calendar("calendar", {
    viewType: "Week",
    startDate: "2023-09-18",
    headerDateFormat: "d/M/yyyy",
    onEventMoved: args => {
        console.log("Event was moved:", args.e);
    }
});
calendar.init();

// load calendar events
const events = [
    {
        start: "2023-03-18T11:00:00",
        end: "2023-03-18T14:00:00",
        id: 1,
        text: "Event 1",
        barColor: "#f37021"
    },
    {
        start: "2023-03-19T11:00:00",
        end: "2023-03-19T14:00:00",
        id: 2,
        text: "Event 2",
        barColor: "#cc004c"
    }
];
calendar.update({events});

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

Package Sidebar

Install

npm i @daypilot/daypilot-lite-javascript

Weekly Downloads

58

Version

3.21.0

License

Apache-2.0

Unpacked Size

287 kB

Total Files

4

Last publish

Collaborators

  • daypilot