Open-Source JavaScript Calendar

Get E-mail Notifications Get notifications when new releases are available.

DayPilot Lite is a free and open-source version of DayPilot - a library of calendar/scheduler UI components. It can help you build calendar, scheduling, project management and resource booking applications.

It is available for JavaScript, Angular, React, and Vue.

Download Live Demo

Features

Drag and drop (event creation, moving, resizing)
Integrated delete icon
Daily, weekly, and monthly calendar views
The calendar/scheduler is styled using CSS - you can build your own theme online using Theme Designer
Use custom event data properties to adjust the appearance of individual events
Use custom HTML in events
Advanced date picker for changing the calendar date (with highlighting of busy days, free-hand range selection, CSS styling, week numbers)
Built-in XSS protection (text values are encoded automatically)
Resource calendar that displays custom columns (people, tools, rooms)
The calendar can display a custom number of columns
You can define and highlight your own business hours
You can translate the calendar automatically by setting a custom locale
Events use a color bar that you can change to show different event types
TypeScript support
Customizable modal dialog for editing event details
Event context menu with custom actions

Open-Source Tutorials

HTML5/JavaScript Event Calendar (Open-Source)
Event calendar introduction - week view, loading data, drag and drop, CSS themes, sample PHP REST backend.
Angular Calendar: Day/Week/Month Views (Open-Source)
Angular event calendar component with day, week and month views that display scheduler calendar events. You can switch the current date using a date picker component.
React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
Vue.js Weekly Calendar Tutorial (Open-Source)
How to create a weekly calendar application using the Vue appointment calendar/scheduler component.
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.

License

DayPilot Lite for JavaScript is open-source (Apache License 2.0).

What's New

Release History

Subscribe to release notifications.

Angular Calendar/Scheduler

DayPilot Lite is available for Angular (@daypilot/daypilot-lite-angular). It includes these Angular components:

Angular tutorials:

React Calendar/Scheduler

The React version of DayPilot Lite is available at NPM as @daypilot/daypilot-lite-react package.

React components:

Vue Calendar/Scheduler

You can use DayPilot Lite in your Vue application as well. The Vue package name is @daypilot/daypilot-lite-vue.

Vue components:

Weekly Event Calendar

To display a weekly calendar, simply add viewType: "Week" to the calendar properties.

The weekly view will automatically display the current week. You can switch the calendar to a different week the date using startDate property. The calendar will calculate the first day of week using the defined locale.

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    startDate: DayPilot.Date.today()
  });
  dp.init();
</script>

Demo:

JavaScript Weekly Calendar Demo

Daily Event Calendar

To display a daily calendar, add viewType: "Day" property to the calendar component config. It will display the day specified using startDate property (the default value of startDate is today).

JavaScript

<div id="dp"></div>

<script>
  
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Day",
    startDate: DayPilot.Date.today()
  });
  dp.init();

</script>

Demo:

JavaScript Daily Event Calendar Demo

Monthly Event Calendar

Here is a quick example that shows how you can add the monthly calendar component to your application:

<div id="dp"></div>

<script>

  const dp = new DayPilot.Month("dp", {
    startDate: DayPilot.Date.today()
  });
  dp.init();

</script>

Demo:

JavaScript Monthly Calendar Demo

Resource Calendar

The JavaScript resource calendar displays time on the Y axis and custom columns. You can use the resource calendar view to show a schedule for multiple resources (locations, employees, cars, machines, rooms) side by side.

<div id="dp"></div>

<script>

  const dp = new DayPilot.Calendar("dp", {
    viewType: "Resources",
    columns: [
      { name: "Person 1", id: "P1"},
      { name: "Person 2", id: "P2" },
      { name: "Person 3", id: "P3" },
      { name: "Tool 1", id: "T1" },
      { name: "Tool 2", id: "T2" },
      { name: "Tool 3", id: "T3" },
    ]
  });
  dp.init();

</script>

See also a resource calendar tutorial that explains how to load the column data from a database (it includes full source code for download).

Date Picker

The library includes a date picker component, called Navigator. It lets users switch the calendar date easily.

Features:

Display a custom number of months
Vertical or horizontal orientation
Optional week numbers
Range modes: day, week, month
Select a custom date range using drag and drop
Highlight busy days automatically (load the data in the same format that is used by the calendar components)

JavaScript Example

<div class="left">
    <div id="nav"></div>
</div>
<div class="right">
    <div id="cal"></div>
</div>

<script>
  const nav = new DayPilot.Navigator("nav", {
    showMonths: 3,
    selectMode: "Week",
    onTimeRangeSelected: args => {
      dp.update({startDate: args.day});
    }
  });
  nav.init();
  
  const cal = new DayPilot.Calendar("cal", {
    viewType: "Week"
  });
  cal.init();

</script>

Demo:

JavaScript Date Picker Calendar Demo

Drag and Drop Calendar

The calendar supports drag and drop operations, such as event creation (by selecting a time range), event moving and resizing.

The drag and drop actions are enabled by default.

When moving an event, the calendar will update the position after drop automatically. You can detect this action using onEventMoved event handler and save the new position in a database:

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    onEventMoved: args => {
      console.log("Event moved to a new position", args.newStart, args.newEnd);
    }
  });
  dp.init();
</script>

To detect when a calendar event has been resized using drag and drop, use the onEventResized event handler:

<div id="dp"></div>

<script>
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    onEventMoved: args => {
      console.log("Event moved to a new position", args.newStart, args.newEnd);
    }
  });
  dp.init();
</script>

Modal Dialog for Editing Calendar Event Details

The DayPilot library includes a programmatic modal dialog that lets you edit calendar events. You can use it to edit the scheduler event standard fields (text, start, end) and also any custom fields that you define.

It has built-in support for many field types (such as text, checkbox, radio selection, searchable drop-down list, tabular data, readonly image, HTML and scrollable text). It includes special handling of date and date/time fields that let you modify the scheduler event start and end values using a date and time picker.

<div id="calendar"></div>

<script>

    const calendar = new DayPilot.Calendar("calendar", {
        viewType: "Week",
        onEventClick: async args => {

            const colors = [
                {name: "Blue", id: "#3c78d8"},
                {name: "Green", id: "#6aa84f"},
                {name: "Yellow", id: "#f1c232"},
                {name: "Red", id: "#cc0000"},
            ];

            const form = [
                {name: "Text", id: "text"},
                {name: "Start", id: "start", type: "datetime"},
                {name: "End", id: "end", type: "datetime"},
                {name: "Color", id: "barColor", type: "select", options: colors},
            ];

            const modal = await DayPilot.Modal.form(form, args.e.data);

            if (modal.canceled) {
                return;
            }

            calendar.events.update(modal.result);

        },
    });
    calendar.init();

</script>

Dynamic Context Menu

You can add a context menu to scheduler events to provide access to additional operations.

The context menu can display icons (JPEG, PNG, SVG) before the text.
Use separators to group menu items.
Menu items can have children (submenu).
Bind the context menu to left or right mouse click.
Change the context menu item text on the fly, depending on the event type.
Enable/disabled menu items dynamically depending on calendar event status.
Show a complete list of actions that can be performed on events/tasks.
Provide shortcuts to common actions such as lock, duplicate, postpone, copy, assign, change status, export, and print calendar events.
The context menu automatically adjusts its own position so that it is displayed inside the current viewport.

Calendar CSS Themes

The open-source download package with the calendar library includes several sample CSS themes:

Green
Transparent
Traditional
White

You can create your own theme using the online CSS theme designer.

Weekly calendar component using the "Green" CSS theme:

Monthly calendar component using the "Green" CSS theme:

To use a custom theme, you need to include the theme CSS file in the HTML page and apply the theme using the theme property:

<div id="dp"></div>

<script type="text/javascript">
  
  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    theme: "calendar_green",
    // ....
  });
  dp.init();

</script>

You can also change the CSS theme on the fly:

dp.update({ cssTheme: "calendar_green" });

Delete Icon

The calendar component includes built-in support for deleting events/tasks using an icon that appears in the top-right corner of an event box.

As soon as you enable it using eventDeleteHandling: "Update" the calendar will show the delete icon on hover.

const calendar = DayPilot.Calendar("calendar", {
  eventDeleteHandling: "Update",
  // ..
});
calendar.init();

If you click the icon, the scheduler will remove the event. To store the changes in a database, use the onEventDeleted event handler which is called after the event is removed.

const calendar = DayPilot.Calendar("calendar", {
  eventDeleteHandling: "Update",
  onEventDeleted: args => {
    console.log("Event deleted, id: ", args.e.id());
  }
  // ..
});
calendar.init();

If you want to ask for confirmation before actually removing the event from the calendar view, use onEventDelete where it is possible to cancel the default action:

const calendar = DayPilot.Calendar("calendar", {
  eventDeleteHandling: "Update",
  onEventDelete: async args => {
    const modal = await DayPilot.Modal.confirm("Do you really want to delete this event?");
    if (modal.canceled) {
      return;
    }
    calendar.events.remove(e);
  },
  // ..
});
calendar.init();

Features

Open-Source Tutorials

License

What's New

Angular Calendar/Scheduler

React Calendar/Scheduler

Vue Calendar/Scheduler

Weekly Event Calendar

Daily Event Calendar

Monthly Event Calendar

Resource Calendar

Date Picker

Drag and Drop Calendar

Modal Dialog for Editing Calendar Event Details

Dynamic Context Menu

Calendar CSS Themes

Delete Icon

DayPilot Pro for JavaScript

Components

DayPilot Lite for JavaScript

Products

Tools

Resources

About Us

DayPilot